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 Scott on Thu, June 24, 2010 17:51
Source|Old Revisions  

Note: A much simpler solution has been described here: Hide Categories from the Navigation with Pure CSS.

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

The following was contributed by tilzinger

If you don’t want to change core files do this instead

To enable this feature without changing core code put the following PHP into app/code/local/STORENAME/Catalog/Block/Navigation.php

Remember to replace all instances of STORENAME with your store name. e.g. AcmeCompany

  1. <?php
  2. /**
  3. * Magento
  4. *
  5. * NOTICE OF LICENSE
  6. *
  7. * This source file is subject to the Open Software License (OSL 3.0)
  8. * that is bundled with this package in the file LICENSE.txt.
  9. * It is also available through the world-wide-web at this URL:
  10. * http://opensource.org/licenses/osl-3.0.php
  11. * If you did not receive a copy of the license and are unable to
  12. * obtain it through the world-wide-web, please send an email
  13. * to license@magentocommerce.com so we can send you a copy immediately.
  14. *
  15. * @category   Mage
  16. * @package    Mage_Catalog
  17. * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
  18. * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
  19. */
  20.  
  21.  
  22. /**
  23. * Catalog navigation
  24. *
  25. * @category   Mage
  26. * @package    Mage_Catalog
  27. * @author      Magento Core Team <core@magentocommerce.com>
  28. */
  29. class STORENAME_Catalog_Block_Navigation extends Mage_Catalog_Block_Navigation
  30. {
  31.      public function drawItem($category, $level=0, $last=false)
  32.     {
  33.         $html = '';
  34.         if (!$category->getIsActive()) {
  35.             return $html;
  36.         }
  37.  
  38.         $children = $category->getChildren();
  39.         $hasChildren = $children && $children->count();
  40.         $html.= '<li';
  41.         /*
  42.          Don't need stupid JS. Take care of it with CSS
  43.         if ($hasChildren) {
  44.              $html.= 'onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"';
  45.         }
  46.         */
  47.         //modified for css hide from jan212
  48.         $cid = $category->getID();
  49.         //
  50.         $html.= ' class="level'.$level;
  51.         //
  52.        if ($this->isCategoryActive($category)) {
  53.             $html.= ' active ';
  54.         }
  55.  
  56.         if ($last) {
  57.             $html .= ' last';
  58.         }
  59.  
  60.         if ($hasChildren) {
  61.             $cnt = 0;
  62.  
  63.             foreach ($children as $child) {
  64.                 if ($child->getIsActive()) {
  65.                     $cnt++;
  66.                 }
  67.             }
  68.             $html .= ' parent';
  69.         }
  70.         //modified for css hide from jan212
  71.         $html.= '" id="nav-'.$level.'-'.$cid.'">'."n";
  72.         //
  73.         $html.= '<a href="'.$this->getCategoryUrl($category).'"><span>'.$this->htmlEscape($category->getName()).'</span></a>'."n";
  74.         //$html.= '<span>'.$level.'</span>';
  75.  
  76.         if ($hasChildren){
  77.             $j = 0;
  78.             $htmlChildren = '';
  79.             foreach ($children as $child) {
  80.                 if ($child->getIsActive()) {
  81.                     $htmlChildren.= $this->drawItem($child, $level+1, ++$j >= $cnt);
  82.                 }
  83.             }
  84.  
  85.             if (!empty($htmlChildren)) {
  86.                 $html.= '<ul class="level' . $level . '">'."n"
  87.                         .$htmlChildren
  88.                         .'</ul>';
  89.             }
  90.         }
  91.  
  92.         $html.= '</li>'."n";
  93.         return $html;
  94.     }

Then add this to your app/etc/local.xml file

  1. <global>
  2. ... some other code previous to this...
  3. <blocks>
  4.            <catalog>
  5.                <rewrite>
  6.                    <navigation>STORENAME_Catalog_Block_Navigation</navigation>
  7.                </rewrite>
  8.             </catalog>
  9.        </blocks>
  10.      </global>



 

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