CSS Horizontal Drop Down Menu - Show just Categories and Subcategories

[sle39lvr]

I am using CSS Horizontal Drop Down Menu add on which shows categories and other items as shopping cart or contact us link.

I was able to edit it down to this:

?>
<!-- menu area -->
<div id="dropMenuWrapper">
  <div id="dropMenuWrapperb">
    <div id="dropMenuWrapperc">
      <div id="dropMenuWrapperd">
        <div id="dropMenu">
          <ul class="level1">
<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_CATEGORIES; ?></a>
<?php
    
    // load the UL-generator class and produce the menu list dynamically from there
    require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
    $zen_CategoriesUL = new zen_categories_ul_generator;
    $menulist = $zen_CategoriesUL->buildTree(true);
    $menulist = str_replace('"level4"','"level5"',$menulist);
    $menulist = str_replace('"level3"','"level4"',$menulist);
    $menulist = str_replace('"level2"','"level3"',$menulist);
    $menulist = str_replace('"level1"','"level2"',$menulist);
    $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
    $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
    echo $menulist;
    ?>
</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div><!-- end dropMenuWrapper-->
<div class="clearBoth"></div>

This currently shows:

-'Categories'
---Category1
------Subcategory1
------Subcategory2
---Category3
---Category4
------Subcategory1
------Subcategory2
------Subcategory3
------Subcategory4

I want it to show:

-Category1
----Subcategory1
----Subcategory2
-Category3
-Category4
----Subcategory1
----Subcategory2
----Subcategory3
----Subcategory4

basically I want it to show main categories across the header. When I edit above code to this:

<!-- menu area -->
<div id="dropMenuWrapper">
  <div id="dropMenuWrapperb">
    <div id="dropMenuWrapperc">
      <div id="dropMenuWrapperd">
        <div id="dropMenu">
          <ul class="level1">
           <li class="submenu">              <?php

 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 $menulist = str_replace('"level4"','"level5"',$menulist);
 $menulist = str_replace('"level3"','"level4"',$menulist);
 $menulist = str_replace('"level2"','"level3"',$menulist);
 $menulist = str_replace('"level1"','"level2"',$menulist);
 $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
 $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
 echo $menulist;
?>

          </ul>
        </div>
      </div>
    </div>
  </div>
</div><!-- end dropMenuWrapper-->
<div class="clearBoth"></div>

Then nothing shows up

Link to the add-on is here:
https://www.zen-cart.com/downloads.php?do=file&id=323

[mesnitu]

not sure, since I don't have it , but is the <li> closed ?
your first code:

echo $menulist;
    ?>
</li>
          </ul>

your second ( missing </li> ?

echo $menulist;
?>

          </ul>

[sle39lvr]

No seems to be the issue

[sle39lvr]

When I run this:

<!-- menu area -->
<div id="dropMenuWrapper">
  <div id="dropMenuWrapperb">
    <div id="dropMenuWrapperc">
      <div id="dropMenuWrapperd">
        <div id="dropMenu">
          <ul class="level1">
           <li class="submenu">              <?php

 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 $menulist = str_replace('"level4"','"level5"',$menulist);
 $menulist = str_replace('"level3"','"level4"',$menulist);
 $menulist = str_replace('"level2"','"level3"',$menulist);
 $menulist = str_replace('"level1"','"level2"',$menulist);
 $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
 $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
 echo $menulist;
?>

          </ul>
        </div>
      </div>
    </div>
  </div>
</div><!-- end dropMenuWrapper-->
<div class="clearBoth"></div>

Menu appears empty and this is what I get in the inspector:

[sle39lvr]

categories_ul_generator.php

class zen_categories_ul_generator {
    var $root_category_id = 0,
    $max_level = 0,
    $data = array(),
    $parent_group_start_string = '<ul%s>',
    $parent_group_end_string = '</ul>',
    $child_start_string = '<li%s>',
    $child_end_string = '</li>',
    $spacer_string = '
',
    $spacer_multiplier = 1;
    
    var $document_types_list = ' (3) ';
    // acceptable format example: ' (3, 4, 9, 22, 18) '
    
    function zen_categories_ul_generator($load_from_database = true)
    {
        global $languages_id, $db;
        $this->data = array();
        $categories_query = "select c.categories_id, cd.categories_name, c.parent_id
										from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
										where c.categories_id = cd.categories_id
										and c.categories_status=1 " .
        								" and cd.language_id = '" . (int)$_SESSION['languages_id'] . "' " .
        								" order by c.parent_id, c.sort_order, cd.categories_name";
        $categories = $db->Execute($categories_query);
        while (!$categories->EOF) {
            $this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => 0);
            $categories->MoveNext();
        }
    }
    
    function buildBranch($parent_id, $level, $submenu=true, $parent_link='')
    {
        $result = sprintf($this->parent_group_start_string, ($submenu==true) ? ' class="level'. ($level+1) . '"' : '' );
        
        if (($this->data[$parent_id])) {
            foreach($this->data[$parent_id] as $category_id => $category) {
                $category_link = $parent_link . $category_id;
                if (($this->data[$category_id])) {
                    $result .= sprintf($this->child_start_string, ($submenu==true) ? ' class="submenu"' : '');
                } else {
                    $result .= sprintf($this->child_start_string, '');
                }
                $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * 1) . '<a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">';
                $result .= $category['name'];
                $result .= '</a>';
				  
                if (($this->data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level+1))) {
                    $result .= $this->buildBranch($category_id, $level+1, $submenu, $category_link . '_');
                }
                $result .= $this->child_end_string;
            }
        }
        
        $result .= $this->parent_group_end_string;
        return $result;
    }
    
    function buildTree($submenu=false)
    {
        return $this->buildBranch($this->root_category_id, '', $submenu);
    }
}
?>

[mc12345678]

When I run this:

<!-- menu area -->
<div id="dropMenuWrapper">
  <div id="dropMenuWrapperb">
    <div id="dropMenuWrapperc">
      <div id="dropMenuWrapperd">
        <div id="dropMenu">
          <ul class="level1">
           <li class="submenu">              <?php

 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 $menulist = str_replace('"level4"','"level5"',$menulist);
 $menulist = str_replace('"level3"','"level4"',$menulist);
 $menulist = str_replace('"level2"','"level3"',$menulist);
 $menulist = str_replace('"level1"','"level2"',$menulist);
 $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
 $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
 echo $menulist;
?>

          </ul>
        </div>
      </div>
    </div>
  </div>
</div><!-- end dropMenuWrapper-->
<div class="clearBoth"></div>

Menu appears empty...

If you track down the open/close of each of the html tags, as mesnitu pointed out, there is a missing </li> just before the closing </ul> in the lower part of the screen. The text may appear in the source code; however, if it can not be processed to understanding, then the result may be blank content.

Add the below </li> tag as highlighted in red:

<!-- menu area -->
<div id="dropMenuWrapper">
  <div id="dropMenuWrapperb">
    <div id="dropMenuWrapperc">
      <div id="dropMenuWrapperd">
        <div id="dropMenu">
          <ul class="level1">
           <li class="submenu">              <?php

 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 $menulist = str_replace('"level4"','"level5"',$menulist);
 $menulist = str_replace('"level3"','"level4"',$menulist);
 $menulist = str_replace('"level2"','"level3"',$menulist);
 $menulist = str_replace('"level1"','"level2"',$menulist);
 $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
 $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
 echo $menulist;
?>

            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div><!-- end dropMenuWrapper-->
<div class="clearBoth"></div>

That will close out the submenu classed opening li tag.

[sle39lvr]

Seems to be the same issue, nothing shows up

Above code worked for a while before 1.5.6a update weirdly. I feel like the issue could be in categories_ul_generator.php? It may have to be modified to pick up categories to show up one level up?

[mc12345678]

So you're telling us, that if you didn't touch the code at all, then everything appears as desired except there is a clickable link at the top of the list, but if remove just the clickable link then everything breaks?

I don't buy it.

There is nothing that is in the above code that would alter the output of the categories_ul_generator. While I might say that the levels could remain the same as provided by the generator considering that you're trying to remove the existing content from level1, it seems like there is still something else going on. Further, content provided has indicated that the page source shows the information is in the page, but it is not rendering... that would seem to indicate that there is an html validation issue.

Just my thoughts on the issue.

[sle39lvr]

Current:
With everything under 'Categories' tab:


When I change the code to previous post related solution:


For that last screenshot, this was the code:

<!-- menu area -->
<div id="dropMenuWrapper">
  <div id="dropMenuWrapperb">
    <div id="dropMenuWrapperc">
      <div id="dropMenuWrapperd">
        <div id="dropMenu">
          <ul class="level1">
           <li class="submenu">              <?php

 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 $menulist = str_replace('"level4"','"level5"',$menulist);
 $menulist = str_replace('"level3"','"level4"',$menulist);
 $menulist = str_replace('"level2"','"level3"',$menulist);
 $menulist = str_replace('"level1"','"level2"',$menulist);
 $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
 $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
 echo $menulist;
?>

            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div><!-- end dropMenuWrapper-->
<div class="clearBoth"></div>

With the original, you can see that 'Categories' tab shows under first <submenu>.
With the edit, you can see that first <submenu> is empty. The parent categories should show up under <submenu>.

[mc12345678]

Not exactly sure why it is desired to remove the "guide" text that currently shows as Categories, but I guess everyone has their reasons.

Looks like what may need to be done to resolve this, likely because of javascript, would be to remove the current opeming tag for <ul and then the opening tag for <li as well as the two closing tags at the end of that code segment. Comment out the first five str_replace lines. That should restore a levelx, submenu series of tags with applicable links between each.

Maybe that's already been done, don't know.