I was asked to mockup and example of a horizontal version of my dropdown menu, and this inspired me to have another look at the code behind it and clean it up.
One of the biggest limitations of the previous version was that your menu was limited to 3 levels deep. The first thing I decided to change was to make the onfocus and onblur events call recursive functions, allowing you to have an infinitely deep menu and still have keyboard accessibility.
anchor.onfocus = function() { tabOn(this.parentNode); }
anchor.onblur = function() { tabOff(this.parentNode); }
…
function tabOn(li) {
if(li.nodeName == 'LI') {
li.className = addClass(li);
tabOn(li.parentNode.parentNode);
}
}
function tabOff(li) {
if(li.nodeName == 'LI') {
li.className = removeClass(li);
tabOff(li.parentNode.parentNode);
}
}
Beyond that the changes were mostly small. I moved the code to add and remove classes into their own functions, and generally cleaned up the code a little.
Also IE6 can’t deal with the > selector so I needed to add a stylesheet for IE6 to make the drop-down play nicely over a number of levels. If you want more of fewer levels you can modify this code to suit:
#nav li.hover ul ul,
#nav li.hover li.hover ul ul,
#nav li.hover li.hover li.hover ul ul,
#nav li.hover li.hover li.hover li.hover ul ul { margin-left: -9999px; }
#nav li.hover ul,
#nav li.hover li.hover ul,
#nav li.hover li.hover li.hover ul,
#nav li.hover li.hover li.hover li.hover ul { margin-left: 0; }
Having a seperate stylesheet for IE6 also allowed me to clean up the CSS a lot, so this version is quite a lot cleaner.
Check out the new and improved version of the code, along with an example of a horizontal dropdown: example.
You can grab the source and use or modify it however you like: JavaScript, CSS, IE6 CSS.
As always comments and questions are appreciated.
Categories: Uncategorized
I recently saw a discussion on CSS-D about multiple background images, and while it doesn’t exactly answer the question I thought I’d share a tip that some of you may find useful. At least until multiple backgrounds with CSS3 is properly supported.
So, what we want to do here is put a background image in each of the four corners of the body. The mark-up we need:
<!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>Example: A background image in each corner</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="outer_container">
<div id="container">
</div>
</div>
</body>
</html>
Unfortunately the extra DIVs are required as a hook for the background images, but we can reduce the number required down to two by using the HTML element and the BODY element as hooks for two of the images.
And the CSS:
* { margin: 0; padding: 0; }
html { background: #fff url(../images/top_left.gif) top left no-repeat; height: 100%; }
body { background: url(../images/top_right.gif) top right no-repeat; height: 100%; }
#outer_container { background: url(../images/bottom_left.gif) bottom left no-repeat; height: 100%; }
#container { background: url(../images/bottom_right.gif) bottom right no-repeat; min-height: 100%; _height: 100%; }
The only thing really to note is that _height: 100%; is a hack for IE6 to mimic the behaviour of min-height: 100%;, and will cause the stylesheet to fail validation. You can put that in an IE only stylesheet if that sort of thing bothers you.
Here is our working example. This technique has been tested to work in Firefox, Opera, Safari for Windows, IE7, and IE6.
Also, just as a note this technique can cause some freaky results when page-zoom is used in IE7, but to a lesser or greater extent this sort of thing will always choke a little in IE7 with page-zoom.
Categories: CSS · HTML · Tutorial · Web Development
Tagged: Background, Background Image, CSS, CSS3, HTML, Tutorial
