Home arrow Style Sheets arrow Page 4 - Fixing Browser Incompatibilities in a CSS Drop-Down Menu
STYLE SHEETS

Fixing Browser Incompatibilities in a CSS Drop-Down Menu


Drop-down menus have long been an important part of numerous web-based user interfaces. Since they have been around so long, we've seen many different approaches to building them, from pure JavaScript-driven menus, Flash-based ones, and simple, well-structured (X)HTML markup. This three-article series shows you how to build a drop-down menu using only clean and tight structural markup, along with a few simple CSS styles and a bit of JavaScript code.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 2
October 22, 2008
TABLE OF CONTENTS:
  1. · Fixing Browser Incompatibilities in a CSS Drop-Down Menu
  2. · Review: the initial source code for the CSS-based drop-down menu
  3. · Fixing browser incompatibilities
  4. · Adding JavaScript to correct browser incompatibilities
  5. · The modified version of the CSS-based drop-down menu

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Fixing Browser Incompatibilities in a CSS Drop-Down Menu - Adding JavaScript to correct browser incompatibilities
(Page 4 of 5 )

As you'll surely recall from the prior section, this drop-down menu required the assistance of a JavaScript function to make it work properly in Internet Explorer, because of IE's lack of support for the "hover" CSS pseudo class.

With that concept in mind, below I defined a brand new function. It is called "initializeDropDownMenu()" and it activates/deactivates the "over" class that I created previously for all of the menu items. It turns the menu in question into a truly cross-browser piece of software.

The mentioned JavaScript function looks like this:


function initializeDropDownMenu(){

// get 'navbar' element

var navbar=document.getElementById('navbar');

if(!navbar){return};

// get all menu items

var menuitems=navbar.getElementsByTagName('li');

if(!menuitems){return};

for(var i=0;i<menuitems.length;i++){

// assign 'over' class attribute to each menu item on 'mouseover'

menuitems[i].onmouseover=function(){

this.className+=' over';

}

// remove 'over' class attribute to each menu item on 'mouseout'

menuitems[i].onmouseout=function(){

this.className=this.className.replace(' over','');

}

}

}

// initialize drop-down menu when web page is loaded

window.onload=function(){

if(document.all&&document.getElementById&&document.getElementsByTagName){

initializeDropDownMenu();

}

}


As you can see, the previous "initializeDropDownMenu()" function is tasked with enabling/disabling the "over" CSS class attached to all of the menu items. In doing this, I'm actually emulating native support for the "hover" CSS pseudo class in <li> elements, which makes the menu work as expected with Internet Explorer. Quite simple, isn't it?

Well, at this point I've introduced all the changes required to get this drop-down menu working with most modern browsers. So the last step that needs to be taken is simply putting all the pieces together, so you can see more clearly how they link with each other.

Thus, to see the complete source code that corresponds to this menu, please jump ahead and read the final section of this tutorial. We're almost done!


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 11 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials