Showing results for 
Search instead for 
Did you mean: 

Code to collapse the SubSub Category in navigation bar

Frequent Visitor

Code to collapse the SubSub Category in navigation bar

Hi Guys,


Need some assistance with code modification. Currently my navigation bar upon mouse hover, is showing the all the categories, sub-categories, subsub-categories. This makes the navigation bar messy, and defeat the purpose. 


 I will like to have a radio button at the side of the subcategories, which upon click can expand a drop down revealing the subsubcategories. My code is as follows & im stuck for days.


Could someone kindly assist?


* $this->renderCategoriesMenuHtml() supports optional arguments:
* int Level number for list item class to start from
* string Extra class of outermost list items
* string If specified wraps children list in div with this class
<?php $_helper = Mage::helper('catalog/category') ?>
<?php $_categories = $_helper->getStoreCategories() ?>
<?php //$currentCategory = Mage::registry('current_category') ?>
<?php if (count($_categories) > 0): ?>
<!-- BEGIN NAV --> 
<ul id="nav">
<?php if (Mage::getStoreConfig('shinesettings/shinesettings_header/navigation_home')): ?>
<li id="nav-home" class="level0 level-top"><a class="level-top" href="<?php echo $this->getUrl('') ?>"><span><?php echo $this->__('Home'); ?></span></a></li>
<?php endif; ?>
<?php foreach($_categories as $_category):
<?php if($this->getCurrentCategory()->getId()==$_category->getId()) { ?>
<li class="level0 nav-5 level-top active">
<?php } else { 
if($_SERVER['REQUEST_URI']=="/faq/" && $_category->getId()=="45"){?>
<li class="level0 nav-5 level-top active">
<?php }else{ ?>
<li class="level0 nav-5 level-top">
<?php }
<?php } ?>
<a class="level-top" href="<?php echo $_helper->getCategoryUrl($_category) ?>"><span><?php echo $_category->getName() ?></span></a>
<?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
<?php $_subcategories = $_category->getChildrenCategories() ?>
<?php if (count($_subcategories) > 0): ?>
<div class="level0-wrapper dropdown-6col" style="left: 0px; display: none;">
<div class="level0-wrapper2">
<?php if($_category->getThumbnail()) { ?> 
<div class="nav-block nav-block-center grid12-8 itemgrid itemgrid-4col"> 
<?php } else { ?>
<div class="nav-block nav-block-center"> 
<?php } ?> 
<ul class="level0">

<?php foreach($_subcategories as $_subcategory): 
$_secondLevelCat = Mage::getModel('catalog/category')->load($_subcategory->getId());
if (!$_secondLevelCat->getData("include_in_menu")) continue;
<li class="level1 nav-6-1 parent item">

<a href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>"><span><?php echo $_subcategory->getName() ?></span></a>
<!--sub sub category-->
<?php $_subcategory = Mage::getModel('catalog/category')->load($_subcategory->getId()) ?> 
<?php $_subsubcategories = $_subcategory->getChildrenCategories() ?>
<?php if (count($_subsubcategories) > 0): ?>

<ul class="level1">
<?php foreach($_subsubcategories as $_subsubcategory):
$_thirdLevelCat = Mage::getModel('catalog/category')->load($_subsubcategory->getId());
if (!$_thirdLevelCat->getData("include_in_menu")) continue; ?>
<li class="level2 nav-6-1-1">
<a href="<?php echo $_helper->getCategoryUrl($_subsubcategory) ?>"><span><?php echo $_subsubcategory->getName() ?></span></a>
<?php $_subsubsubcategory = Mage::getModel('catalog/category')->load($_subsubcategory->getId()) ?> 
<?php $_subsubsubcategories = $_subsubcategory->getChildrenCategories() ?>
<?php if (count($_subsubsubcategories) > 0): ?>
<div class="level2 sub-wrapper" style="height: auto;">
<ul class="level2">
<?php foreach($_subsubsubcategories as $_subsubsubcategory): ?>
<li class="level3 nav-1-1-1-1">
<a href="<?php echo $_helper->getCategoryUrl($_subsubsubcategory) ?>"><span><?php echo $_subsubsubcategory->getName() ?></span></a>
</li> <!--level3 nav-1-1-1-1-->
<?php endforeach; ?>
</ul> <!--level2-->
</div> <!--level2 sub-wrapper-->
<?php endif; ?>
</li> <!--level2 nav-6-1-1-->
<?php endforeach; ?>
</ul> <!--level1-->

<?php endif; ?>
<!--sub sub category--> 

</li> <!--level1 nav-6-1 parent item-->
<?php endforeach; ?> 
</ul> <!--level0-->

</div> <!--nav-block nav-block-center--> 

<?php if($_category->getThumbnail()) { ?>
<div class="nav-block nav-block-right std grid12-4">
<a href="<?php echo $_helper->getCategoryUrl($_category) ?>"><img src="<?php echo Mage::getBaseUrl('media').'catalog/category/'.$_category->getThumbnail() ?>" align="absmiddle" /></a>
</div> <!--nav-block nav-block-right std grid12-4-->
<?php } ?>
</div> <!--level0-wrapper2-->
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('category-node-'.$_category->getId())->toHtml(); ?>
</div> <!--level0-wrapper dropdown-6col-->
<?php endif; ?>
<?php endforeach; ?>
<?php $custom_tab = Mage::getModel('cms/block')->load('shine_navigation_block');
if($custom_tab->getIsActive()) {
echo '
<li class="nav-custom-link level0 level-top parent">
<a href="#" class="level-top">
<div class="level0-wrapper" style="left: 0px; display: none;"><div class="header-nav-dropdown-wrapper clearer">'.$this->getLayout()->createBlock('cms/block')->setBlockId('shine_navigation_block')->toHtml().'</div></div>
} ?>
</ul> <!--megamenu-->
<?php endif; ?>
<script type="text/javascript">
jQuery(function($) {
$("#nav > li").hover(function() {
var el = $(this).find(".level0-wrapper");
el.css("left", "0");
el.stop(true, true).delay(150).fadeIn(300, "easeOutCubic");
}, function() {
$(this).find(".level0-wrapper").stop(true, true).delay(300).fadeOut(300, "easeInCubic");
var isTouchDevice = ('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0);
jQuery(window).on("load", function() {
if (isTouchDevice)
jQuery('#nav a.level-top').click(function(e) {
$t = jQuery(this);
$parent = $t.parent();
if ($parent.hasClass('parent'))
if ( !$t.hasClass('menu-ready'))
jQuery('#nav a.level-top').removeClass('menu-ready');
return false;
}); //end: on load