|
I can remember when suckerfish had posted the CSS dropdown nav. I can remember using javascript and tables to make my first dropdown nav. I thought if we could only get CSS working in all broswers this would be perfect. I eventually started using an variation with a javascript workaround for IE6.
I recently decided to go back and rewrite my dropdown nav so you would have some of the features that I’ve learned and a few things that just make overall usability better. The idea behind this new version was to make a navigation that could be swapped out if the user had javascript enabled. If they didn’t they would get a full CSS dropdown menu that would work on all browsers except IE6. This would mean that the top level list items would need to be anchor tags so the navigation could degrade gracefully back to and IE6 ( god forbid your still using it ) browser. The basic structure of the navigation is an unordered list that looks like this. <div id=”cssNav”>
<ul id=”navUL”><li><a href=”#” id=”one-ddheader” onmouseover=”ddMenu(‘one’,1)” onmouseout=”ddMenu(‘one’,-1)”>top level link</a> <ul id=”one-ddcontent” onmouseover=”cancelHide(‘one’)” onmouseout=”ddMenu(‘one’,-1)”> <li><a href=”1″>sub level link</a></li> <li><a href=”2″>sub level link</a></li> <li><a href=”3″>sub level link</a></li> </ul> </li> </ul> We start out with a master div called cssNav. This gets changes if javscript is enabled. We then have the master UL that acts as our container for all items including the hidden drop down items. We then have our fist LI which holds not only the top level navigation item but also the dropdown UL and LI items. You will notice the the top level LI’s anchor tag not only has an ID but also the javascript mouse over and out events. The ID’s for these items are very important because this is how our javascript functions do their magic. Other then that the sublevel links can be a simple cut and paste to add more. Feel free to: No Comments »No comments yet. RSS feed for comments on this post. TrackBack URL Leave a comment |
|
