Page 1 of 1

Need more room on your web sites menu? How to add a third level to a 2 level menu. Rate Topic: -----

#1 jjsaw5  Icon User is offline

  • I must break you
  • member icon

Reputation: 90
  • View blog
  • Posts: 3,059
  • Joined: 04-January 08

Post icon  Posted 04 March 2008 - 08:25 AM

I found a CSS Horizontal menu that is free to use and edit (just as long as you credit the people who made the menu!!!!!!!)

Here is the website for the menu that i will be showing you how to add a third level too.

Javascript Kit.com

Before we go any further with this tutorial I take no credit for this menu, or the design or creation of it. All credit goes to the people at JavascriptKit.com

All I did was edit their design to allow for a third level.

Now that we made that clear, we can get onto showing you how to add that third level.

I am assuming that you have looked at the site and understand how the menu works. If you haven't please take a couple minutes to stop and look over the menu.

It's pretty simple it uses three files HTML, CSS, and Javascript. We will only be touching the HTML and CSS files.

Once you have established what you want in your menu, and have the 1st two levels set up we can now add the third.

First we will edit your html file.

Using the example from the website here is how we will add a third level to this menu.

<li><a href="#">LEVEL 1 HEADING</a>
<ul>
	<li><a href="#">LEVEL 2 HEADING</a></li>
		<ul>
				<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
				</ul>	



	<li><a href="#">LEVEL 2 HEADING</a></li>
		<ul>
				<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		<li><a href="link">LEVEL 3 HEADING FOR LINK</a></li>
		</ul>	
   </ul>
</li>



Explanation of above code.

This code sets up a menu section with the Main heading being" LEVEL 1 HEADING" and so on. Pretty self explanatory i think. The second "LEVEL 2 HEADING" is for the second menu item on this sub level. So we your menu will look like this....
-LEVEL 1 HEADING
	 -LEVEL 2 HEADING
		   -LEVEL 3 HEADING FOR LINK
		   -LEVEL 3 HEADING FOR LINK
		   -LEVEL 3 HEADING FOR LINK
		   -LEVEL 3 HEADING FOR LINK
	 -LEVEL 2 HEADING
		   -LEVEL 3 HEADING FOR LINK
		   -LEVEL 3 HEADING FOR LINK
		   -LEVEL 3 HEADING FOR LINK
		   -LEVEL 3 HEADING FOR LINK


You will notice where the link should be in LEVEL 1 and LEVEL 2 there is just a # sign. This is so that there is no link associated with that level of the menu.

*** In order to have the menu work correctly if you are going to have a drop down item under LEVEL 1 don't put a link with it. Same with a LEVEL 2 item that has a sub level. Do not include a link***

With that said you can have a link at any level of the menu if it does not have a sub level. So if you only need a "LEVEL 1" you can insert the link after the "href" same with a "LEVEL 2" item. IF you only need so go to the second level of the menu for the links then just add them like the site shows you.


Now that your HTML file is set up for 3 levels we need to edit the CSS file for a thrid level.


At the very bottom of the CSS file you will want to add this code...

/*3rd level menu*/
.horizontalcssmenu ul li ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
left: 70px; /*this is the offset for the sub sub-menu to allow the sub-menu to be seen*/
display: block;
visibility: hidden;
z-index: inherit;
}

/*3rd  menu list items*/
.horizontalcssmenu ul li ul li ul li{
display: inherit;
float: right;
}


/*3rd  menu links style */
.horizontalcssmenu ul li ul li ul li a{
width:100px; /*width of sub menu levels*/
display:block;
font-weight: normal;
padding: 2px 2px;
background:  url(untitled.bmp) center center repeat-x;
border-width: 0 1px 1px 1px;
}


In this code we set up the third level of the menu to open to the right, and you can go through and edit the size of the 3rd level menu, text, color, font, and the off set. I have comments in the code that tell you what you can edit to change the look of the menu.



If you have any questions please don't hesitate to PM me!!!

Once again Credit for this menu goes to the people at JavascriptKit.com

Is This A Good Question/Topic? 0
  • +

Page 1 of 1