Forum:

HTML Pages with CSS and JavaScript

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

Ranch Hand

Posts: 61

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Bartender

Posts: 2911

150

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

http://www.salvin.in

Ashish Gupta

Ranch Hand

Posts: 61

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Blsh</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="css/dropdown/dropdown.linear.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/edimas.com/default.ultimate.linear.css" media="screen" rel="stylesheet" type="text/css" />

</head>
<body>
<h2><img   /> Blah blah blah</h2>

<ul id="nav" class="dropdown dropdown-linear">
	<li><a >Home</a></li>
	<li><a  class="dir" rel="nofollow">Portal</a>
		<ul class="adminmenu">
			<li><a  class="dir" rel="nofollow">Menu1</a>
				<ul>
					<li><a >Menu1.1</a></li>
					<li><a >Menu1.2</a></li>
					<li><a >Menu1.3</a></li>
					<li><a >Menu1.4</a></li>
				</ul>
			</li>
			<li><a >Menu2</a></li>
			<li><a >Menu3</a></li>
			<li><a >Menu4</a></li>
		</ul>
	</li>

<li><a >FAQ</a></li>
	<li><a  class="dir" rel="nofollow">Contact Us</a>
		<ul>
			<li><a >Enquiry Form</a></li>
			<li><a >Map & Driving Directions</a></li>
			<li><a >Your Feedback</a></li>
			<li class="divider last"><a >More...</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Attachment:
1. screenthot

Thanks
Ashish

menu.jpg

salvin francis

Bartender

Posts: 2911

150

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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/

http://www.salvin.in