Tag Archives: Multilevel Menu

Tutorial: CSS Multilevel Dropdown Menu

There are several advantages to a CSS-only menuing system, the main ones being compatibility with JQuery plugins such as Featured Content Gallery, ease of setup and use, and fewer system resources used. The main problem is that most CSS-only menus are not compatible with Internet Explorer, particularly IE 6.

The CSS Multilevel Dropdown menu described in this tutorial is fully compatible with all versions of Internet Explorer and has all the advantages of CSS-only menus. It has four levels, with one dropdown and two flyouts. The flyouts can either go to the right or to the left. The menu is very versatile and can be configured in an almost endless number of ways.

You can see the menu in action above, since it is the menu used here on Thesis Theme Tools. There is also a demonstration on the Thesis Theme Tools demo site, which clearly shows all four menu levels.

Following are some illustrations of the CSS Multilevel Dropdown menu’s many modes of operation, including styling like the Thesis 1.6 menu:

Figure 1: CSS menu with one dropdown
Figure 1: CSS menu with one dropdown
Figure 2: CSS menu with two dropdowns
Figure 2: CSS menu with two dropdowns
Figure 3: CSS menu with three dropdowns
Figure 3: CSS menu with three dropdowns
Figure 4: CSS menu with left dropdown
Figure 4: CSS menu with left dropdown
Figure 5: CSS menu, left aligned tabs
Figure 5: CSS menu, left aligned tabs
Figure 6: CSS menu, tabs in center with no menu bar background
Figure 6: CSS menu, tabs in center with no menu bar background
Figure 7: CSS menu styled like the Thesis menu
Figure 7: CSS menu styled like the Thesis menu

The CSS Multilevel Dropdown menu has these outstanding features:

  • CSS only — no JQuery, JavaScript or plugins!
  • Any URL can be put in any menu item, unlike the Thesis 1.6 menu
  • Completely compatible with Thesis 1.5x and Thesis 1.6
  • Works with Windows IE6, IE7, IE8, Chrome, Firefox and all Mac browsers
  • Very customizable — size, alignment, colors, borders, fonts, arrows, etc
  • Very easy to set up and use. No URL configuration required — it works right out of the box!
  • Great SEO: Menu items are included in the page HTML so Google and other ‘bots can index them
  • Coexists fully with JQuery plugins such as Featured Content Gallery
  • Very small CSS file takes up few system resources
  • Instant operation. No lags and flickering like JQuery menus.
  • Can have flyouts to the left as well as to the right.

This menu is based on one developed by Stu Nicholls (no relation, unfortunately). The original files can be found on his site. The CSS has been modified extensively and the functions created so that it works with Thesis.

Rather than copy the files shown below, I recommend you get everything — all files and the arrow images — in a single zip file. You can download it by clicking here.

Navigation in the Tutorial

This description of the CSS Multilevel Dropdown Menu is in 5 parts. If you want to skip to a particular part, just click on the links below:

The files used in the menu

The CSS Multilevel Dropdown menu has 3 parts: The CSS file, functions for your custom_functions.php file, and the arrows. These are listed here so you can see how the menu works. Rather than copy these, I suggest you get the zip file.

The CSS file

Following is the “normal” version of the “css-menu.css” file. Also included in the zip file is a Thesis-like version. Note that the file is extensively annotated. The values shown below are the ones used for the menu at the top of this page. If you choose to copy the file from here, be sure to name it “css-menu.css.”

/* ================================================================ 
CSS MULTILEVEL DROPDOWN MENU
Original version by Stu Nicholls Copyright (c) 2005-2009 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/anywidth2.html
Modified and annotated by Mike Nichols, October 24, 2009
=================================================================== */

/* MENU BAR WIDTH, TAB ALIGNMENT & POSITIONING */
#css_menu {
	/* width of menu */
	width: 927px;
	/* center menu tabs or not */
	text-align:center;
	/* put your positioning statements here */
}

/*-----HEIGHT OF ITEMS */
/* all menu items */
#css_menu { height: 25px; }
#css_menu a { line-height:25px; }
/* all hover items */
#css_menu a:hover ul,
#css_menu li.left a:hover ul,
#css_menu ul li:hover > ul,
#css_menu li.left:hover > ul { top:25px; }
/* flyout positioning - this number must remain negative */
#css_menu ul ul li:hover > ul,
#css_menu li.left ul li:hover > ul { margin-top:-25px;}
/*-----*/

/* ITEM ARROWS AND FONT STYLING WHEN ITEM HAS DROPDOWNS AND FLYOUTS */
/* menu arrow down */
#css_menu li a.down {
	background:transparent url(arrow-down-white.gif) no-repeat right center;
}
/* menu arrow right, font color and weight when item has flyouts */
#css_menu li ul a.flyout {
	background:transparent url(arrow-right-black.gif) no-repeat right center;
	color: #408000;
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: uppercase;
}
/* menu arrow left, font color and weight when item has flyouts */
#css_menu li.left ul a.flyout {
	background:transparent url(arrow-left-black.gif) no-repeat left center;
	color: #408000;
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: uppercase;
}

/* ITEM BACKGROUND, BORDER AND FONT STYLING */
/* level one: main menu and default font styling */
#css_menu { 
	/* remove background to get floating tabs */
	background:#000000; 
	/* font family if desired */
	/*font-family: Verdana,Arial,sans-serif;*/
	/* cursor style */
	cursor: pointer;
	/* border if desired */
	/*border: 1px solid #000000;
	border-width: 0px 1px 0px 1px;*/
}

/* level one; main menu tabs */
#css_menu ul.level1 { background:#000000; }
#css_menu ul.level1 a { 
	color: #FFFFFF; 
	font-size: 1.5em; 
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: uppercase;
	/* letter spacing */
	/*letter-spacing: 2px;*/
	/* item padding */
	padding:0 20px 0 20px;
	/* border if desired */
	/*border: 1px solid #000000;
	border-width: 1px 1px 1px 1px;*/
} 
/* level two dropdown */
#css_menu ul.level2 { background:#C9CC99; }
#css_menu ul.level2 a { 
	color: #000000; 
	font-size: 1.2em; 
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: none;
	/* letter spacing */
	/*letter-spacing: 2px;*/
	/* item padding */
	padding:0 20px 0 10px;
	/* border if desired */
	/*border: 1px solid #000000;
	border-width: 1px 1px 1px 1px;*/
}
/* level three flyout */
#css_menu ul.level3 { background:#D0CC99; } 
#css_menu ul.level3 a { 
	color: #000000; 
	font-size: 1.2em; 
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: none;
	/* letter spacing */
	/*letter-spacing: 2px;*/
	/* item padding */
	padding:0 20px 0 10px;
	/* border if desired */
	/*border: 1px solid #000000;
	border-width: 1px 1px 1px 1px;*/
}
/* level four flyout */
#css_menu ul.level4 { background:#DCCD9B; } 
#css_menu ul.level4 a {
	color: #000000; 
	font-size: 1.2em; 
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: none;
	/* letter spacing */
	/*letter-spacing: 2px;*/
	/* item padding */
	padding:0 20px 0 10px;
	/* border if desired */
	/*border: 1px solid #000000;
	border-width: 1px 1px 1px 1px;*/
}
/* hover - these two should be the same */
#css_menu li a:hover,
#css_menu li a.flyout:hover {
	background-color:#9DB287;
	color: #FFFFFF;
	/* bold or not */
	font-weight: bold;
	/* underline or not */
	text-decoration:none;
} 
#css_menu li:hover > a,
#css_menu ul li:hover > a.flyout {
	background-color:#9DB287;
	color: #FFFFFF;
	/* bold or not */
	font-weight: bold;
	/* underline or not */
	text-decoration:none;
}

/* INDIVIDUAL LEVEL 1 TAB BACKGROUNDS */
#css_menu #tab1 { background: #088040; }
#css_menu #tab2 { background: #6666FF; }
#css_menu #tab3 { background: #804000; }
#css_menu #tab4 { background: #004080; }
#css_menu #tab5 { background: #808000; }
#css_menu #tab6 { background: #7F7F7F; }
#css_menu #tab7 { background: #008080; }
#css_menu #tab8 { background: #A36BFE; }
#css_menu #tab9 { background: #800040; }
#css_menu #tab10 { background: pink; }

/*===== DO NOT CHANGE ANYTHING BELOW THIS LINE =====*/
#css_menu { z-index: 100; }
#css_menu a { display:block; }
#css_menu a:hover ul {left:0; }
#css_menu li.left a:hover ul {left:auto; right:-1px; }
#css_menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#css_menu ul {display:inline-block;} 
#css_menu li {margin:0; padding:0; list-style:none;}
#css_menu li {display:inline-block; display:inline;}
#css_menu ul ul {position:absolute; left:-9999px;}
#css_menu ul.level1 {margin:0 auto;}
#css_menu ul.level1 li.level1-li {float:left; display:block; position:relative;}
#css_menu b {position:absolute;}
#css_menu ul.level1 li.level1-li a.level1-a {float:left;}
#css_menu ul li:hover > ul {visibility:visible; left:0; }
#css_menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto;}
#css_menu li.left:hover > ul {visibility:visible; left:auto; right:0; }
#css_menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; }
#css_menu li.left ul a {text-align:right; padding:0 10px 0 20px;}
#css_menu a:hover a:hover ul, 
#css_menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#css_menu li.left a:hover a:hover ul, 
#css_menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#css_menu a:hover ul ul, #css_menu a:hover a:hover ul ul {left:-9999px;}
#css_menu li.left a:hover ul ul, #css_menu li.left a:hover a:hover ul ul {left:-9999px;}
#css_menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#css_menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#css_menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#css_menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}

The functions for custom_functions.php

There are two functions to place into your custom_functions.php file: one to link the CSS file in the header of your page, and another for your menu definitions. Also included is code to remove the default Thesis menu. If you choose to copy the file from here, name it “for-custom_functions.php.”

/*=============================
CSS MULTILEVEL DROPDOWN MENU
Mike Nichols - October 24, 2009
===============================*/

/*-----------------------------*/
/* REMOVE THE THESIS MENU */
/*-----------------------------*/
/* UNCOMMENT ONE OF THESE TO REMOVE THE THESIS NAV MENU */
/*remove_action('thesis_hook_before_header', 'thesis_nav_menu');*/
/*remove_action('thesis_hook_after_header', 'thesis_nav_menu');*/

/*-----------------------------*/
/* LINK CSS-MENU.CSS IN HTML */
/*-----------------------------*/
function css_menu_head() {
?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo(template_directory)?>/custom/css-menu/css-menu.css" />
<?php
}
add_action('wp_head','css_menu_head');

/*-----------------------------*/
/* CSS MENU ITEM DEFINITION */
/*-----------------------------*/
function css_menu() {
?>
<div id="css_menu">
<ul class="level1">

<!-- LEVEL 1 SINGLE ITEM (HOME)-->
<li class="level1-li"><a class="level1-a" href="<?php bloginfo('url') ?>">Home</a></li>

<!-- LEVEL 1 SINGLE ITEM-->
<li class="level1-li"><a class="level1-a" href="#">Single Item</a></li>

<!-- LEVEL 1 WITH ONE DROPDOWN-->
<li class="level1-li"><a class="level1-a down" href="#">One Dropdown<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 2 DROPDOWN -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#">Level 2-1</a></li>
<li><a href="#">Level 2-2</a></li>
<li><a href="#">Level 2-3</a></li>
<li><a href="#">Level 2-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- LEVEL 1 WITH A DROPDOWN AND A FLYOUT -->
<li class="level1-li"><a class="level1-a down" href="#">Three Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 2 DROPDOWN -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#">Level 2-1</a></li>
<li><a href="#">Level 2-2</a></li>
<li><a class="flyout" href="#">Level 2-3 One Flyout<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 3 FLYOUT -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#">Level 3-1</a></li>
<li><a href="#">Level 3-2</a></li>
<li><a href="#">Level 3-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Level 2-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- LEVEL 1 WITH A DROPDOWN AND TWO FLYOUTS -->
<li class="level1-li"><a class="level1-a down" href="#">Four Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 2 DROPDOWN -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#">Level 2-1</a></li>
<li><a class="flyout" href="#">Level 2-2 Two Flyouts<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 3 FLYOUT -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#">Level 3-1</a></li>
<li><a href="#">Level 3-2</a></li>
<li><a class="flyout" href="#">Level 3-3 One Flyout<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 4 FLYOUT -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#">Level 4-1</a></li>
<li><a href="#">Level 4-2</a></li>
<li><a href="#">Level 4-3 Items can be of any length</a></li>
<li><a href="#">Level 4-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Level 3-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Level 2-3</a></li>
<li><a href="#">Level 2-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<!-- LEVEL 1 WITH A DROPDOWN AND TWO FLYOUTS TO THE LEFT -->
<li class="level1-li left"><a class="level1-a down" href="#">Four Levels to the Left<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 2 DROPDOWN -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#">Level 2-1</a></li>
<li><a class="flyout" href="#">Level 2-2 Two Flyouts<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 3 FLYOUT -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#">Level 3-1</a></li>
<li><a href="#">Level 3-2</a></li>
<li><a class="flyout" href="#">Level 3-3 One Flyout<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 4 FLYOUT -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#">Level 4-1</a></li>
<li><a href="#">Level 4-2</a></li>
<li><a href="#">Level 4-3</a></li>
<li><a href="#">Level 4-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Level 3-4</a></li>
<li><a href="#">Level 3-5</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Level 2-3</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

<?php
}
/* UNCOMMENT ONE OF THESE LINES TO DISPLAY THE MENU */
/*add_action ('thesis_hook_after_header','css_menu');*/
/*add_action ('thesis_hook_before_header','css_menu');*/

The arrows

There are six arrows included in the zip file: A black and a white version for each of the down, right and left arrows, for a total of six arrows. Here they are:
arrow-down-black
arrow-down-white
arrow-left-black
arrow-left-white
arrow-right-black

The six menu arrows
The six menu arrows

Setting up the CSS Multilevel Dropdown Menu

Step 1: Make a folder to hold the CSS file and arrows

Figure 8: css-menu folder created
Figure 8: css-menu folder created

Create a folder named “css-menu” in your /custom folder to hold your menu files. When you are finished, it will look like Figure 8.

Step 2: Copy the menu file and arrows to the folder

Figure 9: All files copied to the css-menu folder
Figure 9: All files copied to the css-menu folder

Copy the arrow files and the “css-menu.css” file to the new folder. If you downloaded the zip file, these are contained in a folder named “for-css-menu-folder”. If you want to try the Thesis-style menu, copy the “css-menu-thesis.css” file as well. Your /custom/css-menu folder should look like Figure 9 when you are done.

Step 3: Put the functions into your custom_functions.php file

Copy the entire contents of the “for-custom-functions.php” file and put it into your custom_functions.php file. It does not matter where it goes. Do not copy the file to your server!

Important! You must remove the Thesis menu by uncommenting one of the “remove_action” lines at the top of the contents you copied. Also, you must enable your new menu by uncommenting one of the “add_action” lines at the end of the “css_menu” function. If you don’t do this, your menu will not appear!

Using the CSS Multilevel Dropdown Menu

This menu has a few more requirements for use than other menuing systems on Thesis Theme Tools because of its great versatility and the need to maintain compatibility with the Internet Explorer browsers. This takes the form of extra classes and id’s for the first and subsequent levels’ <li> and <a> tags and all <ul> tags, as well as instructions for the Internet Explorer browsers.

There are a lot of extra lines of code due to the instructions for the IE browsers, which can make editing your menu file confusing if you don’t know what to ignore. The following section will show you need to know.

Basic menu item editing

Figure 10: Basic menu item ready to be edited
Figure 10: Basic menu item ready to be edited

However many levels your menu may have, each menu item is set up the same way. Figure 10 shows a typical menu lineitem before it has been edited. Note that every lineitem begins with a <li> tag and ends with a </li> tag.

Find the “#” after the “href” tag. That is where your URL goes — just highlight the pound sign and paste your URL over it, making sure to preserve the quotation marks.

The “Level 2-1” part in Figure 10 is the description as it appears in the menu. Highlight it and type your own description in over it.

For example, here is the same line configured to go to Thesis Theme Tools’ “About” page:

	<li><a href="http://thesisthemetools.com/about/">About</a></li>

Cutting and pasting menu items

The “css-menu” function has one each of code groups for a single item, a single dropdown, a dropdown with one flyout, a dropdown with two flyouts, and a left-facing dropdown with two flyouts. To create your own menu selections, all you have to do is to copy and paste the code groups you need in the order you want them and delete the rest.

The main thing to watch out for when cutting and pasting in the “css-menu” function is to make sure that you copy or cut all of a group of code and only the desired group of code.

Figure 11: css-menu function menu hierarchy
Figure 11: css-menu function menu hierarchy

Figure 11 shows the groups of code within a 4-level block. Note that every level begins with the <li> tag which marks the beginning of a lineitem. It ends with the </li> tag which marks the end the lineitem. The code for the dropdown or flyout for a particular level is found within those beginning and ending tags.

For example, say you want to create a second level 4 flyout. Just copy the entire section marked “Level 3 lineitem begin and end” and paste it where you want it to go. Make sure you don’t paste it inside another lineitem’s code! The same would go for deleting the entire level 4 flyout, but in this case you would cut the entire section.

I suggest keeping your “for-custom_functions.php” file for future reference rather than deleting it. As time goes on you will surely want to change and expand your menu, and having the file handy for cutting and pasting will make the task much easier.

Understanding how the CSS Multilevel Dropdown Menu works

You do not need to understand how the classes and IE code works to use the menu — all you have to do is cut and paste the provided code as-is. However, to take advantage of some of the features of the menu, you need to understand how the code works, especially the classes and id’s.

As mentioned, the “css-menu” function has extra classes and id’s that provide for its great versatility and configurability, as well as extra lines of code to maintain compatibility with the Internet Explorer browsers. It can be pretty confusing to see all this extra stuff at first, but once you get used to it, the menu code is easy to follow.

Classes and id’s used in the menu

There are several special classes and id’s used with the menu to enable its configurability. They are used in specific situations which will be explained later. They are:

  • The “down,” “flyout” and “left” classes tell the menu which arrows to use and how to place them. In addition, the “left” class tells the menu to fly to the left rather than to the right.
  • The “level1-li” and “level1-a” classes tell a first level item how to create a first level item and allow level-one-only customizations.
  • The “level2,” “level3” and “level4” classes enable customizations of these levels separately
  • The “tab1,” “tab2,” etc id’s are used to enable coloring the level 1 menu tabs individually.
Figure 12: Code for Level 1 with a dropdown and a flyout
Figure 12: Code for Level 1 with a dropdown and a flyout

Level 1 lineitem format

All level 1 items must have a specific format. Note the second line in Figure 12, which is the lineitem for the level 1 item. The <li> tag has the “level1-li” class and the <a>; tag has the “level1-a” class. These allow the first level items to be configured separately from the other items.

In addition, if the level 1 line has a dropdown, the “down” arrow class must be added to the <a> tag and a line of code for IE 7 and 8 added, as pointed out in Figure 12.

Flyouts to the left
If you want your flyouts to go to the left, add the class “left” to the <li> class list in the first level lineitem only. This not only directs the flyouts to the left, but uses a left-facing arrow. Here is what it looks like:

	<li class="level1-li left"><a class="level1-a down" href="#">Four Levels to the Left<!--[if gte IE 7]><!--></a><!--<![endif]-->

Dropdown and flyout classes

Insert a “down” class into the level 1 lineitem, as indicated in Figure 12 to get the down-facing arrow for the dropdown list.

For level 3 and 4 flyouts, insert the “flyout” class into the lineitem instead, as shown in Figure 12. It not only sets up the flyout arrow, but it enables positioning the flyouts exactly.

Classes for levels 2, 3 and 4

Figure 12 shows how the classes for levels 2, 3 and 4 are used. They are inserted into the <ul> tag. They allow each level to be configured separately.

Code enabling Internet Explorer compatibility

There are three sets of code that are required for IE compatibility.

When any lineitem has a dropdown or flyout, it must have a line of code appended to the lineitem for IE 7 and 8 compatibility, as shown in Figure 12.

In addition, the unordered list for a dropdown or flyout is surrounded by two lines of code intended for IE 6, which tricks it into thinking the list is a table. These code lines are illustrated in Figure 12.

Finally, the last lineitem in a dropdown or flyout must have bold turned on and off to keep IE 6 happy. This is also noted in Figure 12.

Coloring the level 1 menu tabs individually

If you want to color the level 1 menu tabs individually like those in the menu on this page, you must add a “tab” id to the level 1 lineitem code. There are provisions in the CSS file for up to 10 colored menu tabs, but you can add more if you wish.

All you have to do is to add an id for the individual tab to the <li> definition. The tabs are numbered starting on the left as “tab1,” “tab2,” “tab3” and so on. Here is what the id looks like for the first tab:

		<li class="level1-li" id="tab1"><a class="level1-a" href="#">Menu Tab 1</a></li>	

Editing the CSS file

The “css-menu.css” file is extensively annotated, so only a few highlights will be mentioned. Note the large section at the end marked “Do Not Change Anything Below This Line.” This consists of code that has no configurability, as well as code to maintain Internet Explorer compatibility. Obviously, look but don’t touch!

Menu bar width, tab alignment and menu positioning

The menu bar width can be expressed as a percentage of the page width such as 100%, or it can be a specific value, such as 900 pixels or 68.3em. The tabs on the menu bar can be aligned left, center, or right.

If you need to position the menu, for example move it up or down, this is where your CSS code would go.

Height of items

All the item height properties are found in this group. Generally, the height value used in the entire group will be the same. You may have to vary the value for the flyouts to keep them aligned with the menu item they are flying out from.

Item arrows and font styling when item has dropdowns and flyouts

There are three kinds of arrows provided: down, right and left. Each of these has a black and white version, making for six arrows in all. This section is where you designate which arrows you want to use. Since the arrow images are in the /custom/css-menu folder, no path is necessary.

The second and third selectors have in addition font properties for the item descriptions when they have flyouts. You can change the color and weight of the font of an item, and make it uppercase. By using these you can make the items with flyouts stand out from the list of items.

Item background, border and font styling

The first selector is for “#css_menu” and has properties both for the menu bar itself and for all fonts. If you comment out the background property, the menu bar tabs will float above the page. Here is where you set the font family for all fonts and the cursor used in the menu. You can also set the border used in the main menu bar.

Each of the following four levels has identical properties for background, fonts, item padding and borders. Using these properties, you can make each level appear differently from the others.

Finally, there are the hover properties which set the background and font characteristics when an item is hovered over. The values in these two groups should be the same — they have to be split out to maintain Internet Explorer 6 compatibility.

Level 1 menu items individual coloring

The last section of the CSS file deals with the individual colors of the level 1 menu items. If you have set these up in your custom_functions.php file as described above, change the background colors of the menu items to suit.

How to use the Thesis-style CSS file

Included in the zip file is a CSS file named “css-menu-thesis.css” that configures the menu to imitate the Thesis menu. To use it, rename the “css-menu.css” file to something like “css-menu-regular.css”. Then rename the “css-menu-thesis.css” file to “css-menu”. You’re good to go!

Conclusion

I recommend you get everything — all files and the arrow images — for this menu in a single zip file. You can download it by clicking here.

I hope you have found this tutorial easy to follow and useful. The CSS Multilevel Dropdown Menu is a great addition to any site, and I encourage you to give it a try! As always, your comments are welcome, and you can contact me directly by clicking on the “Contact” tab in the menu.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

Tutorial: Vertical Multilevel Dropdown Menu

Many people have requested a Vertical Multilevel Dropdown Menu to use either as the main menu, or as a supplement to navigation. In response to these requests, I have developed the menu described in this article.

You can see the Vertical Menu in action in the top left sidebar of this site. I use it for supplementary navigation to give the reader quick and complete access to the full site. The menu has both single and multiple dropdowns. If you pull down the item “About” it appear as a single dropdown:

Figure 1: Single Dropdown of Vertical Menu
Figure 1: Single Dropdown of Vertical Menu

The “Tricks” menu item has two levels, as shown in Figure 2:

Figure 2: Two Levels of Dropdowns
Figure 2: Two Levels of Dropdowns

The Menu is also capable of more levels, as shown in Figure 3 from the Thesis Theme Tools demo site:

Figure 3: Three Levels of Dropdowns
Figure 3: Three Levels of Dropdowns

The Vertical Multilevel Dropdown Menu offers these features:

  • Easy to set up and use.
  • Any kind of URL, document or file can be put in the menu — no restrictions and no conditional php!
  • Dropdown menus with as many items and dropdown levels as you want.
  • Menu items may be in any order you want.
  • Dropdown menus have a sliding effect that is very appealing
  • Completely configurable as to size of menu items, font characteristics, colors, etc. with CSS.
  • Includes support for most major browsers, including most versions of Internet Explorer.
  • SEO friendly: Its unordered list is generated within the HTML of the page, so Google’s and other bots can read and index it.
  • Very fast execution. Uses Google libraries for speed.
  • In browsers with JavaScript disabled, the main tabs are still usable (but not the dropdowns)

The Vertical Menu is based on an idea from the Dynamic Drive’s CSS Library that I modified for use with Thesis.

Rather than copy the files shown below, I recommend you get everything — all files and the arrow graphic — in a single zip file. You can download it by clicking here.

Navigation in the Tutorial

This description of the Vertical Multilevel Dropdown Menu is in 6 parts. If you want to skip to a particular part, just click on the links below:

How the menu works

There are four separate groups of code and one image that make this menu work:

  • A JavaScript file that does the actual work of building the menu
  • A CSS file that styles the menu
  • A set of functions to put into your custom_functions.php file
  • A line of code to put into a text widget
  • An arrow image

These are listed and described below to help you understand how the menu works. All this code and the arrow are included in the zip file.

The JavaScript that builds the dropdowns

The following JavaScript does the actual work of building the multiple levels of the menu. I made some minor modifications to it, but it’s basically a script provided by Dynamic Drive. If you choose to create a file from the code below rather than use the zip file, you must name the file “ddsmoothmenu.js”.

//** Smooth Navigational Menu- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Menu created: Nov 12, 2008 - last update July 27th, 09 (v1.31)
//** Modified by Mike Nichols Oct 6, 09 for the Vertical Multilevel Dropdown Menu

var ddsmoothmenu={

//Specify the full URL to down arrow image
//Replace YOUR-DOMAIN-NAME with your domain name and check your Thesis path
arrowimages: {down:['downarrowclass', '', 23], right:['rightarrowclass', 'http://YOUR-DOMAIN-NAME/wp-content/themes/thesis_151/custom/images/v-right-arrow.gif']},

//Duration of slide in/out animation in milliseconds - default is 300
//overtime is the speed the menu draws on the screen
//outtime is the speed the menu is removed from the screen
transition: {overtime:300, outtime:300}, 

///////Stop configuring beyond here///////////////////////////
shadow: {enable:true, offsetx:5, offsety:5},

detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, //detect WebKit browsers (Safari, Chrome etc)
detectie6: document.all && !window.XMLHttpRequest,

getajaxmenu:function($, setting){ //function to fetch external page containing the panel DIVs
	var $menucontainer=$('#'+setting.contentsource[0]) //reference empty div on page that will hold menu
	$menucontainer.html("Loading Menu...")
	$.ajax({
		url: setting.contentsource[1], //path to external menu file
		async: true,
		error:function(ajaxrequest){
			$menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
		},
		success:function(content){
			$menucontainer.html(content)
			ddsmoothmenu.buildmenu($, setting)
		}
	})
},


buildmenu:function($, setting){
	var smoothmenu=ddsmoothmenu
	var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL
	$mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
	var $headers=$mainmenu.find("ul").parent()
	$headers.hover(
		function(e){
			$(this).children('a:eq(0)').addClass('selected')
		},
		function(e){
			$(this).children('a:eq(0)').removeClass('selected')
		}
	)
	$headers.each(function(i){ //loop through each LI header
		var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header
		var $subul=$(this).find('ul:eq(0)').css({display:'block'})
		this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
		this.istopheader=$curobj.parents("ul").length==1? true : false //is top level header?
		$subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
		$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
			''
		)
		if (smoothmenu.shadow.enable){
			this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
			if (this.istopheader)
				$parentshadow=$(document.body)
			else{
				var $parentLi=$curobj.parents("li:eq(0)")
				$parentshadow=$parentLi.get(0).$shadow
			}
			this.$shadow=$('
').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'}) //insert shadow DIV and set it to parent node for the next shadow div } $curobj.hover( function(e){ var $targetul=$(this).children("ul:eq(0)") this._offsets={left:$(this).offset().left, top:$(this).offset().top} var menuleft=this.istopheader && setting.orientation!='v'? 0 : this._dimensions.w menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader && setting.orientation!='v'? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent if ($targetul.queue().length<=1){ //if 1 or less queued animations $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime) if (smoothmenu.shadow.enable){ var shadowleft=this.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft var shadowtop=this.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : this._shadowoffset.y if (!this.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full this.$shadow.css({opacity:1}) } this.$shadow.css({overflow:'', width:this._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:this._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime) } } }, function(e){ var $targetul=$(this).children("ul:eq(0)") $targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime) if (smoothmenu.shadow.enable){ if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them this.$shadow.children('div:eq(0)').css({opacity:0}) } this.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime) } } ) //end hover }) //end $headers.each() $mainmenu.find("ul").css({display:'none', visibility:'visible'}) }, init:function(setting){ if (typeof setting.customtheme=="object" && setting.customtheme.length==2){ //override default menu colors (default/hover) with custom set? var mainmenuid='#'+setting.mainmenuid var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+', '+mainmenuid document.write('') } this.shadow.enable=(document.all && !window.XMLHttpRequest)? false : this.shadow.enable //in IE6, always disable shadow jQuery(document).ready(function($){ //ajax menu? if (typeof setting.contentsource=="object"){ //if external ajax menu ddsmoothmenu.getajaxmenu($, setting) } else{ //else if markup menu ddsmoothmenu.buildmenu($, setting) } }) } } //end ddsmoothmenu variable //Initialize Menu instance(s):

The CSS that styles the menu

Following is the CSS file that styles the menu. You have complete control over the fonts, the menu colors and borders, the item size and spacing, and the dropdown items’ size, among other things. The values in the CSS are those that I used to style the menu on this site, but you are completely free to change anything you wish.

Note that the code is heavily commented to help you find what you need. Also note that there are several warnings not to change certain parts of the code. Of course, no one will be watching you and slap your hands if you do so, but the Menu will behave very strangely!

If you choose to create a file from the code below rather than use the zip file, you must name the file “ddsmoothmenu-v.css”.

/* Smooth Navigational Menu- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com */
/* Modified and annotated by Mike Nichols Oct 6, 2009 for the Vertical Multilevel Dropdown Menu */

/* COLORS
#FFFFFF	- white	
		- menu items default
#888888	- gray			
		- submenu item dividers
#EFCF00	- light gold			
		- hovered-over menu item
#CDB91A	- dark gold
		- selected menu item
*/
/* Main class definition */
.ddsmoothmenu-v ul{
	/* Main Menu Item widths */
	width: 235px;
	/* font size */
	font-size: .9em;
	/* font bold or not*/
	font-weight: bold;
	/* font if different from default */
	/*font-family: Verdana, Arial, sans-serif;*/
	/* do not change these! */
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/* Top level menu links style */
.ddsmoothmenu-v ul li a{
	/* font color */
	color: #FFFFFF;
	/* underline or not */
	text-decoration: none;
	/* height of menu bars */
	padding: 6px;
	/* set the distance between menu bars */
	margin-bottom: -8px;
	/* menu item borders */
	border-bottom: 1px dotted #888888;
	border-right: 1px dotted #888888;
	/* do not change these! */
	display: block;
	overflow: auto; /*force hasLayout in IE7 */
}

/* default background and font color of menu items*/
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{
	/* background */
	background: #FFFFFF;
	/* font color */
	color: #000000;
}

/* background and font color of currently selected menu item */
.ddsmoothmenu-v ul li a.selected {
	/* background */
	background: #CDB91A;
	/* font color */
	color: white;
}

/*background and font color of menu items on mouseover (hover state)*/
.ddsmoothmenu-v ul li a:hover{
	/* background */
	background: #EFCF00;
	/* font color */
	color: #000000;
	/* underline or not */
	text-decoration: none;
}

/*Sub level menu items */
.ddsmoothmenu-v ul li ul{
	/*Sub Menu Items width */
	width: 220px;
	/* font weight */
	font-weight: bold;
	/* font size */
	font-size: 1em;
	/* do not change these! */
	position: absolute;
	top: 0;
	visibility: hidden;
}

/* ====== DO NOT CHANGE ANYTHING BELOW THIS LINE ===== */
/* positioning of pulldowns */
.ddsmoothmenu-v ul li{
	position: relative;
	left:-15px;
}

/* Hack for IE \*/
* html .ddsmoothmenu-v ul li { float: left; height: 1%; }
* html .ddsmoothmenu-v ul li a { height: 1%; }
/* End */

The functions to put into custom_functions.php

Following are three functions that you place into your custom_functions.php file. The first function links the menu’s CSS file into the head of your post/page HTML document. The second function links the required JQuery file and the JavaScript file into the foot of your post/page HTML document.

The third function actually describes your menu items. It consists of simple unordered HTML lists that become a part of the HTML when your page is rendered, so Google and other search bots will index them. If you choose to create a file from the code below rather than use the zip file, you must name the file “for-custom_functions.php”.

/* --------------------------------------------------- */
/* FUNCTIONS FOR THE VERTICAL MULTILEVEL DROPDOWN MENU */
/* Created by Mike Nichols - Oct 6, 2009 */
/* --------------------------------------------------- */

/* Link menu css in document head */
function vertical_menu_head() {
?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo(template_directory)?>/custom/vertical-menu/ddsmoothmenu-v.css" />
<?php
}
add_action('wp_head','vertical_menu_head');

/* Link menu JavaScript and JQuery in footer */
function vertical_menu_foot() {
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="<?php bloginfo(template_directory)?>/custom/vertical-menu/ddsmoothmenu.js"></script>

<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu",
orientation: 'v',
classname: 'ddsmoothmenu-v',
contentsource: "markup"
})
</script>
<?php
}
add_action('thesis_hook_after_html','vertical_menu_foot');

/* define the menu items */
/* this will be called from the widget */
function vertical_menu() {
?>
<div id="smoothmenu" class="ddsmoothmenu-v">
<ul>

<!-- First level menu item shows on main menu list -->
<!-- It is set to your home page -->
<li><a href="<?php bloginfo('url');?>">Home</a></li>

<!-- First level menu item with one dropdown -->
<li><a href="#">TAB 2 WITH 1 DROPDOWN&nbsp;</a>
<!-- this is the dropdown -->
<ul>
<li><a href="#">DROPDOWN 1 ITEM 1</a></li>
<li><a href="#">DROPDOWN 1 ITEM 2</a></li>
<li><a href="#">DROPDOWN 1 ITEM 3</a></li>
<li><a href="#">DROPDOWN 1 ITEM 4</a></li>
</ul>
</li>

<!-- First level menu item with one dropdown -->
<li><a href="#">TAB 3 WITH 1 DROPDOWN&nbsp;</a>
<!-- this is the dropdown -->
<ul>
<li><a href="#">DROPDOWN 1 ITEM 1</a></li>
<li><a href="#">DROPDOWN 1 ITEM 2</a></li>
<li><a href="#">DROPDOWN 1 ITEM 3</a></li>
<li><a href="#">DROPDOWN 1 ITEM 4</a></li>
</ul>
</li>

<!-- First level menu item with no dropdown -->
<li><a href="#">TAB 4</a></li>

<!-- First level menu item with three dropdowns -->
<li><a href="#">TAB 5 WITH 3 DROPDOWNS&nbsp;</a>
<ul>
<!-- this is the first level dropdown -->
<li><a href="#">DROPDOWN 1 ITEM 1</a></li>
<li><a href="#">DROPDOWN 1 ITEM 2&nbsp;</a>
<!-- this is the second level dropdown -->
<ul>
<li><a href="#">DROPDOWN 2 ITEM 1</a></li>
<li><a href="#">DROPDOWN 2 ITEM 2</a></li>
<li><a href="#">DROPDOWN 2 ITEM 3&nbsp;</a>
<!-- this is the third level dropdown -->
<ul>
<li><a href="#">DROPDOWN 3 ITEM 1</a></li>
<li><a href="#">DROPDOWN 3 ITEM 2</a></li>
<li><a href="#">DROPDOWN 3 ITEM 3</a></li>
<li><a href="#">DROPDOWN 3 ITEM 4</a></li>
<li><a href="#">DROPDOWN 3 ITEM 5</a></li>
</ul>
</li>
<li><a href="#">DROPDOWN 2 ITEM 4</a></li>
</ul>
</li>
</ul>
</li>

<!-- First level menu item with no dropdown -->
<li><a href="#">TAB 6</a></li>

</ul>
<br style="clear: left" />
</div>
<?php
}

Widget code

The great majority of people will use the Vertical Menu in a widget. There is one line of code to enter into a text widget. Using the Menu in a widget is fully described below:

<?php vertical_menu() ?>

The Menu’s arrow image file

Figure 4
Figure 4

The menu uses an image to indicate that there is a dropdown or multiple levels on a menu item. It is contained in Figure 4. If you copy the menu arrow image, be sure to name it “v-right-arrow.gif.” The arrow is also found in the zip file.

Getting a plugin to execute PHP in a widget

The Vertical Menu can be used in two ways: placed in a widget or in a CSS box. The great majority of people will use it in a widget, since using it in a CSS box is impractical and difficult to implement (if anybody really wants to give it a go, though, just contact me and I’ll tell you how). The Vertical Menu on this page is in a widget.

Widgets will not execute PHP code without help, so you will need a plugin that allows you to do so. My favorite is Exec-PHP by Sören Weber. It is available either from the WordPress Plugins page or from the author’s plugin page. You may also download and install it directly from your WordPress admin panel’s plugin page. Be sure to activate the plugin! You should visit the plugin’s settings page under Settings on the WordPress admin panel. You probably won’t have to change anything, but you need to check it anyway.

Setting up the Vertical Multilevel Dropdown Menu

There are 5 steps for setting up your menu. Each step is not difficult, but the instructions must be followed to the letter. Most of the problems people experience when setting up the menu are because they skip a step or do not follow the directions.

Step 1: Set up a folder on your server

Figure 5: The vertical-menu folder created within the /custom folder
Figure 5: The vertical-menu folder created within the /custom folder

Create a new folder named “vertical-menu” in your /custom folder. When you are finished your folders should look like figure 5.

Step 2: Copy files into the /custom/vertical-menu folder

Figure 6: Required files copied into the /custom/vertical-menu folder
Figure 6: Required files copied into the /custom/vertical-menu folder

Copy the “ddsmoothmenu.js” and “ddsmoothmenu-v.css” files into the /custom/vertical-menu folder. If you downloaded the zip file, they are contained in a folder named “put-in-vertical-menu-folder.”

When you finish your custom folder should look like Figure 6.

Step 3: Upload the arrow image and set it up

1. Upload the arrow image to your /custom/images folder. It is named “v-right-arrow.gif.” If you downloaded the zip file, it is in the folder named “put-in-custom-images.”

2. Change the path to your arrow image in the file “ddsmoothmenu.js” to the full URL, not the relative URL of the arrow file. Right at the top of the file is the place to do it — you will see three lines that look like this:

//Specify the full URL to down arrow image
//Replace YOUR-DOMAIN-NAME with your domain name and check your Thesis path
arrowimages: {down:['downarrowclass', '', 23], right:['rightarrowclass', 'http://YOUR-DOMAIN-NAME/wp-content/themes/thesis_151/custom/images/v-right-arrow.gif']},

The third line is where you make your changes.

Substitute your domain name for “YOUR-DOMAIN-NAME” in the URL for the arrow image. Double-check that the Thesis folder is named the same as yours. If your arrow doesn’t appear on the menu, then you’ve gotten the URL wrong. Note that this is the only hard-coded URL required in the Menu setup. When you upgrade Thesis, make sure to remember to change this URL!

Step 4: Put the three functions into your custom_functions.php file

Copy and paste the three functions in the file “for-custom-functions.php” into your custom_functions.php file. It does not matter where these functions go. (Note that the “for-custom_functions.php” file is not uploaded to your server.)

Step 5: Install a text widget and insert the code

Widget setup is simplicity itself. From your WordPress admin panel, go to Appearance > Widgets. Drag a text widget to where you want the menu to appear. Put the contents of the “put-in-text-widget” file — one single short line — into the text widget and save (the file is found in the zip file or can be copied above). (Note that the “put-in-text-widget” file is not uploaded to your server.)

You’re finished with the setup. Now you’re ready to try it out!

How to Set Up Your Menu Items

The Menu is just an HTML unordered list with the following structure. Adding menu items is simple, but you have to follow instructions carefully:

Main Menu Items
	First Level Dropdown Items
		Second Level Dropdown Items
			Third Level Dropdown Items
				...

1. Basically, you will be doing two things when setting up a menu item: putting in the item’s URL, and putting in its menu description. Figure 7 shows a sample line before it has been set up:

Figure 7: Menu Item Before Setup
Figure 7: Menu Item Before Setup

2. The URL for your menu item replaces the pound sign (#). The description for the menu item — the word(s) that actually show on the menu — replace the example words. For example, if I am setting up Thesis Theme Tool’s About page, it would look like the when I am finished. Remember that you can put any URL into any menu item:

<li><a href="http://thesisthemetools.com/about/">About</a></li>

3. Adding more menu items follows the same procedure. Just replace the pound sign with your URL and the example description with your description.

4. Note that the first tab is already set up as your home tab. You may change it if you wish.

Figure 8: Nesting of unordered lists in the function
Figure 8: Nesting of unordered lists in the function

5. When editing dropdowns, make sure that you observe the way the lists are constructed: The unordered list for dropdowns come right before the line item’s “</li>” tag. This tag is placed after the end of the unordered list. In Figure 8 you will see the nesting of the tags represented by red lines.

Adding a Single Tab Item with No Dropdown

1. Copy a line with no dropdowns, such as the Home page line, “TAB 4” or “TAB 6” lines.
2. Paste the line in the code where you want the menu item to appear.
3. Replace the URL or pound sign with your URL, and the description with your description.

Adding a Single Tab Item with One Dropdown

1. Copy a group of lines with a single dropdown, such as the “TAB 3” or “TAB 4” lines. Be sure to copy all the lines associated with the tab.
2. Paste the lines in the code where you want the menu item to appear.
3. Replace the URLs or pound signs with your URL, and the descriptions with your descriptions.

Adding a Single Tab Item with Multiple Dropdowns

1. Copy a group of lines with a multiple dropdowns, such as the “TAB 5” group. Be sure to copy all the lines associated with the tab.
2. Paste the lines in the code where you want the menu item to appear.
3. Delete any submenus that you don’t need. Be sure to delete all the lines associated with the unneeded submenus, but observe the menu’s structure and don’t delete too many!
4. Replace the URLs or pound signs with your URL, and the descriptions with your descriptions.

Deleting or Rearranging Menu Items

Menu items can be deleted or rearranged easily,
1. Cut the line or group of lines associated with the menu item. Make sure you get all the lines, but be sure you don’t cut the lines of other groups! If you are unsure of which lines to cut, take a look at Figure 8 again.
2. If you are moving the menu item, find the place you want it and paste it there.

Usage tips for the Vertical Multilevel Dropdown Menu

1. The menu lines have been commented and indented in the code to better show you the menu structure. I suggest you not erase these lines to make working with the menu easier.
2. Keep the file “for-custom-functions.php” so you can copy its menu lines when you need them.
3. Be careful about long menu descriptions for dropdowns. If they are too long, they may get cut off in the dropdown.
4. Remember that browsers with JavaScript turned off will only see the main menu items. You need to make these main menu items point to the more important areas of your site, and/or go to pages that have links to the dropdown’s items.
5. Add a non-breaking space after menu item description with a dropdown or multiple level to keep the arrow from being right up against the last letter. The code is “&nbsp;” without the quotes. For example, in the “Tricks” item of the vertical menu on this site, I put a non-breaking space after the “TRICKS” word. Also take a look at the “vertical_menu” function, where I put a non-breaking space after each menu item with dropdowns:

		<li><a href="http://thesisthemetools.com/tricks/">TRICKS&nbsp;</a>

Troubleshooting Your Menu

1. The menu does not appear

You didn’t download and activate a PHP plugin, you forgot to put the required code into a widget, or you renamed the “vertical_menu” function in custom_functions.php.

2. I can’t select items on the menu because the dropdowns disappear

The JavaScript for the menu is very fast — sometimes too fast. You can slow it down by changing the value of two variables in the “ddsmoothmenu.js” file in your /custom/vertical-menu folder.

Look for these lines in the file. They are near the top:

//Duration of slide in/out animation in milliseconds - default is 300
//overtime is the speed the menu draws on the screen
//outtime is the speed the menu is removed from the screen
transition: {overtime:300, outtime:300}, 

Changing the “overtime” variable in the fourth line to a smaller number will draw the dropdowns faster, allowing you to move your cursor faster. Try something like 200 first, then keep going down incrementally until the problem gets better. The “outtime” variable can be made larger to keep the dropdowns on the screen longer, again allowing you to move your cursor faster. Start at 400 and go up incrementally.

3. I can’t select items on the menu because the dropdowns disappear

You are moving your cursor too fast and/or in a curve. Move it slower and in a straight line over the dropdown items.

4. The menu flickers or the dropdowns appear and disappear

The solution is the same as item 2, above. There is a balance between how fast the menu draws and how fast the dropdowns disappear. You just have to find it.

5. Nothing happens when I click on a menu item, or all that appears in the browser address is a pound sign

You haven’t set up the menu correctly, or you didn’t delete unneeded menu items. Review the instructions in the “How to Set Up Your Menu Items” section above.

6. The menu looks like “slats” in Internet Explorer

Usually this is due to padding and margin issues in the “ddsmoothmenu-v.css” file. IE interprets these differently from every other browser. Unfortunately, this doesn’t happen with everybody’s copy of IE — just on some of them. You may want to experiment with the padding and margin values of the selectors to see if it solves your problem.

7. The menu does not let me pull the dropdown all the way down in Internet Explorer

This usually is due to the menu moving too fast for Internet Explorer. Try the solution in item 2, but make both the “overtime” and “outtime” variables a larger number.

Conclusion

Remember that you can get everything everything needed for the Vertical Menu — all files and the arrow graphic — in a single zip file. Just download it by clicking here.

I hope you try out the Vertical Multilevel Dropdown Menu. It works very smoothly, and has been trouble-free for me this site. As always, your comments are welcome. You can also contact me by email by clicking the “Contact” button at the top of the page.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

Updated: Multilevel Menu with CSS and JavaScript

The Multilevel Menu with CSS and JavaScript has had a major revision, both in its code and in the tutorial.

The Menu now is much easier to install, and most of the causes of installation troubles have been eliminated. It also loads and runs much faster. In addition, the Menu has been made upgrade-proof, meaning that that hard-coded URLs will not have to be changed when you upgrade.

The tutorial has been extensively revised as well. New sections on menu setup and troubleshooting have been added, and the sections dealing with the code and the installation have been updated to reflect the revisions.

If you are a user of the Menu there is no reason for you to upgrade if you are pleased with its performance. But if you want a faster-loading, upgrade-proof program, then you can update in just minutes. Here are some things to note when upgrading:

  • The CSS files “jqueryslidemenu.css” and “jqueryslidemenu-thesis.css” and the CSS you put into custom.css have had only a few revisions. Those are for ease of use, so there is no reason to replace them.
  • The JavaScript file is unchanged, so it will not need replacement, either.
  • You will need to remove the code from the header section of Thesis Options. This is now taken care of with functions in custom_functions.php.
  • There are three functions for custom_functions.php now instead of one. You will need to copy the first two, “slidemenu_head” and “slidemenu_foot” into custom_functions.php They load the necessary files into the HTML of your page and replace the code in the header section of Thesis Options. The third function, the one with your menu definitions, is unchanged, and does not need replacement.

I want to take this opportunity to thank Gary Jones for his suggestions for the Menu’s improvement. They are the basis of several of the revisions in the Menu code.

And thank you to all who have tried the Menu out, and to those on the DIYthemes Forum whose experiences with the Menu have led to my making this revision.

New Article! Tutorial: Multilevel Menu with CSS and JavaScript

Sometimes I get so excited about a project that I drop everything and pursue it.

That’s the way it’s been with the Multilevel Menu with CSS and JavaScript. It’s a dropdown multilevel menuing system for Thesis that is easy to install and configure. The menu styling is CSS-based, and the fonts, colors, tab and pulldown size can all be changed by the user. The JavaScript is fast and produces an attractive sliding effect. And it has great SEO features that make it search-engine friendly.

I took the code found at the Dynamic Drive’s CSS Library and developed it yesterday into a working menu for my Thesis Demo site. Then spent the whole day today writing it up, checking and double-checking the files, creating a downloads folder, and making a zip file. I also set up the menu in the Thesis Demo site to view the files and download the zip, too.

The Multilevel Menu offers these outstanding features:

  • Easy to set up and use.
  • Requires no plugin. Everything is done by CSS and JavaScript.
  • Dropdown menus with as many tabs and levels as you want.
  • Tabs may be in any order you want.
  • Dropdown menus have a sliding effect that is very appealing
  • Completely configurable as to size of tabs, font characteristics, colors, etc. with CSS.
  • Includes support for most major browsers, including most versions of Internet Explorer.
  • SEO friendly: Its unordered list is generated within the HTML of the page, so Google’s and other bots can read and index it.
  • Any kind of URL, document or file can be put in the menu — no restrictions and no conditional php!
  • Very fast execution. Uses Google libraries for speed.
  • Files include both a colored menu and one set up to look like the standard Thesis navigation menu.
  • In browsers with JavaScript disabled, the main tabs are still usable (but not the dropdowns)

I’m really excited about the new menu, and I hope you will be, too!

Tutorial: Multilevel Menu with CSS and JavaScript

The code for the Multilevel Menu with CSS and JavaScript has been completely revised October 4-17, 2009. This tutorial has been changed to reflect the revisions, as well as being improved with new sections on how to build the menu and troubleshooting.

The Multilevel Menu with CSS and JavaScript is a fast, easy to implement dropdown menu with multiple levels. See it in action at my Thesis Demo site.

The menu files listed here produce a dropdown menu with multiple levels. Shown here is the menu as configured in this tutorial:

Figure 1: Dropdown menu with one level
Figure 1: Dropdown menu with one level
Figure 2: Dropdown menu with three levels
Figure 2: Dropdown menu with three levels

Included in the zip file provided for the menu is a configuration that mimics the standard Thesis navigation bar:

Figure 3: Dropdown menu configured to look like Thesis
Figure 3: Dropdown menu configured to look like Thesis

The Multilevel Menu offers these outstanding features:

  • Easy to set up and use.
  • Requires no plugin. Everything is done with CSS and JavaScript.
  • Any kind of URL, document or file can be put in the menu — no restrictions and no conditional php!
  • Dropdown menus with as many tabs and levels as you want.
  • Tabs may be in any order you want.
  • Dropdown menus have a sliding effect that is very appealing
  • Completely configurable as to size of tabs, font characteristics, colors, etc. with CSS.
  • Includes support for most major browsers, including most versions of Internet Explorer.
  • SEO friendly: Its unordered list is generated within the HTML of the page, so Google’s and other bots can read and index it.
  • Very fast execution. Uses Google libraries for speed.
  • Files include both a colored menu and one set up to look like the standard Thesis navigation menu.
  • In browsers with JavaScript disabled, the main tabs are still usable (but not the dropdowns)

The Multilevel Menu is based on an idea from the Dynamic Drive’s CSS Library that I modified for use with Thesis.

There is one drawback to the Multilevel Menu system: It requires working with the custom_functions.php file, even though the coding is minimal and very easy to do. If you would prefer using a plugin that has a gui interface for configuring a dropdown menu, there is a good tutorial, “Thesis Theme Tutorial – adding multilevel, nested, SEO friendly navigation menu to WordPress” for using the WordPress navigation list plugin, NAVT.

Rather than copy the files shown below, I recommend you get everything — all files and the arrow graphics — in a single zip file. You can download it by clicking here.

Navigation in the Tutorial

This description of the Multilevel Menu with CSS and JavaScript is in five parts. If you want to skip to a particular part, just click on the links below:

How the menu works

There are three separate groups of code and two images that make this menu work:

  • A JavaScript file that does the actual work of building the menu
  • A CSS file that styles the menu
  • A set of functions to put into your custom_functions.php file
  • Two arrow images

These are listed and described below to help you understand how the menu works. All this code and the arrows are included in the zip file.

The JavaScript that builds the dropdowns

The following JavaScript does the actual work of building the multiple levels of the menu. I made some minor modifications to it, but it’s basically a script provided by Dynamic Drive. If you choose to create a file from the code below rather than use the zip file, you must name the file “jqueryslidemenu.js”.

/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Modified by Mike Nichols - July 10, 2009 - October 17, 2009
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

var jqueryslidemenu={

//Change the duration of the slide in/out animation - in milliseconds
animateduration: {over: 200, out: 100}, 

buildmenu:function(menuid, arrowsvar){
	jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
				''
			)
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
					var menuleft=this.istopheader? 0 : this._dimensions.w
					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
					if ($targetul.queue().length<=1) //if 1 or less queued animations
						$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
				},
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.slideUp(jqueryslidemenu.animateduration.out)
				}
			) //end hover
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
	}) //end document.ready
}
}

//build menu with ID="slidemenu_jq" on page:
jqueryslidemenu.buildmenu("slidemenu_jq", arrowimages)

The CSS that styles the menu

Following is the CSS file that styles the menu. You have complete control over the fonts, the menu colors and borders, the tab size and spacing, and the dropdown items' size, among other things. The values in the CSS are those that I used to style the green menu on the Thesis Demo site, but you are completely free to change anything you wish.

I also made a version of this CSS code that mimics the standard Thesis navigation bar. The code for this version is not listed here, but it is in the zip file.

If you choose to create a file from the code below rather than use the zip file, you must name the file "jqueryslidemenu.css".

/* STYLING FOR THE MULTILEVEL DROPDOWN MENU WITH CSS AND JAVASCRIPT
Produces the green menu as seen on Thesis Demo
Modified and annotated by Mike Nichols - July 10, 2009 
Revised October 4, 2009 */

/* COLOR CHART
#408000	- fern green	- menu strip
						- tabs
#53A502	- medium green	- tab dividers
#006500	- dark green	- submenu item dividers
#007200	- very dark green - tab and submenu item hover state
#80FF00	- lime green	- font hover state
*/

/* Class for Menu */
.slidemenu_class {
	/* font styling */
	font-weight: bold;
	text-transform: uppercase;
	font-size: 1.15em;
	font-family: Verdana, Arial, sans-serif;
	/* menu strip color */
	background: #408000;
	/* menu strip width */
	width: 100%;
}

/* Top level menu tabs */
.slidemenu_class ul li a{
	/* background color of tabs (default state) */
	background: #408000;
	/* font color (default state) */
	color: #FFFFFF;
	/* tab and menu strip height above letters */
	padding-top: .5em;
	/* tab and menu strip depth below letters */
	padding-bottom: .5em;
	/* tab width to right of letters */
	padding-right: .625em;
	/* tab width to left of letters */
	padding-left: .625em;
	/* border between tabs */
	border-right: 1px solid #53A502;
	/* no underline */
	text-decoration: none;
	/* do not change this! */
	display: block;
}

/* Top level link & visited font color */
.slidemenu_class ul li a:link, 
.slidemenu_class ul li a:visited {
	color: #FFFFFF;
}

/* Top level tab background and font color during hover state */
.slidemenu_class ul li a:hover {
	background: #007200;
	/* font color */
	color: #80FF00;
}
	
/* Submenu level items */
.slidemenu_class ul li ul li a {
	/* font styling */
	font-weight: normal;
	font-size: 1.15em;
	font-family: Verdana, Arial, sans-serif;
	/* width of submenu items */
	width: 11em; 
	/* height of submenu items above letters */
	padding-top: .313em;
	/* depth of submenu items below letters */
	padding-bottom: .313em;
	/* border between submenu items */
	border-bottom: 1px solid #006500;
	border-top-width: 0;
	margin: 0;
}

/* Submenu background and font hover colors */
.slidemenu_class ul li ul li a:hover{ 
	background: #007200;
	/* font color */
	color: #80FF00;
}

/* DO NOT CHANGE ANYTHING BELOW THIS LINE! */
/*=========================================*/

/* Top level list - Do not change! */
.slidemenu_class ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* Top level list items - Do not change! */
.slidemenu_class ul li{
	position: relative;
	display: inline;
	float: left;
}

/* First submenu level - Do not change! */
.slidemenu_class ul li ul {
	position: absolute;
	left: 0;
	display: block;
	visibility: hidden;
}

/* All subsequent submenu levels vertical offset after first submenu level - Do not change! */
.slidemenu_class ul li ul li ul {
	top: 0;
}

/* Submenu level list items (undo style from Top level List Items) - Do not change! */
.slidemenu_class ul li ul li {
	display: list-item;
	float: none;
}

/* Down and right arrow images - Do not change! */
.downarrowclass {
	position: absolute;
	top: 12px;
	right: 7px;
}

.rightarrowclass {
	position: absolute;
	top: 6px;
	right: 5px;
}

/* IE6 hack to get sub menu links to behave correctly - Do not change! */
* html .slidemenu_class ul li a { 
	display: inline-block;
}

The functions to put into custom_functions.php

Following are three functions that you place into your custom_functions.php file. The first function links the menu's CSS file into the head of your post/page HTML document. The second function links the required JQuery file and the JavaScript file into the foot of your post/page HTML document.

The third function actually describes your menu items. It consists of simple unordered HTML lists that become a part of the HTML when your page is rendered, so Google and other search bots will index them. If you choose to create a file from the code below rather than use the zip file, you must name the file "for-custom_functions.php".

/* -----------------------------------------------------------------*/
/* FUNCTIONS FOR THE MULTILEVEL MENU WITH CSS AND JAVASCRIPT */
/* Created by Mike Nichols - July 10, 2009 - Revised Oct 4-17, 2009 */
/* -----------------------------------------------------------------*/

/*--------------------------------*/
/* Link menu css in document head */
function slidemenu_head() {
?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo(template_directory)?>/custom/menu/jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /Hack for IE7 and below*/
</style>
<![endif]-->
<?php
}
add_action('wp_head','slidemenu_head');

/*-------------------------------------------------------*/
/* Call JavaScript and JQuery in footer, set arrow paths */
function slidemenu_foot() {
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
var arrowimages={
down:['downarrowclass', '<?php bloginfo('template_url') ?>/custom/images/menu-arrow-down.gif', 23], right:['rightarrowclass', '<?php bloginfo('template_url') ?>/custom/images/menu-arrow-right.gif']
}
</script>

<script type="text/javascript" src="<?php bloginfo(template_directory)?>/custom/menu/jqueryslidemenu.js"></script>
<?php
}
add_action('thesis_hook_after_html','slidemenu_foot');

/*---------------------*/
/* Describe menu items */
function slidemenu(){
?>
<div id="slidemenu_jq" class="slidemenu_class">
<ul>

<!-- First level menu item shows on main menu tab -->
<!-- It is set up as your home tab -->
<li><a href="<?php bloginfo('url');?>">Home</a></li>

<!-- First level menu item with no dropdown -->
<li><a href="#">TAB 2</a></li>

<!-- First level menu item with one dropdown -->
<li><a href="#">TAB 3 WITH 1 DROPDOWN</a>
<!-- this is the dropdown -->
<ul>
<li><a href="#">DROPDOWN 1 ITEM 1</a></li>
<li><a href="#">DROPDOWN 1 ITEM 2</a></li>
<li><a href="#">DROPDOWN 1 ITEM 3</a></li>
<li><a href="#">DROPDOWN 1 ITEM 4</a></li>
</ul>
</li>

<!-- First level menu item with no dropdown -->
<li><a href="#">TAB 4</a></li>

<!-- First level menu item with three dropdowns -->
<li><a href="#">TAB 5 WITH 3 DROPDOWNS</a>
<ul>
<!-- this is the first level dropdown -->
<li><a href="#">DROPDOWN 1 ITEM 1</a></li>
<li><a href="#">DROPDOWN 1 ITEM 2</a>
<!-- this is the second level dropdown -->
<ul>
<li><a href="#">DROPDOWN 2 ITEM 1</a></li>
<li><a href="#">DROPDOWN 2 ITEM 2</a></li>
<li><a href="#">DROPDOWN 2 ITEM 3</a>
<!-- this is the third level dropdown -->
<ul>
<li><a href="#">DROPDOWN 3 ITEM 1</a></li>
<li><a href="#">DROPDOWN 3 ITEM 2</a></li>
<li><a href="#">DROPDOWN 3 ITEM 3</a></li>
<li><a href="#">DROPDOWN 3 ITEM 4</a></li>
<li><a href="#">DROPDOWN 3 ITEM 5</a></li>
</ul>
</li>
<li><a href="#">DROPDOWN 2 ITEM 4</a></li>
</ul>
</li>
</ul>
</li>

<!-- First level menu item with one dropdown -->
<li><a href="#">TAB 6 WITH 1 SUBLEVEL</a>
<!-- this is the dropdown -->
<ul>
<li><a href="#">SUBITEM 1</a></li>
<li><a href="#">SUBITEM 2</a></li>
</ul>
</li>
</ul>
<br style="clear: left" />
</div>
<?php
}
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
/* YOU MUST UNCOMMENT ONE OF THESE ADD_ACTION LINES! */
/* PLACE THE MENU BEFORE THE HEADER */
/*add_action('thesis_hook_before_header', 'slidemenu');*/
/* PLACE THE MENU AFTER THE HEADER */
/*add_action('thesis_hook_after_header', 'slidemenu');*/

The images for the right and down arrows

There are two small image files for the right and down arrows in the menu. They look like this:

Figure 1: The right arrow image
Figure 4: The right arrow image

Figure 2: The down arrow image
Figure 5: The down arrow image

That's it! The following section tells you in detail how to set up the menu.

Setting up the Multilevel Menu with CSS and JavaScript

There are 3 steps for setting up your menu. Each step is not difficult, but the instructions must be followed to the letter. Most of the problems people experience when setting up the menu are because they skip a step or do not follow the directions.

Step 1: Set up a folder and copy files

Figure 6: Custom folder after creating the menu folder and copying files
Figure 6: Custom folder after creating the menu folder and copying files

1. Create a new folder named "menu" in your /custom folder.
2. Copy "jqueryslidemenu.js," "jqueryslidemenu.css" files into the new menu folder. If you downloaded the zip file, they are contained in a folder named "put-these-in-menu-folder." Also included in the zip file is "jqueryslidemenu-thesis.css" which mimics the Thesis standard navigation bar. If you want to try this out, it should go into the menu folder, too.

When you finish your custom folder should look like Figure 6.

Step 2: Upload the arrow images

Upload both arrow images to your /custom/images folder. They are named "menu-arrow-right.gif" and "menu-arrow-down.gif". If you downloaded the zip file, they are both in the folder named "put-these-in-custom-images-folder."

Step 3: Put the three functions into your custom_functions.php file

1. Copy and paste the three functions in the file "for-custom_functions.php" into your custom_functions.php file. It does not matter where these functions go. (Note that the "for-custom_functions.php" file is not uploaded to your server.)
2. At the bottom of the third function are two "add_action" statements. Important: Uncomment the one you want to use -- if you don't the menu will not appear and you will have no menu at all!

You're finished with the setup. Now you're ready to try it out!

How to Set Up Your Menu Items

The menu is just an HTML unordered list with the following structure. Adding menu items is simple, but you have to follow instructions carefully:

Main Menu Tabs
	First Level Dropdown Items
		Second Level Dropdown Items
			Third Level Dropdown Items
				...

1. Basically, you will be doing two things when setting up a menu item: putting in the item's URL, and putting in its menu description. Figure 7 shows a line before it has been set up.

Figure 4: Changing the menu items in the function
Figure 7: Changing the menu items in the function

2. The URL for your menu item replaces the pound sign (#). The description for the menu item -- the word(s) that actually show on the menu -- replace the example words. For example, if I am setting up Thesis Theme Tool's About page, it would look like the when I am finished. Remember that you can put any URL into any menu item:

<li><a href="http://thesisthemetools.com/about/">About</a></li>

3. Adding more menu items follows the same procedure. Just replace the pound sign with your URL and the example description with your description.
4. Note that the first tab is already set up as your home tab. You may change it if you wish.

Figure 5: Nesting of unordered lists in the function
Figure 8: Nesting of unordered lists in the function

5. When editing dropdowns, make sure that you observe the way the lists are constructed: The unordered list for dropdowns come right before the line item's "</li>" tag. This tag is placed after the end of the unordered list. In Figure 8 you will see the nesting of the tags represented by red lines.

Adding a Single Tab Item with No Dropdown

1. Copy a line with no dropdowns, such as the Home page line, "TAB 2" or "TAB 4" lines.
2. Paste the line in the code where you want the menu item to appear.
3. Replace the URL or pound sign with your URL, and the description with your description.

Adding a Single Tab Item with One Dropdown

1. Copy a group of lines with a single dropdown, such as the "TAB 3" or "TAB 6" lines. Be sure to copy all the lines associated with the tab.
2. Paste the lines in the code where you want the menu item to appear.
3. Replace the URLs or pound signs with your URL, and the descriptions with your descriptions.

Adding a Single Tab Item with Multiple Dropdowns

1. Copy a group of lines with a multiple dropdowns, such as the "TAB 5" group. Be sure to copy all the lines associated with the tab.
2. Paste the lines in the code where you want the menu item to appear.
3. Delete any submenus that you don't need. Be sure to delete all the lines associated with the unneeded submenus, but observe the menu's structure and don't delete too many!
4. Replace the URLs or pound signs with your URL, and the descriptions with your descriptions.

Deleting or Rearranging Menu Items

Menu items can be deleted or rearranged easily,
1. Cut the line or group of lines associated with the menu item. Make sure you get all the lines, but be sure you don't cut the lines of other groups! If you are unsure of which lines to cut, take a look at Figure 8 again.
2. If you are moving the menu item, find the place you want it and paste it there.

Usage tips for the Multilevel Menu with CSS and JavaScript

1. The menu lines have been commented and indented in the code to better show you the menu structure. I suggest you not erase these lines to make working with the menu easier.
2. Keep the file "for-custom_functions.php" so you can copy its menu lines when you need them.
3. Be careful about long menu descriptions for dropdowns. If they are too long, they may get cut off in the dropdown.
4. Remember that browsers with JavaScript turned off will only see the main menu tabs. You need to make these main menu tabs point to the more important areas of your site, and/or go to pages that have links to the dropdown's items.
5. If you want to see the version of the menu that mimics the Thesis standard navigation bar:

  • Make sure the "jqueryslidemenu-thesis.css" file is in your /custom/menu/ folder. If it isn't, copy it there.
  • Rename the "jqueryslidemenu.css" in your /custom/menu folder to something like ""jqueryslidemenu-green.css"
  • Rename the "jqueryslidemenu-thesis.css" file to "jqueryslidemenu.css"

This just changes the appearance of the menu. It doesn't change any of the contents of the menu, and all your menu items will still work.

Troubleshooting Your Menu

1. The menu does not appear

You did not uncomment one of the lines at the end of the "slidemenu" function. The look like this:

/* YOU MUST UNCOMMENT ONE OF THESE ADD_ACTION LINES! */
/* PLACE THE MENU BEFORE THE HEADER */
/*add_action('thesis_hook_before_header', 'slidemenu');*/
/* PLACE THE MENU AFTER THE HEADER */
/*add_action('thesis_hook_after_header', 'slidemenu');*/

2. The menu does not appear

Check the file path to the "jqueryslidemenu.js" in the "slidemenu_foot" function. It looks like this:

	<script type="text/javascript" src="<?php bloginfo(template_directory)?>/custom/menu/jqueryslidemenu.js"></script>

There are two main causes for this:

  • You named your menu folder something besides "menu." Just change the "menu" folder in the URL to the name of the folder you created.
  • Your server has a non-standard file setup. The "bloginfo" variable will find most standard Thesis setups, but you may have to put the full file path to the "jqueryslidemenu.js" file into the URL.

3. The menu appears as a vertical list on the left side of the screen

The solution to this problem is almost identical to item 2, above. The reason is because the program is not finding your "jqueryslidemenu.css" file. Check the file path to the "jqueryslidemenu.css" in the "slidemenu_head" function. It looks like this:

	<link rel="stylesheet" type="text/css" href="<?php bloginfo(template_directory)?>/custom/menu/jqueryslidemenu.css" />

Like item 2, there are two main causes for this:

  • You named your menu folder something besides "menu." Just change the "menu" folder in the URL to the name of the folder you created.
  • Your server has a non-standard file setup. The "bloginfo" variable will find most standard Thesis setups, but you may have to put the full file path to the "jqueryslidemenu.css" file into the URL.

4. Nothing happens when I click on a menu item, or all that appears in the browser address is a pound sign

You haven't set up the menu correctly, or you didn't delete unneeded menu items. Review the instructions in the "How to Set Up Your Menu Items" section above.

5. The menu moves too fast for my mouse to go to dropdown items, or the menu "stutters"

Usually this is caused by the JavaScript drawing and undrawing the menu too fast. Go to the "jqueryslidemenu.js" file in your menu folder. At the top of the file are some settings for how fast the menu draws. They look like this:

//Change the duration of the slide in/out animation - in milliseconds
animateduration: {over: 200, out: 100}, 

In particular, you might want to change the "out" parameter to a larger number. It will keep the menu from disappearing before your cursor has a chance to move over it.

6. The menu looks like "slats" in Internet Explorer

Usually this is due to padding and margin issues in the "jqueryslidemenu.css" file. IE interprets these differently from every other browser. Unfortunately, this doesn't happen with everybody's copy of IE -- just on some of them. You may want to experiment with the padding and margin values of the second level selectors to see if it solves your problem.

7. The menu does not let me pull the dropdown all the way down in Internet Explorer

This usually is due to the menu moving too fast for Internet Explorer. Try the solution in item 5, but make both the "in" and "out" variables a larger number.

Remember: rather than copy the files shown in the examples, I recommend you get everything -- all files and the arrow graphics -- in a single zip file. You can download it by clicking here.

I hope you try out the Multilevel Menu with CSS and JavaScript. It works very smoothly, and has been trouble-free for me on Thesis Demo. As always, your comments are welcome. You can also contact me by email by clicking the "Contact" button at the top of the page.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog's community! Leave a comment now, or read the comments.

You can find several related articles in the "Related Articles" list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There's also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It's free and is a great way to make sure you don't miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under "Share This Article With Others" for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!