jQuery Superfish for Magento Cateogry Menu
Make an accessible Category Menu for Magento using jQuery Superfish Script
This article first published in my other site, Lotus From The Mud.
The default dropdown Navigation (known as topMenu) in Magento is not accessible because it uses:
That means if you add a
a:focus to your style sheet, the tab navigation will only work for the top level menu and when JS is turned off, the dropdown stops working.
The script controls the above code is in the js/varien/menu.js
With a few modifications, and adapting the jQuery Superfish script, we can improve Magento Category Menu to a fully accessible, keyboard tab-able dropdown menu; what’s more beautiful is that the dropdown will continue working when JS is turned off.
Step 1: Download Superfish Script
Well! After downloading the files, you know how the routine works right? Yes, go place the scripts to js/jquery/ folder and CSS files to skin/frontend/default/yourtheme/css, then add the links to the page.xml and remove the
and remove “iehover fix script” too because we don’t need it anymore:
<if>lt IE 7</if></action>
I have briefly explained how to implement the jQuery noConflict in other jQuery’s articles, so that jQuery code can co-exist with Prototype Script that comes with Magento. Also, this article in the Magento Wiki posted by a Magento community member, laurent, is a bulletproof method using jQuery in Magento.
In this example, I will focus on the ‘Navbar style’ that shows a nice horizontal navigation bar for the second level of the Category Menu. If you’re going to do the same, remember to download the
Step 2: Modify the Navigation.php
The file is located at code/core/Mage/Catalog/Block/Navigation.php. For Magento upgrade compatibility’s sake, I prefer to make a custom file for Navigation.php, but I have yet figured how to correctly do it yet; so here we go, just go ahead making a few changes in the Navigation file instead.
In line 153, replace this line of code:
$html.= ' onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"';
My test shows that Superfish script works well without removing the above code, however it disables the navbar completely. Though I have not tested it on the Superfish’s Basic and Vertical Style yet, but I believe it affects only Navbar because the third level dropdown menu works with the above code intact, therefor I think you can safely skip the Step 2 if you use Basic or Vertical Style.
Scroll down to line 172, add a ‘current’ class next to the “parent”:
Further testing shows that ‘current’ class is not necessary in below code as it creates a ‘current’ state for the menu when we are at CMS page. Instead, we can utilize the ‘active’ class and change ‘current’ to ‘active’ in the pathClass at Step 3.
$html .= ' parent
Step 3: Edit template/catalog/navigation/top.phtml
<ul id="nav"> to
<ul class="sf-menu sf-navbar"> and add the following script in the file.
Step 4: Edit the superfish.css
It’s almost done! All you need is edit the two superfish style sheets to match your layout.
Edit on 11/30/08: Remember we are calling ‘active’ in the “pathClass” now, so we need to change all ‘current’ to ‘active’ in the style sheets
Because it’s your store and your layout hence I am unable to tell you what to edit in the CSS files to match your Magento store’s layout, so let me just show off my Superfish Menu instead :)
The menu also works nicely (full credit goes to the Superfish’s author Joel Birch) in IE 6, this is the most important thing implementing Sueprfish script because we cannot make a menu that can’t work for this annoying browser.