Dropdown Menus of Simplicity
One of those things that I’m often asked for by clients is “Can we have a drop down menu across the top?” To which I answer “Sure!”. And then once I start trying to work their look and feel into some jquery, javascript and CSS menuing plug-in I suddenly recall that I hate mutating someone else’s mess of html, css and javascript into something that still works across all the browsers and looks like what the client wants. YUCK!
So not to long ago I set out to find the simplest example of a cross browser dropdown menu that I could find. I found many examples but none were exactly right for my needs. So I started playing around with some of the ideas and here’s what I came up with.
First things first. There are four major browsers on the market: IE, Firefox, Safari and Google Chrome. The last three browsers will just work but for that first one much gnashing of teeth and swearing can be directed its way. So to get everyone to play nicely we start with a strict doctype like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Strict XHTML will work as well. Now lets look at some HTML for the menu:
<div class="menu">
<span>
<a href="#">Lorem</a></span>
<span>
<a href="#">Ipsum</a><div>
<a href="#">Dolor sit amet</a> <a href="#">Consectetur adipisicing</a> <a href="#">Eiusmod tempor</a></div>
</span>
<span>
<a href="#">Officia</a><div>
<a href="#">Nemo enim ipsam</a> <a href="#">Dolore magnam</a> <a href="#">Suscipit laboriosam</a></div>
</span>
</div>
An important note: DO NOT PUT LINE RETURNS AND INDENTS INSIDE THE ANCHOR TAGS! Once again our favorite browser IE will not function correctly if you do this. So keep your anchor tags all on one line.
Now here is the fun part for all of the latest browsers we only need some simple CSS to make the menu work. Lets take a look:
.menu span { float:left;margin-right:10px;
position: relative;
z-index: 100;
}
.menu a {text-decoration: none;
display: block;
}
.menu span:hover div, .menu span div:hover {display: block;
}
.menu span div {border: 1px solid black;
padding: 5px;
background-color: white;
display: none;
position: absolute;
white-space: nowrap;
}
Once you get a sample page put together with this play around with the margins, padding, borders and colors to get a feel for their effects on this basic look and feel. The floats, display and position attributes are the important ones that make this menu work.
Inevitably someone will say to you “Hey this doesn’t work in my browser!”. And your response should be “Upgrade to a more recent version of IE before you are infected with anymore viruses and trojans you luddite!” But if that fails because of corporate policy or other brain dead arguments and you are forced to deal with the reality that some people still drive Ford Pintos there is a solution. JQuery to the rescue!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function(){ if($.browser.msie && $.browser.version <= 6.0) { $(".menu span").hover( function() {$(this).children("div").attr("style", "display: block");
},
function() {$(this).children("div").attr("style", "");
}
)
}
});
</script>
Basically we are checking if the browser is IE 6 and if so we add the display:block to the child divs of the any span tags. Exactly like the same thing the CSS does. But since IE 6 doesn’t allow :hover on anything but anchor tags (and even that seems flaky to me), we do it this way.
I’ll leave you with the completed page all together for your copying and pasting pleasure!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function(){ if($.browser.msie && $.browser.version <= 6.0) { $(".menu span").hover( function() {$(this).children("div").attr("style", "display: block");
},
function() {$(this).children("div").attr("style", "");
}
)
}
});
</script>
<style>
.menu span { float:left;margin-right:10px;
position: relative;
z-index: 100;
}
.menu a {text-decoration: none;
display: block;
}
.menu span:hover div, .menu span div:hover {display: block;
}
.menu span div {border: 1px solid black;
padding: 5px;
background-color: white;
display: none;
position: absolute;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="menu">
<span>
<a href="#">Lorem</a></span>
<span>
<a href="#">Ipsum</a><div>
<a href="#">Dolor sit amet</a> <a href="#">Consectetur adipisicing</a> <a href="#">Eiusmod tempor</a></div>
</span>
<span>
<a href="#">Officia</a><div>
<a href="#">Nemo enim ipsam</a> <a href="#">Dolore magnam</a> <a href="#">Suscipit laboriosam</a></div>
</span>
</div>
</body>
</html>
Suggestions, comments and questions are always welcome.
