For a web application I was recently making for work, I was matching my layout with the layout the rest of the site used. But of course me being me, I converted the original table layout into a CSS layout. In doing so, I encountered a Javascript jump menu (created with a select form element) and little bells went off in my head: it’s a navigation element which is basically a list of links. Ah ha! I had to convert it into a list of links and use CSS magic to reconstruct the nature of the jump menu.
The jump menu is very much like a drop-down menu but not quite. Yes when you hover over it a menu drops down of links but the Javascript jump menu is usably with the keyboard (meaning in Firefox and IE I can cycle through the links with a tab key). The problem is that you can only tab through non-hidden links. So I worked a new way to hide the links without hiding (display: none or visibility: hidden) the links. In hiding the links, the label for the jump menu play an important role in masking the links. The links, in the default state, hide underneath the label. When you hover over the label, the links show like they should. Also when you tab, the links will be given focus one at a time which is when the particular link shows.
Oh right, IE 6 does not support :hover well and :focus at all. IE7 comes to the rescue.
Finally, the example.
Sorry for posting here, I was wondering if you llama dropdown css menu has ever or can be made to work in IE6.
I’ve checked out several CSS menus and your one is surely the most usable. I love that links are available with tabbing and your approach is simply fantastic. The fact it supports also IE is a big plus.
Thank you for sharing this
Leave a Reply
All comments are moderated for approval after submission. Attention spammers do not waste your or my time by trying to comment.