Try the Demo

Magento

  • Home
  • Wiki
  • 4 - Themes And Template Customization
  • Catalog
  • Hide navigation items with CSS

Hide navigation items with CSS

Last modified by jan212 on Thu, June 24, 2010 17:51
Source|Old Revisions  

This is an old revision of the document!

I made a small modification on method drawItem(). The rendered source will give out an individual id for each point in navigation, so this is a small hide-by-css hack.

app/code/core/Mage/Catalog/Block/Navigation.php, around Line 134

Replace

  1. /**
  2.      * Enter description here...
  3.      *
  4.      * @param Mage_Catalog_Model_Category $category
  5.      * @param int $level
  6.      * @param boolean $last
  7.      * @return string
  8.      */
  9.     public function drawItem($category, $level=0, $last=false)
  10.     {
  11.         $html = '';
  12.         if (!$category->getIsActive()) {
  13.  
  14.             return $html;
  15.         }
  16.  
  17.         $children = $category->getChildren();
  18.         $hasChildren = $children && $children->count();
  19.         $html.= '<li';
  20.         if ($hasChildren) {
  21.              $html.= ' onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"';
  22.         }
  23.  
  24.         $html.= ' class="level'.$level;
  25.         if ($this->isCategoryActive($category)) {
  26.             $html.= ' active';
  27.         }
  28.         if ($last) {
  29.             $html .= ' last';
  30.         }
  31.         if ($hasChildren) {
  32.             $cnt = 0;
  33.             foreach ($children as $child) {
  34.                 if ($child->getIsActive()) {
  35.                     $cnt++;
  36.                 }
  37.             }
  38.             $html .= ' parent';
  39.         }
  40.         $html.= '">'."n";
  41.         $html.= '<a href="'.$this->getCategoryUrl($category).'"><span>'.$category->getName().'</span></a>'."n";
  42.         //$html.= '<span>'.$level.'</span>';
  43.  
  44.         if ($hasChildren){
  45.  
  46.             $j = 0;
  47.             $htmlChildren = '';
  48.             foreach ($children as $child) {
  49.                 if ($child->getIsActive()) {
  50.                     $htmlChildren.= $this->drawItem($child, $level+1, ++$j >= $cnt);
  51.                 }
  52.             }
  53.  
  54.             if (!empty($htmlChildren)) {
  55.                 $html.= '<ul class="level' . $level . '">'."n"
  56.                         .$htmlChildren
  57.                         .'</ul>';
  58.             }
  59.  
  60.         }
  61.         $html.= '</li>'."n";
  62.         return $html;
  63.     }

With

  1. /**
  2.      * Enter description here...
  3.      *
  4.      * @param Mage_Catalog_Model_Category $category
  5.      * @param int $level
  6.      * @param boolean $last
  7.      * @return string
  8.      * modified for css hide by jan212@05.05.2008
  9.      */
  10.     public function drawItem($category, $level=0, $last=false)
  11.     {
  12.         $html = '';
  13.         if (!$category->getIsActive()) {
  14.  
  15.             return $html;
  16.         }
  17.  
  18.         $children = $category->getChildren();
  19.         $hasChildren = $children && $children->count();
  20.         $html.= '<li';
  21.         if ($hasChildren) {
  22.              $html.= ' onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"';
  23.         }
  24.         //modified for css hide from jan212
  25.         $cid = $category->getID();
  26.         //
  27.         $html.= ' class="level'.$level;
  28.         //
  29.        if ($this->isCategoryActive($category)) {
  30.             $html.= ' active ';
  31.         }
  32.         if ($last) {
  33.             $html .= ' last';
  34.         }
  35.         if ($hasChildren) {
  36.             $cnt = 0;
  37.             foreach ($children as $child) {
  38.                 if ($child->getIsActive()) {
  39.                     $cnt++;
  40.                 }
  41.             }
  42.             $html .= ' parent';
  43.         }
  44.         //modified for css hide from jan212
  45.         $html.= '" id="nav-'.$level.'-'.$cid.'">'."n";
  46.         //
  47.         $html.= '<a href="'.$this->getCategoryUrl($category).'"><span>'.$this->htmlEscape($category->getName()).'</span></a>'."n";
  48.         //$html.= '<span>'.$level.'</span>';
  49.  
  50.         if ($hasChildren){
  51.  
  52.             $j = 0;
  53.             $htmlChildren = '';
  54.             foreach ($children as $child) {
  55.                 if ($child->getIsActive()) {
  56.                     $htmlChildren.= $this->drawItem($child, $level+1, ++$j >= $cnt);
  57.                 }
  58.             }
  59.  
  60.             if (!empty($htmlChildren)) {
  61.                 $html.= '<ul class="level' . $level . '">'."n"
  62.                         .$htmlChildren
  63.                         .'</ul>';
  64.             }
  65.  
  66.         }
  67.         $html.= '</li>'."n";
  68.         return $html;
  69.     }

No you’ll see e.g. something like

  1. <li class="level0" id="nav-0-5">

in the rendered source of your page menu, e.g. for category 5 like above. The id is based on the following sheme: nav(prefix)-x(Level)-xxxx(Unique Category ID) and inserted to every <li> point.

To hide the navigation entry (for human eyes only) simply create new entries in menu.css like this

  1. /* css hide from horizontal navigation */
  2. #nav-0-5    {display:none;}  /*examples hides category 5 @ level 0 */
  3. #nav-1-6    {display:none;}  /*examples hides category 6 @ level 1*/

Remember: Every ID is unique

Regards Jan Fervers




 

Explore the Wiki

Magento Developer Certification

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs