CODEWITHSUNDEEP
javascriptphphtmlcss
speedy
speedy

Reputation: 375

How to get equal columns?

I have this class for a megamenu used in a category menu for an ecommerce web application.

class categories {

    var $categorie;
    var $tabs;
    var $subcategorie;
    var $website;

    var $coloane = 3;
    var $randuri = 10;


    function tabs(){

        global $pdoconnect;

        $stmt =  $pdoconnect->query("SELECT * FROM taburi WHERE vizibil = '1' ORDER BY ordine ASC");
        $tabs = $stmt->fetchAll(PDO::FETCH_ASSOC);
        $tabs_c = $stmt->rowCount();

        $return = "";
        if($tabs_c > 0){
            $i = 1;
            $return .= "\n<ul class=\"tabs\">\n";
            foreach($tabs as $t){
                $return .= "\t<li class=\"level0\">\n";
                $return .= "\t\t<div class=\"tab-title\">\n";
                $return .= "\t\t\t<span class=\"tab-image\">\n";
                $return .= "\t\t\t\t".'<img src="'.$this->website.'/media/taburi/'.$t['logo'].'" />'."\n";
                $return .= "\t\t\t</span>\n";
                $return .= $t['nume'];
                $return .= "\t\t</div>\n";
                $return .= "\t".'<div class="level1 hmm-megamenu-box">'."\n";
                $return .= $this->categorie($t['id']);
                $return .= "\t</div>\n";
                $return .= "\t</li>\n";
            }
            $return .= "</ul>";
        }
        return  $return;
    }

    function categorie($tab){
        global $pdoconnect;

        $return = "";
        $stmt = $pdoconnect->prepare("SELECT * FROM categorii WHERE tab =:tab AND vizibil='1'");
        $stmt->bindValue(':tab', $tab, PDO::PARAM_INT);
        $stmt->execute();

        $categorie   = $stmt->fetchAll(PDO::FETCH_ASSOC);
        $categorie_c = $stmt->rowCount();

        if($categorie_c > 0){
            $i = 0;
            $return .= "<div class=\"hmm-megamenu-block\">\n";
            foreach ($categorie as $cat) {
                $return .= "\t<div class=\"hmm-megamenu-column\">\n";
                // if($i % 2 == 0 && !empty($i) && $this->countSubcategorii($cat['categorie']) <= $this->randuri){
                //  $return .= "</div><div class=\"hmm-megamenu-column\">\n";
                // }
                $return .= "\t\t\t<a class=\"head-list\">".$cat['categorie']."<i class=\"fa fa-chevron-right\" style=\"font-size: 8px; margin-left: 5px;\"></i></a>\n";
                $return .= $this->subcategorie($cat['categorie']);
                $return .= "\t\t</div>\n";
                $i++;
            }

            $return .= "</div>";

        }
        return $return;

    }


    function subcategorie($cat){
        global $pdoconnect;

        $return = "";
        $stmt = $pdoconnect->prepare("SELECT * FROM categorii WHERE categorie=:categorie AND subcategorie IS NOT NULL");
        $stmt->bindValue(':categorie', $cat, PDO::PARAM_STR);
        $stmt->execute();

        $subcategorie = $stmt->fetchAll(PDO::FETCH_ASSOC);

        $subcategorie_c = $stmt->rowCount();

        if($subcategorie_c > 0){
            foreach ($subcategorie as $scat) {
                $return .= "\t".'<a href="'.$this->website.'/c/'.strtolower($scat['seo']).'">'.$scat['subcategorie'].'</a>'."\n";
            }
        }
        return $return;
    }
}

For the moment the menu items looks like this

enter image description here

but the desired result should be

enter image description here

How can i get this result just with php?

Upvotes: 1

Views: 82

Answers (2)

speedy
speedy

Reputation: 375

Solved

function categorie($tab){
    global $pdoconnect;

    $return = "";
    $stmt = $pdoconnect->prepare("SELECT * FROM categorii WHERE tab =:tab AND vizibil='1'");
    $stmt->bindValue(':tab', $tab, PDO::PARAM_INT);
    $stmt->execute();

    $categorie   = $stmt->fetchAll(PDO::FETCH_ASSOC);
    $categorie_c = $stmt->rowCount();
    $return     .= "<div class=\"hmm-megamenu-block\">\n";
    if($categorie_c > 0){
        $i = 1;
        $return .= "\t<div class=\"hmm-megamenu-column\">\n";
        foreach ($categorie as $cat) {
            if($i % 3 == 0 && !empty($i) && $this->countSubcategorii($cat['categorie']) <= $this->randuri){
                $return .= "</div><div class=\"hmm-megamenu-column\">\n";
            }else if($i % 3 == 0 && !empty($i) && $this->countCategorii($tab) >= $this->coloane){
                $return .= "</div><div class=\"hmm-megamenu-column\">\n";
            }else if($i % 2== 0 && $this->countCategorii($tab) == 2){
                $return .= "</div><div class=\"hmm-megamenu-column\">\n";
            }
            $return .= "\t\t\t<a class=\"head-list\">".$cat['categorie']."<i class=\"fa fa-chevron-right\" style=\"font-size: 8px; margin-left: 5px;\"></i></a>\n";
            $return .= $this->subcategorie($cat['categorie']);
            $i++;

        }

        $return .= "</div>";


    }
    $return .= "</div>";
    return $return;

}

Upvotes: 0

developerjack
developerjack

Reputation: 1213

I suspect the problem is two fold, in both style and HTML markup.

From a style perspective, your current layout is more or less a grid. You need something a lot more fluid within your CSS.

To allow this, you might need to pre-calculate columns so that you know you're evenly distributing X groups with a total of Y items into 3 columns. This lets you deal with cases where one group may have more items than can fit in the height of the menu (and need to overflow).

Upvotes: 1

Related Questions