There have been two great menu and navigation techniques I have used over the last few years:
I have used both of these techniques on several web sites, but crazily not together…until a week ago when a client decided they wanted to move away from their antiquated menus that relied on hundreds of lines of javascript, HTML tables, and over 40 image files (for seven tabs). This technique works in IE 6, IE 7, Firefox, and Safari.
After I had put the code into place I thought it might be helpful for others to see exactly how it is done. These techniques give you a lot of flexibility with very lightweight code.
Code/Files Needed
- Two tab images (left and right, with both an active and hover (highligted) option
- Sub-menu arrow (not required)
- Sons of Suckerfish javascript
- CSS for both the drop downs and the sliding doors techniques
- Menu list code (your menu items)
Two tab images
The sliding door technique is great because you do not need to make tab specific images, nor do you need to worry about the tab length – it is all taken care of by two images and some CSS. For this example, I am going to use two basic tab images that I quickly created for this example:
Sub-menu arrow (not required)
If you want to easily let your visitors know you have a sub-menu within your menus, add in a sub-menu arrow.
Sons of Suckerfish javascript
After years of using nasty javascript – it is refreshing to see that this technique only requires a few lines of javascript (check out the javascript).
CSS for both the drop downs and the sliding doors techniques
The CSS for the drop down menus and the tabbed navigation is pretty slick (check out the CSS).
Menu list code (your menu items)
The menu list code is the actual menus/tabs. The code can be dynamically created by using something like wp_list_pages() in WordPress, or you can create the code yourself. I have created some sample code for this example.
Everything put together
Now that you have an understanding of all the files and code involved, let’s see everything put together This is a very good way to have sustainable code/files for a small or large web site when dealing with navigation.
Questions, comments? Contact me!
Spencer
So, how do you do this in WordPress dynamically? I have been wracking my brain trying to figure this out. You can see what I mean here: http://www.ithemes.com/spencer
Jennifer Zelazny
I have posted a followup on this (how to do this with WordPress): https://www.jappler.com/blog/archive/2008/01/09/jappler-menus-in-wordpress
Natalie Wood
Hi
Thanks for this code.
I notice in the html, that the line:
<li ><a href=”#”>No-hack IE Tricks</a></li>
should not have the closing </li> tag, as it has a submenu.
IE was displaying the submenu anyway but FFox wasn’t.
Cheers
Natalie
Natalie Wood
Hi again
There is a slight inconsistency between IE and other browsers
A bottom border is set in the css:
#nav ul li ul li
border-bottom:1px solid#ccc;
In most browsers this puts a bottom border under each menu item, but in IE it seems to have no effect.
Tested in Windows: IE 5.5, 6, 7 ; Firefox 2.0; Opera 9.24; Safari 3.0.4
Mac: safari 1.3.2, 2.0.4, 3.0.4; firefox 2.0
I prefer without the border so I’ll leave it out, but if you wanted the border, you’d need to sort out why IE isn’t displaying it.
Cheers
Natalie
Natalie Wood
border problem in IE solved!
Just need an extra space in:
border-bottom:1px solid#ccc;
so it is
border-bottom:1px solid #ccc;
Natalie Wood
In the main file the body style declaration contains:
font:.8em/1.6em normal Arial, Helvetica;
Opera 9.25 for Windows won’t recognize this and uses the browser default font.
To make Opera recognise it, it needs to be rewritten in this order:
font:normal .8em/1.6em Arial, Helvetica;
Jennifer Zelazny
Good ol’ Opera! 😉
Nanci Geiser
Exactly what I was looking for. Thanks for putting it all together. In Firefox the doors actually slide with hover, however in IE6 they do not. How do I change that?
Thanks!
Ryan
Hey Jennifer, nice job. However, one problem I see with integrating this into WordPress, or other CMS systems is that when the unordered lists are generated there’s no way to insert the class modifiers (“tab”, “notab”, etc.)…
Any way to do this with a clean format like this:
UL->LI->A->SPAN (TAB)
|
|– UL->LI-A->SPAN (SUCKERFISH DROPDOWN)
Not using any classes or IDs with the exception of #nav ?
Jennifer Zelazny
Hi Nancy – please send me a link to your development site and I will take a look.
Nanci G
Thanks, Jennifer. It actually is that way with your “everything put together” link as well. I just needed to add sfhover to the CSS to slide the doors in IE6:
#nav li.tab:hover, #nav ul li.sfhover {background-position: 0% -30px; color:#333;}
#nav li.tab:hover a, #nav ul li.sfhover a {background-position: 100% -30px;}
Again – thanks for the code!
Nanci G
Actually “slide the doors” is not quite accurate. I should have said ‘to get the doors to show the “hover” effect.’ Sorry.
ema
Using jquery the navigation.js would be even simpler:
$(document).ready(function() {
$(“#nav2 li”).hover(
function () {
$(this).toggleClass( “sfhover” );
},
function () {
$(this).toggleClass( “sfhover” );
}
);
});
Jennifer Zelazny
Good call on the jquery (I am a recent convert to jquery). I will write an updated post on this as I have also simplified the CSS.
Jode
Thank you, thank you, thank you!
Jennifer Zelazny
Glad I could help. Make sure to check back in the next week or so – I am going to put up new simplified code!
Jode
Hi Jennifer – I’ll be watching. 😉 In the meantime, I’m having trouble figuring out a current state in the nav.
Any suggestions would be appreciated.
Jode
oops. http://www.keehrious.com/goodneighbor/index.html
Jonathan S
Thanks for putting this up! You’re very kind.
I’m looking to create a ‘you are here’ state and am having trouble.
I added an id=”home” to the body tag, an id=”homeLink” to the ‘a’ tag ()
I then created a selector: body#home a#homeLink { style to move position of revamped tab gif here }
The style does not work though, I’m guessing my selector is bad but I’m too daft to figure it out 😉 any help?
Thanks!
Jonathan S
Never mind, I figured it out. Just have to make the selector uber-uber specific. Should have the new site up in the next millennium 😉
jody
First of all, I’d like to thank you very much.
I’m just wondering about the positioning of the menu bar. Without changing any of your code, the bar seems to be indented from the left (maybe it’s my own problem), yet I can’t find the property anywhere…
And what is the best way to position the menu around? Should I change the margins? If I want to center it, does setting a width and margins to auto work?
Richard
I’ve checked the css code and I can’t find an entry for where you switch to the alternatively coloured tabs on hover.
Jessamyn
Wanted to know how to control the width of the dropdown menu?
noah
Great article,
Is this technique compatible with HTML5?
Jen
Hello. This does work with HTML5.