Tag Archives: Plugins

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!

New Article! WordPress Plugins I Use

I wish I had a dime for every time I’ve been asked which WordPress plugins I use on my sites, or which plugin I would recommend for a particular function! It’s a kind of shoptalk, like discussing sauces between chefs. And it’s a great area of mystery for newbies.

A new article, “WordPress Plugins I Use,” lists the plugins I use on my sites. It has a short description of why I use each, along with a link to a place where it is being used, if relevant. To finish it off, I rate each plugin according to its usefulness to a site.

Now all I have to do is to point people to the article and save my voice — or my fingers!

WordPress Plugins I Use

electrical-plug-symbol-250x250

A constant question on the DIYthemes Forums, and I one that I often get, is what plugins are recommended for a Thesis site. This article lists the plugins I use on my sites and tells why I use them.

Though I can’t claim to have tried every plugin available for a given purpose, I’ve investigated most of them, and have settled on the ones listed here. They all play nice with Thesis, obviously. Note that I’ve labeled most of them “Nice to have,” which is not damning them with faint praise, but means that if you want a particular feature, this is the plugin I recommend.

Akismet comes with your WordPress installation. It keeps spam off your blog, period. Essential

cformsII — For your contact page and other forms, I believe that cformsII can’t be beat. It’s highly configurable, you can change the styling of the forms using css, and custom work is saved when the plugin is upgraded. Click on the “Contact” button in the button bar to see it in action. Highly recommended

CommentLuv — Shows the last post of commenters, rewarding your readers and encouraging more comments. It’s easy to set up and use. Check out this comment in Anxiety, Panic & Health to see it in action. Nice to have

CyStats — Provides very detailed real-time statistics for your blog from the Admin panel. See more information about CyStats in the article Statistics Plugins and Services I Use. If you’re interested in your stats and can have only one plugin, this is the one to get. Highly recommended

Dagon Design Sitemap Generator — Generates a fully customizable sitemap based on categories. I use it in Anxiety, Panic & Health in the “Categories” tab of the nav bar. Not used on this site because all of the articles are pages, which don’t have categories. Nice to have

Google Analytics for WordPress — Not really an SEO plugin, its sole purpose is to assist in using Google Analytics on your site. It does things like blocking the administrator from being counted in statistics, something that would have to be coded otherwise. Nice to have

Google XML Sitemaps — The only SEO plugin I use, since Thesis does the rest. Generates a sitemap just for Google ‘bots, which can then be told to use it in Google Webmaster Tools. Highly recommended

My Tag Cloud — Is somewhat inaccurately named, because it creates a widget that lists tags, rather being a tag cloud (which I dislike). I use it in the sidebar on Anxiety, Panic & Health, and in the footer on this site. Nice to have

Similar Posts — Puts a list of related posts at the bottom of your posts, encouraging readers to dig deeper into your site. I like this one the best of all the ones I tried: simple but effective, and you don’t have to enter special tags at the ends of posts. It’s the one I use on Anxiety, Panic & Health, since most of the content is posts. However, I use Simple Tags for this site (see below). Nice to have

Simple Tags — A complete tagging system that allows tagging of pages as well as posts. The plugin has a lot of features that are not available elsewhere, such as editing tags. It also will put a “related posts” list at the end of pages that includes tagged pages, something that no other plugin will do. This is the plugin I use on this site for related posts, as well as for tagging pages. Nice to have

Sociable — Puts a configurable list of social media sites at the end of your post or page. I’ve tried and used several similar ones, but I like this one best because it only shows sites I have selected. Nice to have

Subscribe to Comments — Adds a checkbox to the end of posts that lets your readers be notified when a new comment is made. Lots of my readers use this. Nice to have

Thesis OpenHook — Thesis-specific plugin that lets you edit your custom files, and simplifies the modification of your site. You can simply drop code copied from the Forum into one of the OpenHook hook areas, and it will work without your having to touch the custom files. Nice to have if you need it

WordPress.com Stats — Shows a graph of your real-time site stats on your Admin page, along with an overview of a number of important metrics. Not as accurate as CyStats, but shows you the trends at a glance. For more information about WordPress.com Stats, see the article Statistics Plugins and Services I Use. Nice to have

WP-DBManager – This plugin performs a number of important WordPress database functions, such as management, optimization, repair, and queries. Most importantly for me, it emails me a backup of my sites’ database daily. Highly recommended

WP Twitip ID — Allows your commenters to add their Twitter id and have it displayed in their comments. See it at work on Anxiety, Panic & Health.- Nice to have

YAFootnotes — I write a lot of footnoted articles on Anxiety, Panic & Health, and this plugin allows me to work in the accepted manner of researchers, scientists and other writers while creating the text. It then presents the footnote list in the style of printed publications, unlike every other footnote plugin I know of. See it at work in this article — check out the footnotes in the text and the footnote list at the end. Nice to have if you need it

As always, your comments are welcome! I’d be particularly interested in hearing about the plugins you use and why. Remember you can email me directly using the “Contact” button in the button 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!