wood burning stoves*
The moose likes HTML, CSS and JavaScript and the fly likes Question on how to implement multi level menu (navigation bar) in html/css Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Question on how to implement multi level menu (navigation bar) in html/css" Watch "Question on how to implement multi level menu (navigation bar) in html/css" New topic
Author

Question on how to implement multi level menu (navigation bar) in html/css

Ashish Gupta
Ranch Hand

Joined: Apr 27, 2003
Posts: 61
Hi,
I am working on a POC and have a requirement to include 3 level navigation menu bar where first and second (visible on selecting a tab in 1st menu) menus are laid out horizontally and 3rd one vertically.

I have experimented a lot with the style sheet but am not able to have 2 menu bar appear as horizontal. It always comes as vertical. Would like to know whether
1. Is it possible to achieve?
2. If yes, then a sample code will go a long way.

regards
Ashish
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

Lets settle on the requirements:

1. you need a multi - level hierarchy (3 in this case)
2. you need collapsing
3. Links

I suggest you use Lists in HTML @ creating the multilevel hierarchy.
collapsing can be achievable using javascript to show/hide a sublist.

Of course list elements need not be plain text, they could be links too.

check these for ref:
http://safalra.com/web-design/javascript/collapsible-lists/
http://webpageworkshop.co.uk/main/article11

My Website: [Salvin.in] Cool your mind:[Salvin.in/painting] My Sally:[Salvin.in/sally]
Ashish Gupta
Ranch Hand

Joined: Apr 27, 2003
Posts: 61
Thanks Salvin for giving reference. I am indeed using list for rendering the menu. Please see the atatched screenshot of what I could achieve so far. Here is the HTML code I want to render. As is obvious from screen shot, when I hover mouse over menu items in 2nd menu bar (ie Menu1 etc), third row of menu items do not show up at all.

I am no expert in web designing/stylesheeting, and this much I have done from collecting code from net etc. Obviously I don't understand completely to debug the issue. Appreciate some help to make it work.

HTML file is as below:


Attachment:
1. screenthot

Thanks
Ashish



[Thumbnail for menu.jpg]

salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

In case of a 'hover menu' you need to track the mouse events: onmouseover and onmouseout
you could make a function call to show or hide the subsequent sub-menus on the respective events.
let me know if you have any issues.


Try it yourself before checking this link, it contains a single level and does not use lists, but i think its helpful for you:
http://javascript-array.com/scripts/simple_drop_down_menu/
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Question on how to implement multi level menu (navigation bar) in html/css