Very nice article. I’ve always been under the impression you can’t build drop downs without Javascript, but this is much better and doesn’t cause any usability problems.
great article, dugged it :p. Was wondering who made the cool grahpic: http://i2.sitepoint.com/graphics/css-theme-week-1.jpg ?
Do I miss something here? These “nifty navigation tricks” are very standard, have been in use for many years and can already be found on countless sites. Or did I not notice some new or clever tricks in the above? Then please enlighten me.
Yes, have to agree with Jurgen - this seems pretty underwhelming for something ‘hand picked by our editor’. Maybe it was hand-picked from a list of articles many years old…?
I just got done going through the old 2004 version of this
I didn’t notice the new version. I’ll skim through it sometime in the next couple of days because I like the way the pages look on here better.
Are there any thoughts on taking that tabbed navigation that’s created in page 3 and adding in the left nav bar that’s on page 1? My work wants something like that where each tab on the navigation is a page with a different nav bar specific to the topic on the tab. I wonder if there might be some problems because the tabbed navigation is made by floating the header and to do the left nav bar and the main content window, I would float all that too (I believe).
I’ll be working on this task tomorrow at work so I’ll post if I can figure this out or not, but I thought I would ask first to see if anyone has suggestions or pitfalls I should avoid. What I will ultimately develop for my work will be a variation of the webpage I was discussing over on this thread where I was discussing a problem I was having with Absolute Positioning. I think I might have the solution kind of down though thanks to Paul O’B’s help [URL=“http://www.sitepoint.com/forums/showthread.php?t=548559”]in this other thread with my personal page.
Someone mentioned a CSS menu with the ability to tab. I’ve been using a menu that I find is quite accessible. It is located for free at udm4.com. I am honestly not sure if this counts as “pure CSS.”
Hi all,
This is an update to the original article, with material from the new edition of Rachel’s book. Enjoy!
I have a sneaking suspicion that usr_wifi has a point. I learnt to mark up my menus as lists as a sort of badge of good coding practice, but I really wonder if this is actually true. A typical navigation menu would never be regarded as a list in natural language and nothing in the specs mandates the use of lists for this purpose. A list is more than just a sequence of connected items.
A typical navigation menu would never be regarded as a list in natural language
Yes it would - it’s a list of menu items and that’s what I’d say in English so it makes sense to say it in html also.
Besides what other semantic element would you use instead?
The list serves two purposes in that is stops bare anchors touching each other (which is bad for accessibility) and it also infers semantic meaning to the list of items in the menu.
As an aside html5 defines the menu element to define a menu list and still uses li to mark the elements inside.
Until then the list is still the most semantic element to use
Actually the menu element in HTML5 is not intended for navigation menus, but rather for toolbars and context menus.
Ah - I see. Thanks for the correction Simon. I jumped to the wrong conclusion when I looked quickly.
Nice review of the basics, and some interesting new stuff, too.