Tag Archives: CSS Multilevel Dropdown Menu

Another New Menu! CSS Multilevel Dropdown Menu!

I just love menuing systems, and have posted my fifth one for your enjoyment.

It’s a CSS-only Multilevel Dropdown Menu, meaning that there is no JQuery, no JavaScript, and no plugin. That’s right — you can now have a multilevel dropdown menu at the same time as all of your favorite plugins like Featured Content Gallery.

Another big plus is that this menu is completely compatible with all major Windows and Mac browsers, including the notoriously hard-to-please Internet Explorer 6.

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.

Why would I be releasing a dropdown menu when the new Thesis 1.6 has them? Easy: mine does more than the Thesis menu! Here are three big differences, although there are many more:

  • You can put any URL in any menu position — there’s no restrictions or rules and no need to worry about parent-child relationships. You can mix and match pages, posts, category pages, and offsite URLs in any order you want them.
  • This menu has four levels with one dropdown and two flyouts. The Thesis menu has only a single dropdown.
  • This menu is more customizable. It can be customized in literally hundreds of combinations with an easy-to-use CSS file. It can even be made to look like the Thesis menu!

So why not give it a try-out on your site? It takes only a few minutes to set up and will enhance the looks and navigability of your blog greatly!

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!