• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Jeanne Boyarsky
  • Tim Cooke
Sheriffs:
  • Liutauras Vilda
  • paul wheaton
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Carey Brown
  • Frits Walraven
Bartenders:
  • Piet Souris
  • Himai Minh

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

 
Ranch Hand
Posts: 61
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Bartender
Posts: 2907
150
Google Web Toolkit Eclipse IDE Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Ashish Gupta
Ranch Hand
Posts: 61
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
menu.jpg
[Thumbnail for menu.jpg]
screenshot
 
salvin francis
Bartender
Posts: 2907
150
Google Web Toolkit Eclipse IDE Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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/
 
Evil is afoot. But this tiny ad is just an ad:
free, earth-friendly heat - a kickstarter for putting coin in your pocket while saving the earth
https://coderanch.com/t/751654/free-earth-friendly-heat-kickstarter
reply
    Bookmark Topic Watch Topic
  • New Topic