• 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
  • Ron McLeod
  • Rob Spoor
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Henry Wong
  • Liutauras Vilda
  • Jeanne Boyarsky
Saloon Keepers:
  • Jesse Silverman
  • Tim Holloway
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Mikalai Zaikin
  • Piet Souris

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: 2880
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: 2880
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/
 
You showed up just in time for the waffles! And this tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic