Copy and paste the below code in your navigation menu file like top.phtml or topmenu.phtml .
<?php $_helper = Mage::helper('catalog/category') ?> <?php $_categories = $_helper->getStoreCategories() ?> <?php $currentCategory = Mage::registry('current_category') ?> <?php if (count($_categories) > 0): ?> <ul id="nav"> <?php foreach($_categories as $_category): ?> <li> <a href="<?php echo $_helper->getCategoryUrl($_category) ?>"> <?php echo $_category->getName() ?> </a> <?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?> <?php $_subcategories = $_category->getChildrenCategories() ?> <?php if (count($_subcategories) > 0): ?> <ul> <?php foreach($_subcategories as $_subcategory): ?> <li> <a href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>"> <?php echo $_subcategory->getName() ?> </a> </li> <?php endforeach; ?> </ul> <?php endif; ?> </li> <?php endforeach; ?> </ul> <?php endif; ?>
Now you have to set the css for this type of menu:
/********** < Navigation */ .nav-container {border-bottom-right-radius: 7px;border-top-right-radius: 7px;margin: 0px; background: #fff;width: 995px;height: 44px;} #nav { margin:0px auto; padding:0 0px; font-size:13px; z-index: 9999; margin: 10px 0 4px 0; background:#fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;height:35px} /* All Levels */ /* Style consistent throughout all nav levels */ #nav li { position:relative; text-align:left; margin-top: 0px; padding: 0px; vertical-align: top;} #nav li.over { z-index:12000; } #nav .parent{font-size:16px} #nav a, #nav a:hover { display:block; line-height:1.3em; text-decoration:none;} #nav span { display:block; cursor:pointer; white-space:nowrap; } #nav li ul span {white-space:normal; } #nav ul li.parent a { background:#fff;} #nav ul li.parent li a { background-image:none; } /* 0 Level */ #nav li { float:left; background:gray } #nav li.active a { color:#ffffff; } #nav a { float:left; padding:0px; color:#fff;font: bold 16px; line-height:36px;/* text-transform:capitalize */ text-align: center; width: 100px;} #nav li.over a, #nav a:hover { color:#ffffff; line-height:36px; } /* 1st Level */ #nav ul{width: 200px !important; float: left; background-color: #ffffff; border: 1px solid #848484 !important; box-shadow: 3px 3px 4px #A4A4A4; border-top:none !important; position: absolute; top:36px !important; left:0px; padding-top: 10px; } #nav ul li, #nav ul li.active { float:none; margin:0;} #nav ul li.last { background:#887B19; padding-bottom:0; } #nav ul a, #nav ul a:hover { color:#0033ff !important; line-height: 20px !important;} #nav ul li a { font-weight:normal !important; padding: 0px; margin: 0px; color: #000 !important; text-align: left; font-size: 12px !important; line-height: 20px !important;} /* 2nd Level */ #nav ul, #nav div { position:absolute; width:30em; top:44px; left:-10000px; border:none; } #nav div ul { position:static; border:none; } .nav-static-block { position:relative;background:#fff; border-top:1px solid #ccc; padding:2px; margin:0px;overflow:hidden; } /* 3rd+ Level */ #nav ul ul, #nav ul div { top:5px; } #nav ul li a { background:#fff; height:30px;color:#000} #nav ul li a:hover { background:#fff; } #nav ul li a, #nav ul li a:hover { color:#000; padding-left:7px;} #nav ul span{padding:2px} #nav ul li.last li span { padding:0px 15px 0px 15px; } /* Show menu */ #nav li ul.shown-sub, #nav li div.shown-sub { left:0; z-index:999;} #nav li .shown-sub ul.shown-sub, #nav li .shown-sub li div.shown-sub { left:100px; } /********** Navigation > */
Display top level categories only
<?php $_helper = Mage::helper('catalog/category') ?> // create a object of helper class. <?php $_categories = $_helper->getStoreCategories() ?> // fetch you store category <?php if (count($_categories) > 0): ?> <ul> <?php foreach($_categories as $_category): ?> <li> <a href="<?php echo $_helper->getCategoryUrl($_category) ?>"> <?php echo $_category->getName() ?> </a> </li> <?php endforeach; ?> </ul> <?php endif; ?>
0 Comments