Tag Archives: 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!

New Menu! Vertical Multilevel Dropdown Menu

You’ve probably noticed the vertical menu at the top of the left sidebar. It is used for supplementary navigation to help you quickly find anything on this site.

It is an example of the Vertical Multilevel Dropdown Menu described in a new tutorial.

You can use the Vertical Menu as your main menu or as a supplement to another menu system. It is completely compatible with beta versions of Thesis 1.6.

The Vertical Multilevel Dropdown Menu offers these outstanding 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)

Why don’t you give the Vertical Menu a try? You’ll find it’s an easy way to draw readers into your site so they stay longer, improving your SEO and page ranking.

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! Create an Element and Place It on the Screen

One of the most frequent tasks in customization is creating a screen element and placing it. It could be an ad, or an image, or an opt-in box. Despite all these different uses, screen elements share a basic setup — and this article shows you how to do it!

Create an Element and Place It on the Screen” first shows you how to set up a basic box with an id in custom.css and a simple function in custom_functions.php. Then it provides you with a real-life example of putting a “Subscribe by RSS” phrase and icon on a Multilevel Dropdown menu bar. The example includes all the code required, plus illustrations showing the various stages of getting the subscribe box into place.

I have lots of interesting and useful articles on tap, some big, some small. For example, a couple of little articles on finding hex color codes and controlling spam with the .htaccess file. Then a larger article on how to build and place two-column sidebar boxes.

On another matter, my Resources tab is empty right now, and may remain so. The DIYthemes Forums have started a new section, “Resources and Tutorials” that does much of what I intended my Resources section to do. Grouped under headings are listed external internet resources for many Thesis subjects, which is exactly what my Resources section is intended to do.

As a basic principle of this site, I have said that I will not duplicate material found elsewhere, so I’m thinking about doing away with the section and finding something else to fill its place.

What do you think?

Create an Element and Place It on the Screen

All Thesis users at some time want to put a new element somewhere on the screen — from an announcement, to ads, to a picture of Spot in the header. Wherever you want to put it, Thesis almost certainly will let you!

The basic principle for creating elements and placing them on the screen is almost always the same two-step process:

1. In custom.css create an id for building the element, and maybe an id or class for styling the contents.

2. In custom_functions.php create a function to hold the box contents, then hook it somewhere.

This tutorial will show you the basics of how to create an element, then provides a real-life example of actually creating an element and placing it on the screen.

Creating the container element in custom.css

First, let’s create the element id, which defines the size and other properties of the box that will hold the content. Note that when you create your own class or id, you do not have to put “.custom” in front of it.

/* create a custom element id */
#custom_element {
	/* width for the box */
	width: 50px;
	/* height for the box */
	height: 60px;
	/* background if desired */
	background: #FFFFFF;
	/* border if desired or for testing */
	border: 1px solid #000000;
	/* padding to keep the contents away from the border */
	padding: 1em 1em 1em 1em;
	/* margin outside box to separate if from other elements */
	margin: 0em 0em 0em 0em;
}

Now a few notes on the code:

1. The width and height are obvious. But make sure that it isn’t larger than the area where you want it to go, otherwise it will hang over the edges! For example, if you make a 600 pixel box for a 550 pixel content column, the box will partially cover the sidebar.

2, If you don’t want a background for the element, either delete the property or comment it out. But the background may be useful in testing, so don’t get rid of it too soon! The color code must in in hex — remember the pound sign!

3. I find a border good for testing placement of the element sometimes, so it’s a good idea to just comment it out if you don’t need it right away. Same instructions for the color code as the background.

4. Padding is useful, especially for text, to keep the contents from bumping against the borders of the box. Remember the padding numbering sequence goes clockwise from the top: top, right, bottom, left. The first number is the top, the second the right, and so on. The numbers can be negative, and can be a decimal, for example “-5.5em”. Positive numbers push the element away, and negative numbers pull it toward them. Always remember to add the “em” or “px” units, or it won’t work!

5. The margin will be used for moving the element around the screen. The numbering sequence and number instructions are the same as for padding.

Creating the function and hooking it to a Thesis hook

The function in custom_functions.php declares the element-building id you just made, and within that, your content. It is followed by a statement that attaches the function to a Thesis hook. The code looks like this:

function custom_content_element() {
?>
	<div id="custom_element">
		PUT YOUR CONTENT HERE
	</div>
<?php
}
add_action('THESIS_HOOK_NAME','custom_content_element');

1. This is a standard Thesis function.

2. Note that we’re going to be using HTML, so PHP needs to be turned off with a “?>” statement at the beginning of the function, and turned back on at the end of the function with a “<?php” statement.

3. The “div” associates the content the function will hold with the container id you created in custom.css. Be sure to close it with a “</div>”.

4. The “PUT YOUR CONTENT HERE” is obvious. It’s where the HTML code goes that makes up the contents of the container you created.

5. Now for the hook statement. Put your Thesis hook where it says “THESIS_HOOK_NAME.” Put the name of the function you just created in the second part of the statement. A good visual reference for the hooks is Roberto Gerola’s site.

That’s all there is to it! It is so simple, yet so powerful that it forms the basis of many customizations in Thesis. Now for a simple real-life example of how it works.

An example of creating, placing, and moving a “Subscribe By RSS” element

A reader asked how to move the “Subscribe” tab on his Multilevel Dropdown menu to the right end of the menu bar. Unfortunately, it can’t be done like it can be with the Thesis nav menu. So I suggested building an element to place the “Subscribe by RSS” where he wanted it. That gave me just the right example for this article that I had been planning.

Put the code into custom.css and also create some styling for the words

Following is the code to do this:

/* RSS in nav bar*/
#subscribe_element {
	/* BOX PROPERTIES */
	/* width for the box */
	width: 13.5em;
	/* height for the box */
	height: 1.65em;
	/* background if desired */
	background: #408000;
	/* border if desired or for testing */
	/*border: 1px solid #000000;*/
	/* padding to keep the contents away from the border */
	padding: 0.25em 0em 0em .5em;
	/* margin outside box to separate if from other elements */
	margin: .3em 0em 0em 10em;
	/* we want the box to float to the right */
	float: right;
	/* TEXT STYLING */
	/* align the text to the left */
	text_align: left;
	/* make the words uppercase */
	text-transform: uppercase;
	/* make the font bold*/
	font-weight: bold;
	/* size of font */
	font-size: 1.15em;
	/* height of line */
	line-height: 1.1em; 
	/* font family if desired*/
	font-family: Verdana, Arial, sans-serif;
	/* cursor a little hand */
	cursor: pointer;
	/* font color */
	color: #FFFFFF; 
}

/* make the link white and no underline */
#subscribe_element a:link { color:#FFFFFF; text-decoration:none; }

/* make the font white when visited, no underline*/
#subscribe_element a:visited { color:#FFFFFF; text-decoration:none; }

/* cursor hovering over element */
#subscribe_element a:hover{ color: #FFFFFF; text-decoration: underline; }

This id definition in custom.css is a handy-dandy all-in-one contraption that defines the box as well as the text that will go in it. I could have written two id definitions — one for the box and one for the text — but I am too lazy.

The code is heavily commented, so I won’t go into detail about the more obvious properties and values. Incidentally, the values are the ones used to build the box in the following illustrations.

The padding property determines the space around the letters or objects inside a box. The margin property moves the box around. Refer to the instructions above about how the padding and margin numbers work.

Create a function in custom_functions.php and hook it to the menu bar

This function contains the code that builds the box, and within that box, the code that links words and an image to a feed URL.

/* RSS in nav bar */
function rss_subscribe() {
?>
	<div id="subscribe_element">
		<a href="http://thesisthemetools.com/?feed=rss2">subscribe by rss</a>
		<a href="http://thesisthemetools.com/?feed=rss2"><img src="http://thesisthemetools.com/wp-content/themes/thesis/images/icon-rss.gif"></a>	
	</div>
<?php
}
add_action('thesis_hook_after_header','rss_subscribe');

1. Notice the div with the id of the “subscribe_element” box and text styling in custom.css. It holds all the HTTP in the function, and the id tells the contents how to behave.

2. There are two similar “href” statements: one is for the word “subscribe” and one is for the RSS icon. Both of them use the Thesis Theme Tools rss URL. (Actually, I use Feedburner, but I wanted to keep it simple.)

3. Note that I’m using an image from the Thesis /images folder, not the /custom/images folder. There is also an email icon in there if you need it.

4. The Thesis hook “thesis_hook_after_header” puts the element right into the nav bar.

Illustrations of positioning the element

Figure 1: Initial positioning of the element
Figure 1: Initial positioning of the element

The “thesis_hook_after_header” hook in custom_functions.php and the “float:right” property in custom.css put the box right into the menu bar. Most of the time, the combination will get you close. If not, try another hook or float it to the other direction.

Notice that I have used the “background: #FFFFFF” property to make the box white so I can see it better as I move it around. Other times I use the border property to see the box, according to the color of the background behind it.

Figure 2: Start moving the box around with the margin property
Figure 2: Start moving the box around with the margin property

I started moving the box down using the “top” value in the margin property. It only took .3em to center it on the bar. Then 10em in the “left” value nudged it a little to the right.

Figure 3: Applying padding to get the words centered
Figure 3: Applying padding to get the words centered

Again, it only took a little pushing to get the words centered in the box: .25em from the top and .5em from the left.

Figure 4: The completed RSS Subscribe box
Figure 4: The completed RSS Subscribe box

Once I got it positioned, I removed the white background and Tah-Dah! there’s the subscribe box in all its glory! You can see it in action on my Thesis Demo site.

I hope you have found this article informative and helpful. Please feel free to comment below, or you can send me an email by using the “Contact” button 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!

Color Individual Tabs on the Thesis Nav Bar

This article applies only to Thesis 1.5.1! If you want to color the individual tabs in the Thesis 1.6 menu, please see the article Color Individual Tabs on the Thesis 1.6 Nav Bar.

Many people want to change the background and font colors of individual tabs in the Thesis navigation bar. It is not a difficult task, and the colors can contribute to the overall color scheme of your Thesis blog.

Figure 1: Standard Thesis navigation bar
Figure 1: Standard Thesis navigation bar

Figure 1 shows the standard Thesis navigation bar before colors have been applied. The nav bar has been truncated so you can see the “Subscribe” word at the right end.

Figure 2: Thesis nav bar after background and font colors are applied
Figure 2: Thesis nav bar after background and font colors are applied

Figure 2 shows the same nav bar after the code below has been applied. Note that tab 6 remains uncolored and that the font colors of it and the “Subscribe” word are the default font color of the nav bar. Tab 5 is selected and has the gray color specified in the example code.

Using the code examples

All the following code goes into your custom.css file. If you want to color more tabs, just cut and paste the 4 lines for any tab and change the tab numbers.

Change the colors as you wish. The colors in the example are default css color words which are rather ugly! Remember that the color values are hex codes that begin with a pound sign (#) and have six numbers and/or letters, for example:

.custom ul#tabs .home-item a { color: #0FA7B3; }

Determining which tab is which

The home tab is always named “.home-item”. Page tabs start numbering with the tab to the right of the home tab, i.e the tab to the right of the home tab is named “page-item-1”. In Figures 1 and 2 it is the “About” tab. The next tab to the right is “page-item-2” (called “Tab 2” in the illustrations), and so on.

Figure 3: Finding the category tab address with Firebug
Figure 3: Finding the category tab address with Firebug

Category page tabs have their own unique way of numbering, and do not follow a logical counting scheme as do pages. The only way to find their address is with the Firebug add-on for Firefox. If you know how to use Firebug, find the “tabs” element. You will see the category tab addresses listed as “cat-item-00” where “00” is the number of the tab element, as illustrated in Figure 3.

If you don’t know how to use Firebug, leave a comment with your site’s URL and I will email your tabs’ names to you promptly.

Change the background and font color of unselected individual tabs

Following is the code to change the unselected background color and font color of the home tab and the four tabs to its right, as shown in Figure 2. Note that there is no code for the fifth and sixth tabs, so they remain uncolored when unselected. However, the fifth tab is selected in Figure 2, so it has the gray color specified in the next section, “Change the tab and font colors of the selected tab.” The last group of lines shows how to change the color of a category tab.

/* Change the home tab unselected color */
.custom ul#tabs .home-item { background: blue; }
/* Change the home tab unselected font color */
.custom ul#tabs .home-item a { color: pink; }

/* Change the about tab unselected color */
.custom ul#tabs .page-item-1 {	background: green; }
/* Change the about tab unselected font color */
.custom ul#tabs .page-item-1 a { color: white; }

/* Change the tab 2 unselected color */
.custom ul#tabs .page-item-2 { background: red; }
/* Change the tab 2 unselected font color */
.custom ul#tabs .page-item-2 a { color: yellow; }

/* Change the tab 3 unselected color */
.custom ul#tabs .page-item-3 { background: pink; }
/* Change the tab 3 unselected font color */
.custom ul#tabs .page-item-3 a { color: blue; }

/* Change the tab 4 unselected color */
.custom ul#tabs .page-item-4 { background: yellow; }
/* Change the tab 4 unselected font color */
.custom ul#tabs .page-item-4 a { color: green; }

/* Change a category tab unselected color */
.custom ul#tabs .cat-item-00 { background: yellow; }
/* Change a category tab unselected font color */
.custom ul#tabs .cat-item-00 a { color: green; }

Change the tab and font colors of the selected tab

You can change the background and font colors of the selected tab, too. In Figure 2, the fifth tab is selected, so it has the gray background and aqua font color of the example below. Both regular pages and category pages need to be changed.

/* Change the color of the currently selected tab (pages and category pages) */
.custom ul#tabs li.current_page_item { background: gray; }
.custom ul#tabs li.current-cat { background: gray; }
/* Change the font color of the currently selected tab (pages and category pages) */
.custom ul#tabs li.current_page_item a { color:aqua; }
.custom ul#tabs li.current-cat a { color:aqua; }

Change the tab and font colors when the cursor hovers over it

The background and font color of a tab can be changed when the cursor hovers over it. You can also change other properties, such as underlining and bold, with additional code.

/* Change the color of a tab when the cursor hovers over it */
.custom ul#tabs li a:hover { background: white; }
/* Change the font color of a tab when the cursor hovers over it */
.custom ul#tabs li a:hover { color: black; }

I hope this article has been helpful to you! Remember that you are invited to make a comments. You can also send me an email by clicking the “Contact” button in the nav bar.

©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!

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!

Two New Menu System Tutorials for You!

I‘m proud to say that new articles on two different kinds of menus/submenus are up! They’re

I use the Button Bar for the main navigation of Thesis Themes Tools, with the Contextual Menu right under it. Right now, the best places to see them in action are under the “About” or “Tricks” buttons.

The Button Bar is composed entirely of images, with both a selected and an unselected state. You can have any kind of document in the Button Bar in any order you choose, unlike the Thesis nav menu. It can be used either as a main menu substitute for the Thesis navigation bar, or as a submenu.

The Contextual Submenu displays as a strip below the main menu, and changes according to the current menu item. Both of these menuing systems are easy to use and implement, and offer many possibilities for user-friendly navigation.

Take a look at these interesting and functional menuing systems! I’m sure they can enhance your site!

Tutorial: Image Button Bar Menu/Submenu

There are several menu alternatives to the standard Thesis navigation menu. One of them is the Image Button Bar Menu/Submenu, which can either be used as the main navigation — as it is on this site — or as a submenu to the Thesis nav bar, as it is on Jamie Ridler’s site.

The Button Bar is simple to set up and use. Each button has a selected and unselected image. The Button Bar can handle a home/front page, pages, posts, category pages, and tag pages. In conjunction with the Contextual Menu, it can handle parent/child page relationships, as well.

The code to put in custom_functions.php

Following is the code you put into your custom_functions.php file. Read the code comments and the description which is below the code. Values in UPPERCASE must be replaced:

/* =====IMAGE BUTTON BAR MENU/SUBMENU===== */
/* No buttons selected. 
All buttons are unselected. All button images are unselected versions. */
function button_nav_menu_none_selected() {
?>
	<div id="button_nav">
		<ul>
			<li><a href="URL-PAGE-1"><img src="FULL-PATH-TO-UNSELECTED-BUTTON-IMAGE1" alt="PAGE1-NAME"</a></li>
			<li><a href="URL-PAGE-2"><img src="FULL-PATH-TO-UNSELECTED-BUTTON-IMAGE2" alt="PAGE2-NAME"</a></li>
		</ul>
	</div>
<?php
}
/* Page 1 button is selected. 
Page 1 button is selected version, Page 2 button is unselected version */
function button_nav_menu_PAGE1_selected() {
?>
	<div id="button_nav">
		<ul>
			<li><a href="URL-PAGE-1"><img src="FULL-PATH-TO-SELECTED-BUTTON-IMAGE1" alt="PAGE1-NAME"</a></li>
			<li><a href="URL-PAGE-2"><img src="FULL-PATH-TO-UNSELECTED-BUTTON-IMAGE2" alt="PAGE2-NAME"</a></li>
		</ul>
	</div>
<?php
}

/* Page 2 button is selected.
Page 1 button is unselected version, Page 2 button is selected version */
function button_nav_menu_PAGE2_selected() {
?>
	<div id="button_nav">
		<ul>
			<li><a href="URL-PAGE-1"><img src="FULL-PATH-TO-UNSELECTED-BUTTON-IMAGE1" alt="PAGE1-NAME"</a></li>
			<li><a href="URL-PAGE-2"><img src="FULL-PATH-TO-SELECTED-BUTTON-IMAGE2" alt="PAGE2-NAME"</a></li>
		</ul>
	</div>
<?php
}

/* Determines which button version to use. */
/* Example is for pages only. Other kinds of documents below. */
function button_nav_menu() {
	/* For pages only: The first button is selected */
	if (is_page('PAGE1-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');
	/* For pages only: The second button is selected */
	elseif (is_page('PAGE2-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE2_selected', '90');
	/* Defaults to no buttons selected */
	else
		add_action('thesis_hook_after_header', 'button_nav_menu_none_selected', '90');
}
add_action('thesis_hook_after_header', 'button_nav_menu');

	/* =====SAMPLE STATEMENTS FOR OTHER KINDS OF DOCUMENTS===== */
	/* Add or substitute these in Function 4 as needed */
	/* For both blog home pages and static front pages only */
	/*elseif (is_front_page())
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');*/
	/* For posts only */
	/*elseif (is_single('POST-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');*/
	/* For category pages only */
	/*elseif (is_category('CATEGORY-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');*/
	/* For tag pages only */
	/*elseif (is_tag('TAG-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');*/

There are four functions provided, enough for two buttons.

Function 1 is the unselected state for all buttons, that is, no button has been selected.
1. There need be only one of this function for all buttons.
2. There needs to be one “<li>” statement for each button, so if you have 5 buttons, there will be 5 statements.
3. For each “<li>” statement you will need to provide a URL to the page, the full path to the unselected button, and a page name (for page identification as well as SEO).

Functions 2 and 3 show selected states for 2 different buttons. In function 2 the first button is selected, and in function 3 the second button is selected.
1. There needs to be one of these functions for each button, so if you have 5 buttons, you will have 5 functions.
2. Rename the function to reflect the page it is for. For example, if the page is about red things, name the function “button_nav_menu_red_selected”
3. Like Function 1, you need one “<li>” statement for each button, so if you have 5 buttons, there will be 5 statements.
4. Like Function 1, for each “<li>” statement you will need to provide a URL to the page, the full path to the unselected button, and a page name (for page identification as well as SEO).
5. Make sure that you provide the image path to the one selected button that the function is handling.

Function 4 determines which button version is the right one to use, based on the current page. The example is just for pages, but other kinds of documents can be used (see below).
1. There is only one of these functions for all buttons.
2. In this example, there are 2 buttons for pages, so we have 3 statements: button 1 selected, button 2 selected, and no buttons selected.
3. Add 1 “elseif” pair of statements (consisting of the “elseif” statement and the “add_action” statement) for each button above 2 that you have.
4. Change the PAGE1-NAME in the “elseif” statement. It’s the actual title of the page as you see it in your blog. For example, if the page displays as “Red Page” then the page name is “Red Page.”
5. Change the function name in the “elseif” statement to that of the page function being called. Following the example above, the red page function would be changed to “button_nav_menu_red_selected”.

Below Function 4 are sample statements for other kinds of documents the Image Button Bar Menu/Submenu can handle: home/front pages, posts, categories, and tags. Of course, the home/front page statements would be used only when the button bar is used for the main menu. Add or substitute statement pairs in Function 4 as needed. Note that you must match the elseif statement pair with the document type! A page is not a post is not a category is not a tag!

The code to put in custom.css

The following code should be put into your custom.css file. Read the code comments and the description which is below the code:

/* =====IMAGE BUTTON BAR MENU/SUBMENU===== */
#button_nav {
	list-style: none; 
	/* optional background color */
	/*background:#FFFFFF none repeat scroll 0 0;*/
}

#button_nav ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	/* determines vertical and horizontal placement*/
	margin: -1em 0 -.4em .26em;
}

#button_nav li {
	display: inline;
	/* uncomment border for testing*/
	/*border: 1px solid #000000;*/
	/* determines size of button box*/
	padding: 1.1em -.5em 0em -.5em;
	/* determines spacing between button boxes*/
	margin: 0 -.4em 0 0;
}

There are few adjustments to be made in the css code, mainly vertical alignment, and adjustments to get the button box size right. The code comments tell you where to do this. The values in the code are for this site.

Tips for getting it all working:

1. Go ahead and make button images for the button menu, or at least right-sized dummies to work with. Remember that you need to have 2 button images for each button: selected and unselected.
2. Complete Function 1 first. It contains all the lines for your buttons in their unselected state.
3. Cut-and-paste the button lines from Function 1 into Functions 2 and 3. Then just change the selected button image URL according to which function it is.
4. If you need more than 2 buttons, just copy the entire function 1, rename it, and change the URL of the selected button.
5. I suggest uncommenting the “border” property line while you’re working on button box size. It will display a black border around the button box. Note that the button box will always be a little larger than the button image. Delete the “border” property line or comment it out when you are finished.

I hope these instructions have been clear and helpful. And I hope you are encouraged to use the Image Button Bar Menu/Submenu in your next project! As always, your comments and questions are welcome, either here in the article comments, or by emailing me via 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!