Feb 02
How to make a 2 leveled navigation in css
2004 at 03.22 am posted by Veerle
I’ve found the solution on my 2 leveled navigation. Many thanks to Jack Burman for pointing me in the right direction to fix the problem of the gab. I replaced the "float:left" with "position:absolute" (top: 22px) for #smenu1, #smenu2, #smenu3 and #smenu4 together with a left offset of 0px for each iteration.
I've used 0px for this because I decided it is better to have them all begin at the left of my page just to have all the space on the right. Here is a piece of css code of 1 of the submenus:
#smenu1 {position: absolute;display: none;font-size: 10px;height: 23px;width: 750px;background: #FFEEB3;color: #333;top: 22px;left: 0px;line-height: 10px;border-right: 1px solid #F3B500;border-left: 1px solid #fff;}
The other changes are layout related, like adding separator lines in between 2 menu items (by adding a 1px border-left and 1px border-right) and creating a bit of margin, adjusting height and width etc. I still need to find a solution to give each menu item its own width, since the text used varies a lot in length. It is now defined by 1 style with 1 width (60px). This will be another challenge, but I have good faith in finding this. Last but not least I want to thank everyone for the (very fast) help, I really appreciate this. Hopefully others can learn from my files.
14served
1
To use custom width for each menu item you can try the following:
In the html list add an id item:
<li id="two">Menu item two</li>
In the stylesheet you address that id as follows:
#menu ul li#two a { width: 153px; }
Hope this helps. Love you site by the way and gone do some ‘creative stealing’ ;-)
2
Hey thanks! Actually, this was kind of my first hunch too. I’ll try it out asap (working on this now as I type btw)…
Learning or forming new ideas from my design is no problem, as long as it is not literally stealing or ripping ;-) Show me what you got.
3
Hi! Me again with different user name ;-) Just check out my current site using my profile.
I’m thinking about changing my color scheme a bit and use some more decoration like you do. Some of my code doesn’t render well in IE win so I’m definetly checking your css code as I discoverd your site while surfing on a friends pc. It looked great.
Highly inspired but no stealing or ripping :)
4
Hi, thanks for the member registration. Just went to your website. Nice blog, I like the colors and your header etc. Thanks for sharing ;-)
How about (it’s just a suggestion of course) adding a bit of color in the background of the left navigation, maybe a light color, like light grey or light mauve?
5
Thanks!! Like the mauve! :) Am always very open to suggestions by the way.
6
Nice to see you came up with a solution Veerle, but have you changed things from the previous experiment to get it to work?
7
Steven, the things in bold in the css example in my post are the changes I made to make it work. So I changed the “float: left;” to “position: absolute;” and I added a top and left position. Hope this helps?
8
Great idea, much appreciated!
Has anyone got any ideas though about how to do this vertically? I mean, so the primary elements move down the page when the sub items are out? I’ve tried doing this, but to no avail.
9
Oops.. sorry..
Just realised how to do exactly what I wanted to be able to do:
#smenu1 {
position: relative;
display: none;
font-size: 10px;
height: 23px;
width: 30px;
background: #FFEEB3;
color: #333;
top: 0px;
left: 0px;
line-height: 10px;
}
I’ve changed the top: 22px; to top: 0px; and position: absolute; to position: relative;.
Sorry for shouting, but I realised this a few seconds after pressing submit! Hope this code bit might help one or two people.
10
I’ve been trying to find something similiar to this to work with a site I’m working on. LiveJournal has a neat menu similar to this one.
The problems I’ve been facing are twofold: One, is it possible for a horizontal sub-menu like this to be centered at all times? And two, if I roll the mouse off the menu without selecting anything, the submenu stays visable. Is it possible to make it disappear?
Nice site over all. I found it looking through the Site Introduction part of the pMachine forums. Keep up to good work!
-Shad
11
Hi Shad, in my example online, I use a javascript to show and hide the 2nd level navigation. Maybe you can use this script in your page. So this should help you out with your rol off problem.
I’ll post a more extended version of this 2 leveled navigation (variable widths for the menu items and submenu items) tomorrow, the version I used for a project I’m working on right now. Maybe this one will help you.
12
Shad: I posted a more extended version of my 2 leveled horizontal navigation. Here you can set your own width for each button. The submenus are not automatically centered, I used top and left position to position them where I want.
It would be perfect if there was a way where the length is automatically resized instead of defining them with a fixed width 1 by 1. There are also minor differences between Mac and PC. The text is more spread out on PC. If anybody have suggestions or ideas? Please share ;-)
13
Hi I am struggling at deisgning a drop down menu is pure css. Can anyone help me with showing any good step by step tutorial to deisgn one that works in IE and netscape and mozilla browsers. Please help..
14
@durratm, here are some nice examples to learn from. Hope this helps.