Add a new jQuery Top menu !!

The default drop down Navigation (known as topMenu) in Magento is not accessible because it uses:


onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"

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

First, go download the Superfish Script and jQuery 1.2.6; you may also want to download hoverIntent plugin that can enhance the menu hover behaviour.

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



<action method="addJs"><script>varien/menu.js</script></action>

and remove “iehover fix script” too because we don’t need it anymore:



<action method="addItem"><type>js</type><name>varien/iehover-fix.js</name><params/><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

superfish-navbar.css

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)"'; 

//to

$html.= ''; 

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  <del datetime="2009-12-18T20:04:22+00:00">current</del>';

Step 3: Edit template/catalog/navigation/top.phtml
Change

<ul id="nav">

//to

<ul class="sf-menu sf-navbar">

and add the following script in the file.

jQuery(function(){
jQuery(‘ul.sf-menu’).superfish({
pathClass: ‘current’
});
});

[/source

Step 4: Edit the superfish.css

It’s almost done! All you need is edit the two superfish style sheets to match your layout.

Power By”lsd”.

Advertisements

Tagged: , ,

%d bloggers like this: