While in the process of redesigning 4wheelparts.com, I decided to explore new methods of working with our huge number of inventory and categories. I did some research and noticed a new trend for ecommerce sites in having what they call “mega drop down menus”.
According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.I decided to experiment with different ways of implementing this technique and would like to share how I achieved this method.
Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other. – Jakob Nielsen – Alert Box
As I read his article he recommended that these kind of drop down menus should have a subtle time delay when hovering in and out of them. I decided to use the Hover Intent jQuery plugin to help me achieve this effect.
Step 1. Foundation – HTML
Just like all of my navigation tutorials, start by creating an unordered list. Since we will be using CSS Sprites for our navigation states, each link within the list item should have a unique class name to it.
Step 2. Styling Foundation – CSS
Since our drop down menu will be using absolute positioning, be sure to add a relative positioning to the list item. Shoot the text off of the page by specifying a text-indent of -9999px. We will then replace each navigation link with an image by specifying an image path to each link class name.
ul#topnav { margin: 0; padding: 0; float:left; width: 100%; list-style: none; font-size: 1.1em; } ul#topnav li { float: left; margin: 0; padding: 0; position: relative; /*--Important--*/ } ul#topnav li a { float: left; text-indent: -9999px; /*--Push text off of page--*/ height: 44px; } ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; } /*--Hover State--*/ ul#topnav a.home { background: url(nav_home.png) no-repeat; width: 78px; } ul#topnav a.products { background: url(nav_products.png) no-repeat; width: 117px; } ul#topnav a.sale { background: url(nav_sale.png) no-repeat; width: 124px; } ul#topnav a.community { background: url(nav_community.png) no-repeat; width: 124px; } ul#topnav a.store { background: url(nav_store.png) no-repeat; width: 141px; }Step 3. Creating the Mega Sub Navigation – HTML
Add a class of “sub” right after your main navigation link and nest unordered lists within. Each nested unordered list will act as the nav columns of your mega drop down.
Step 4. Styling Mega Sub Navigation – CSS
To get the sub nav to stick to the bottom left corner of the parent hovered nav, be sure to set an absolute position to the .sub container with the coordinate of top 44px and left 0px. For style, I added rounded corners to those browsers that support it (Firefox/Chrome/Safari).
Keep in mind when having multiple levels of nested lists, you need to override its conflicting properties. Check out the comments below.
ul#topnav li .sub { position: absolute; /*--Important--*/ top: 44px; left: 0; z-index: 99999; background: #344c00 url(sub_bg.png) repeat-x; /*--Background gradient--*/ padding: 20px 20px 20px; float: left; /*--Bottom right rounded corner--*/ -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; /*--Bottom left rounded corner--*/ -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; display: none; /*--Hidden for those with js turned off--*/ } ul#topnav li .row { /*--If needed to break out into rows--*/ clear: both; float: left; width: 100%; margin-bottom: 10px; } ul#topnav li .sub ul{ list-style: none; margin: 0; padding: 0; width: 150px; float: left; } ul#topnav .sub ul li { width: 100%; /*--Override parent list item--*/ color: #fff; } ul#topnav .sub ul li h2 { /*--Sub nav heading style--*/ padding: 0; margin: 0; font-size: 1.3em; font-weight: normal; } ul#topnav .sub ul li h2 a { /*--Sub nav heading link style--*/ padding: 5px 0; background-image: none; color: #e8e000; } ul#topnav .sub ul li a { float: none; text-indent: 0; /*--Override text-indent from parent list item--*/ height: auto; /*--Override height from parent list item--*/ background: url(navlist_arrow.png) no-repeat 5px 12px; padding: 7px 5px 7px 15px; display: block; text-decoration: none; color: #fff; } ul#topnav .sub ul li a:hover { color: #ddd; background-position: 5px 12px ;/*--Override background position--*/ }Step 5. Setting up jQuery & Hover Intent
For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.
Initial Step – Call the jQuery file
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.
After calling the jQuery file, visit and download the latest Hover Intent jQuery Plugin. Save the file to your current directory, and call the file.
Step 6. Launching Code on Document Ready
Directly after the line where you called your jQuery and hover intent file, start a new
No comments:
Post a Comment