Feb 05
Extended 2 leveled horizontal navigation in css
2004 at 02.16 am posted by Veerle Pieters
Since the success of the post about my 2 leveled navigation a few days ago, I decided to post the final version of this. I needed to create this for a project I’m working on and the version I use now is more extended. My previous version used a fixed width which was the same for each button. This makes it unusable if the title of your buttons vary a lot in length.
In this new one, each button of the menu and the submenu have their own length defined in the stylesheet. The length, top and left position of the submenus are also defined in separate styles. This way it's possible to tailor all this to your needs.
I've used comment tags in my styleheet to make it easy to follow and understand. This should give you a nice overview of all the styles used. Hopefully some of you will find this helpful in the creation of your navigation with css.
11served
1
Thanks for taking the time to post this. Looking through the code helps me understand, and as a fledgeling CSS user, this is great.
Two things I’ve noticed while checking the navigation in different browsers, however. First, in Mozilla (v 1.6), the submenu gets “stuck”, as demonstrated in the following screen capture:
Using Mozilla on a Mac
Also, on IE (v 6.0) there’s a problem when you shorten the width of the browser:
MSIE on WinME
Great work on the CSS navigation. I’m really hoping to use your example to be able to finish the navigation for a site I’ve been working on for way to long now :)
Thanks again!
-Shad
2
As a side note, I went ahead and registered.
I have a feeling I’ll be visiting often! :)
-Shad
3
Hi Shad, I might have a clue why the submenus get stuck. I think it’s because of the JavaScript, I might have to add an extra “hide” part in the code. I’ll try and let you know ...
For the 2nd issue, I’m not sure… I used 750px width for the layout of my project so normally no one will even see this if you use 800x600 or higher. Not sure how to make it a scrollbar instead. I might have to experiment to find that out ;-)
4
It’s a very nice menu,
with just 1 flaw;
it doesn’t work well with enlarged fonts.
You might want to set the height (& width) of the bars in ems, and it’d probably be fixed.
5
AkaXaka (nice name btw): thanks for the tip. You may be right, it might create more flexibility this way.
6
Great menu. Just a question, if I want to lower the menu, (I want to put a header above) do I have toc change that in csslink or some other place?
7
@jvuz, no you can just place your header above the the navigation in the HTML code (above the “navigation” id div). But you will have to adjust the background image (the 2 yellow lines). It will have to appear lower too, so you’ll have to edit this in Photoshop to make sure it will fit again. Hope this helps.
8
Thanx, just wondering, if i try this example in Firefox, it works great, but in IE, I don’t get a hover on the last menu item. Do you have the same problem?
9
@jvuz, yes I have. I didn’t notice this before but the last button in the row didn’t have any link, that’s why there wasn’t any rollover effect. I’ve added and empty href and now it works again.
10
Thanx, now it works with me too.
11
Sorry, I have anotehr question, is it possible to center the menu bar. I’ve tried some things, but I don’t get the result I want. Sorry to bother you again.