Win a copy of Succeeding with AI this week in the Artificial Intelligence and Machine Learning forum!
  • 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 all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Liutauras Vilda
  • Junilu Lacar
Sheriffs:
  • Tim Cooke
  • Jeanne Boyarsky
  • Knute Snortum
Saloon Keepers:
  • Stephan van Hulst
  • Tim Moores
  • Tim Holloway
  • Carey Brown
  • Piet Souris
Bartenders:
  • salvin francis
  • fred rosenberger
  • Frits Walraven

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

 
Ranch Hand
Posts: 61
  • Mark post as helpful
  • send pies
  • 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: 2568
123
Google Web Toolkit Eclipse IDE Java
  • Mark post as helpful
  • send pies
  • 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
  • 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: 2568
123
Google Web Toolkit Eclipse IDE Java
  • Mark post as helpful
  • send pies
  • 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/
 
Can you really tell me that we aren't dealing with suspicious baked goods? And then there is this tiny ad:
ScroogeXHTML 8.7 - RTF to HTML5 and XHTML converter
https://coderanch.com/t/730700/ScroogeXHTML-RTF-HTML-XHTML-converter
    Bookmark Topic Watch Topic
  • New Topic