Darren Krape » JavaScript

CSS drop-down menus: keeping the top level selected when hovering over a sub-menu, now in jQuery

Darren — Sun, 06 Sep 2009 15:17:38 +0000

Awhile back I wrote a JavaScript tutorial on how to keep the top level menu item selected when hovering over a drop down menu. Since then I’ve become a strong user and proponent of the JavaScript library jQuery. Not only is it easy to use, it also can help simplify your code-base very significantly. I’ve explained the updated code below. As you can see, it is much simpler.

How this works

There are two main components of the JavaScript, first the code for all browsers to keep the top level selected and a second code block to add the hover state for IE6 (since it only supports :hover pseudo-classes on anchors, not list elements as we use here).

First, you’ll need to add the jQuery equivalent of “onLoad”: $(function() {. Fortunately, the multiple onLoad and caching issues we addressed in the earlier tutorial are now handled in jQuery, so no need to use the “onEvent” function from the earlier tutorial. You’ll also sometimes see this as $(document).ready(function() {. The functionality is the same, so feel free to use either syntax.

Code for persistent top-level menu formatting

Next, the general code for maintaining the hover formatting on the top level. Basically, this function iterates through each of the drop-down

hover

$("#menu ul").each(function(i){
  $(this).hover(function(){
    $(this).parent().find("a").slice(0,1).addClass("active");
  },function(){
    $(this).parent().find("a").slice(0,1).removeClass("active");
  });
});

Internet Explorer 6 functionality

To make this work in IE6, we need to add some additional code. First, we use jQuery’s built in browser sniffer to only target MSIE versions below 7. It then works fundimentally like the code above and the Suckerfish drop downs from the earlier tutorial. JavaScript cycles through each drop-down

if($.browser.msie && ($.browser.version < 7)) {
  $("#menu").each(function(i){
    $(this).find("li").hover(function(){
      $(this).addClass("sfhover");
    },function(){
      $(this).removeClass("sfhover");
    });
  });
}

In closing

Be sure to add the closing parenthesize and bracket for the jQuery on ready state: });.

Complete Code






  
  Menu Example

  

  

  





  
    Styles

    
      Red/White
      Ros?©/Blush
      Sparkling
      Dessert
      Fortified
      Fruit
      Ice Wine
    

    
    Whites

    
      Albari?±o
      Chardonnay
      Chenin blanc
      Muscat
      Pinot blanc
      Pinot gris
      Riesling
      Sauvignon blanc 
      S?©millon
    

    
    Reds

    
      Cabernet Sauvignon 
      Malbec 
      Merlot 
      Pinot noir 
      Syrah/Shiraz 
      Zinfandel
    

    
    Noted Regionals

    
      Amarone
      Beaujolais
      Burgundy 
      Chianti 
      Madeira 
      Port 
      Sancerre 
      Tokaji 
      Vinho Verde 
    

    
    Key Countries

    
      France
      Italy
      Spain
      United States
      Argentina
      Australia
      South Africa

CSS drop-down menus: how to keep the top level selected when hovering over a sub-menu

Darren — Thu, 12 Apr 2007 16:31:32 +0000

Pure CSS-based drop-down menus are a great thing, if for no other reason than their sheer simplicity and flexibility. However, they have two main drawbacks.

They don’t work in Internet Explorer 6 due to the browser’s poor support for the :hover pseudo-class.
When the mouse cursor is over a drop-down, the top level navigation item does not stay highlighted under most conditions.

Fortunately, both problems can be solved with some simple JavaScript. The first problem is easily corrected with the excellent Son of SuckerFish drop-down code. The second problem can be solved using the equally small amount of code described below.

The best part of this code its use of DOM hooks in your XHTML document to add the functionality making it self-contained and allowing full separation of content and design.

For the sake of simplicity, and reducing the number of called functions, I’ve combined the SuckerFish JavaScript with my own.

How this works

The code is pretty simple, but for novice JavaScriptors (such as myself), here is a set-by-step guide on how the function works.

Internet Explorer 6 Functionality: The SuckerFish Code

First, we declare the function and add the SuckerFish code for Internet Explorer 6 compatibility. Since this functionality is already described in their article, I’ll just note two small changes I’ve made.

The original SuckerFish code had the ID hard-coded into the function. The below version has a variable instead of the hard-coded ID, allowing us to use the function on several different drop-downs.
I’ve corrected an error in the regular expression which was causing the class name to remain on the list element when the user moves their cursor off the drop-down (this error and the fix used here was originally pointed out by Tim Gaunt).

menuHover = function(nav) {
  var sfEls = document.getElementById(nav).getElementsByTagName("li");
  for (var i=0; i


Code for persistent top-level menu formatting
Now we get into the code that maintains the hover state for top-level navigation elements when the user has moved the cursor over a drop-down list. Fundamentally, this works the same way as the SuckerFish function, but with some adjustments. The system cycles through each drop-down 
 and adds a function that tells the its parent anchor tag to take on a particular class when the browser detects a mouseover on the menu.
First, we create a variable selecting each sub-navigation list by using the main 
 ID. This will allow us to add a mouseover function to each of the drop-downs.
var listItem = document.getElementById(nav).getElementsByTagName('ul');
Next, we cycle through each of the 
 drop-downs so we can add a function on each one.
for(var i=0;i

If the browser detects the mouse cursor over the current drop-down it will pull into an array all anchors found in the parentNode (which is, basically, whatever the parent element is in the DOM, in this case the parent node is a 
). It then assigns the first anchor, presumably the anchor in the top-level navigation, a new class name. In this case, the class name “anchor”.
listItem[i].onmouseover=function() {
  var changeStyle = this.parentNode.getElementsByTagName('a');
  changeStyle[0].className+=" active";
}

Now, when the user moves the cursor away, we simply remove the class name and the anchor is restored to its original style.
listItem[i].onmouseout=function() {
  var changeStyle = this.parentNode.getElementsByTagName('a');
  changeStyle[0].className=this.className.replace(new RegExp("\\s?active\\b"), "");
}

Playing well with others: onLoad Function
Now we need to call our function on page load so the menus will work from the start. To do this we’ll use John Resig’s addEvent on load function. This is useful for two reasons:

Using this function will allow us to add as many on load events as we like (or what the browser will handle) without worrying that the various functions will interfere with each other.
John’s function helps avoid the Internet Explorer caching problem that can cause performance problems for end users.

Here is the code:
function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
  }
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
  obj.detachEvent( 'on'+type, obj[type+fn] );
  obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
  }

addEvent(window, 'load', function () { menuHover('menu'); });

Take a look at John Resig’s post “Flexible Javascript Events” on this function to get a better idea how it works.
The CSS and XHTML
Last but not least, we need our CSS and XHTML on which we’ll apply our JavaScript. The following is almost exactly like the SuckerFish code so I will note the one, very small, different.
In order to apply the highlighted state to the top-level navigation anchor, we need to give it a class name. Fortunately, since we already have a style declaration for the hover state, we’ll just append another declaration name to the original style, as you can see below.
#menu li.dropdown a:hover, #menu li.dropdown a.active {
  color: white;
  background: #999 url(../i/arrow_down.gif) no-repeat right 50%;
}

Areas for improvement

This will only work if your top-level navigation style is on an anchor tag. If your main style is on the 
 then the JavaScript won’t select it in order to add the custom class. A future improvement might include passing a variable with the tag or class the function should reference.
The class name JavaScript references is hard coded into the function. Fortunately the script will pull the class relative to the element in the DOM, so you can have two classes with the same name with different styles so long as they are declared on different elements higher in the cascade.To illustrate, if using the following code:

  
    Link
  

This function will apply the style #menu ul li .active and not the style #content ul li .active.
Nonetheless, passing a variable with the highlighted class name to the function would help make this function truly flexible.

Complete Code





  
  Menu Example

  

  





  
    Styles

    
      Red/White
      Ros?©/Blush
      Sparkling
      Dessert
      Fortified
      Fruit
      Ice Wine
    

    
    Whites

    
      Albari?±o
      Chardonnay
      Chenin blanc
      Muscat
      Pinot blanc
      Pinot gris
      Riesling
      Sauvignon blanc 
      S?©millon
    

    
    Reds

    
      Cabernet Sauvignon 
      Malbec 
      Merlot 
      Pinot noir 
      Syrah/Shiraz 
      Zinfandel
    

    
    Noted Regionals

    
      Amarone
      Beaujolais
      Burgundy 
      Chianti 
      Madeira 
      Port 
      Sancerre 
      Tokaji 
      Vinho Verde 
    

    
    Key Countries

    
      France
      Italy
      Spain
      United States
      Argentina
      Australia
      South Africa
    

    
  





Update: 6 September 2009
I recently got an email from a reader noting how IE6 caused a flicker when mousing over the top level navigation and inquiring if there was a way to fix this. Fortunately, the fix is quite easy. Simply add “position: relative” to the CSS declaration “#menu li a“.
Basically, what is happening is IE6 hovers don’t work very well when hovering over padding on an element. So the hover state disappears when moving from the actual text to the padding area and then to the menu below. The “position: relative” trick is useful for solving this in many other situations.
I’ve updated the code above to reflect this change.



Add icons to PDF, XLS, DOC file links, links to new windows and more…
Darren — Mon, 09 Apr 2007 00:08:12 +0000
Whenever linking on the web, it is important to let the user know exactly where the link leads, especially if opening a new window or the linked item requires a plug-in or external software. For example, if linking to a PDF a small icon can provide a good hint of where the link leads. Unfortunately, manually adding icons to every link through a site can be quite laborious. This is where JavaScript comes in. With few lines of simple code we can automatically add icons to every link on a page.

View this code in action
Download this code (ZIP)
View complete code


How this works
For those familiar with JavaScript, the above code is pretty straightforward. But for novice JavaScript authors – such as myself – here is how the function breaks down.
Collect our links and cycle through them
We first collect all the links in a document and places them into array. We then cycle through each one using the following for loop:
var links = document.getElementsByTagName("a");
for (i=0; i<links.length; i++) {

We then create a variable for the current link in the array:
var linkIcons = links[i];
Check for linked images
Since we don’t want to be adding these icons to the ends of images, we’ll add a line to collect the name of any images in the link the loop is currently on.
var images = currentLink.getElementsByTagName("img");
If an image is found, the variable will be defined and the length will be greater than 0, meaning we can filter out any links on images. We also can use indexOf to find out if a file extension is present in the href. Basically, indexOf returns the position of a specific character or set of characters in a string. If nothing is found, then JavaScript returns “-1″. This is useful since we can query the href of our link for a certain character set, in this case file extensions, and if JavaScript does not return “-1″ then a match was found and we can go ahead and append the image.
if (images.length == 0 && currentLink.href.indexOf('.pdf') != -1) {
Adding the file icon
When JavaScript has a match we need to tell it to create a new element – in this case a new image – which we can then append to our link. So, first we create the image, set the source and then add it to the end of the link we are currently parsing.
var newImg=document.createElement('img');
newImg.setAttribute('src','/img/icons/pdf_js.png');
currentLink.appendChild(newImg);

Adding icons for links that open in new windows is also quite simple, requiring the modification of only one line of code. Instead of using indexOf to check if a particular file extension is used, we use the DOM to check the target. If the target equals “_blank“, indicating a new window will open when clicked, then we also append an image.
if (images.length == 0 && currentLink.target == "_blank") {
Play well with others: Multiple OnLoad Events
To ensure that our function plays well with other scripts that may also be use onload events, we add Simon Wilson’s addLoadEvent function to reduce the chance of conflict.
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }

addLoadEvent(linkIcons);}
Areas for Improvement

Since this version of the script adds images to the HTML rather than simply giving the link a new class, it would be slightly more difficult to add additional style declarations than in the earlier example. In this case, since there is no CSS being used, the images all have built-in padding to ensure they aren’t flush with text on the left and right. Adding this padding using a style would probably be more flexible than my current method but would require a little extra code.
Although adding icons can be very useful for users, I generally go one step further and add additional descriptive text noting the file type and size, for example: Link (954 kb PDF), so they can estimate the download time and ensures there is useable message for users who have JavaScript disabled.
This JavaScript will add icons to every link on your page, possibly in places you’d prefer stay icon-free. The solution would be to have the script ignore areas with specific id or class tags, such as: class="no-icons".

Complete Code
linkIcons = function() {
  var links = document.getElementsByTagName("a");
  for (i=0; i < links.length; i++) {
    var currentLink = links[i];
    var images = currentLink.getElementsByTagName("img");
    if (images.length == 0 && currentLink.href.indexOf('.pdf') != -1) {
      var newImg=document.createElement('img');
      newImg.setAttribute('src','pdf.png');
      currentLink.appendChild(newImg);
    }
    if (images.length == 0 && currentLink.href.indexOf('.doc') != -1) {
      var newImg=document.createElement('img');
      newImg.setAttribute('src','doc.png');
      currentLink.appendChild(newImg);
    }
    if (images.length == 0 && currentLink.target == "_blank") {
      var newImg=document.createElement('img');
      newImg.setAttribute('src','new_window.png');
      currentLink.appendChild(newImg);
    }
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(linkIcons);
About this script
As with all things worth doing, this has been done before. gqGoat’s article, “Automatically Add Icons After Links to PDF Files with the JavaScript & the DOM”, lays the foundation for this script, while I’ve added a few key improvements:

Most importantly, in gqGoat’s method, the icon is added via CSS as a background to the link. For modern browsers this works great, but in Internet Explorer 6 the icon will be aligned poorly for multi-line links and, in many cases, will not even show up.
This method properly uses the DOM instead of relying on innerHTML, which is not standard and not terribly future-proof.
This script includes the onload fix as suggested in gqGoat’s original post by adding Simon Wilson’s “addLoadEvent” function.
Lastly, this adds several additional icons, including those for Word documents, PowerPoint files, and links that open in a new window using target='_blank'.