Make a WordPress Vertical Menu

Make WordPress Vertical MenuIn this tutorial I’ll not only show you how to make a WordPress Vertical Menu, but also how to do so on any website. It is cross browser as well.

I also show you how to do all kinds of neat things with JQuery! All of the following functions are covered : has(), mouseover(), mouseout(), offset(), closest(), attr(), find(), and much more.

I hope you like it and of course all of the code follows the video.

Leave any comments or tutorial requests below. If you like this video share it with others

Code From the Video

<title>JQuery Vertical Menu</title>
<script type="text/javascript" src=""></script>

<style type="text/css">

/* div that surrounds the whole menu */
.art-blockcontent-body ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px arial;
width: 180px; 

/* Top level menu styling */
.art-blockcontent-body ul li a{
display: block;
overflow: auto; /* Fixes an IE problem */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;

/* Define default background for menu items */
.art-blockcontent-body ul li a:link, .art-blockcontent-body ul li a:visited, .art-blockcontent-body ul li a:active{
background-image:url('./images/horzmenuitem.png'); /*background of tabs (default state)*/

/* Define hovering background for menu items */
.art-blockcontent-body ul li a:hover{
color: #000;

/*Sub level menu items */
.art-blockcontent-body ul li ul{
position: absolute;
width: 180px;
top: 0;
visibility: hidden;


<script type="text/javascript">

$("document").ready(function() {

// Function triggered when mouse hovers over a menu item
// Looking for a LI item that has a UL for a child element
// If it does trigger the function on mouseover
$('#sidebarmenu li a').parent().has('ul').mouseover(function() {
	// offset() returns the top & left relative position on the doc for LI
	tagOffset = $(this).offset();
	/* I use the following to get the tag name for this 
	getTagName = $(this).get(0).tagName;
	alert(getTagName); */
	// Get distance from the left for the LI
	offsetLeft = tagOffset.left;
	// Get distance from the top for the LI
	offsetTop =;
	// Move the new popup 180px to the left (Width of parent UL) 
	popOutOffsetLeft = offsetLeft + 180;
	// Get the id for the first UL contained in the LI
	closeParent = $(this).closest("ul").attr("id");
	// Checking if the UL is a second level of third level popup menu
	if (closeParent == 'sidebarmenu')
		// Make menu visible and move it into position on the document
		$(this).find('ul').first().css({'visibility' : 'visible', 'left' : popOutOffsetLeft + 'px', 'top' : offsetTop + 'px'});
	} else {
		// Find offset for the UL that surrounds the third level popup
		secondOffset = $(this).find('ul').last().parent().offset();
		// Subtract the top offset from the second menu to position properly
		secondOffsetTop = - offsetTop;
		// Correct the positioning on offset left
		secondOffsetLeft = offsetLeft - 10;
		// Make menu visible and move it into position on the document
		$(this).find('ul').last().css({'visibility' : 'visible', 'left' : secondOffsetLeft + 'px', 'top' : secondOffsetTop + 'px'});

// When the mouse moves off the menu hide everything
$('#sidebarmenu li a').parent().has('ul').mouseout(function() {
	$(this).find('ul').css({'visibility' : 'hidden'});




<div class="art-blockcontent-body"> 
<ul id="sidebarmenu">
<li class="cat-item"><a href="#">Stuff</a>
<ul class='children'>
	<li class="cat-item"><a href="#">About Me</a>
	<ul class='children'> 
	<li class="cat-item"><a href="#">Where I Live</a></li>
	<li class="cat-item"><a href="#">Directions</a></li>
	<li class="cat-item"><a href="#">History</a></li>
	<li class="cat-item"><a href="#">Contact Me</a></li>
<li class="cat-item"><a href="#">Recipes</a>
<ul class='children'>
	<li class="cat-item"><a href="#">Less Than 100 Calories</a></li>
	<li class="cat-item"><a href="#">Less Than 200 Calories</a></li>
	<li class="cat-item"><a href="#">Less Than 300 Calories</a></li>
	<li class="cat-item"><a href="#">Less Than 400 Calories</a></li>
<li class="cat-item"><a href="#">Web Design</a>
<ul class='children'>
	<li class="cat-item"><a href="#">HTML Tutorial</a></li>
	<li class="cat-item"><a href="#">CSS Tutorial</a></li>
	<li class="cat-item"><a href="#">JavaScript Tutorial</a></li>
	<li class="cat-item"><a href="#">JQuery Tutorial</a></li>
	<li class="cat-item"><a href="#">PHP Tutorial</a></li>
<li class="cat-item"><a href="#">Marketing</a>
<ul class='children'>
	<li class="cat-item"><a href="#">Flyers</a></li>
	<li class="cat-item"><a href="#">Brochures</a></li>
	<li class="cat-item"><a href="#">Radio</a></li>
	<li class="cat-item"><a href="#">Business Cards</a></li>
	<li class="cat-item"><a href="#">Direct Mail</a></li>
<li class="cat-item"><a href="#">Forum</a>
<ul class='children'>
	<li class="cat-item"><a href="#">Login</a></li>
	<li class="cat-item"><a href="#">Register</a></li>
	<li class="cat-item"><a href="#">Forgot Password</a></li>


IE Conditional Stylesheets

I also received a request on how to perform styling just for those using Internet Explorer. You use what is called a Conditional Style Sheet. This is the code you would use to use special CSS code on IE only browsers.

<!-- To target all IE Browsers use the following code in your header after the first stylesheet reference -->
<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="ie-browsers.css" />

<!-- To target non-IE Browsers use this -->
<!--[if !IE]><!-->
        <link rel="stylesheet" type="text/css" href="non-ie.css" />

<!-- To target IE version 7 Browsers -->
<!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="ie7.css">

<!-- To target IE Browsers lower than 7 -->
<!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="ie6-and-under.css" />

Till Next Time

Think Tank

29 Responses to “Make a WordPress Vertical Menu”

  1. Hi, nice video again!
    Did u miss u to attach the images besides the code or weren’t they supposed to available?


    • admin says:

      Thank you. I’m glad you liked it. I’m not sure what images you mean? There aren’t any images in the vertical menu. You can use the code in anyway you’d like. All my stuff is 100% free under the gnu license.

  2. Polder says:


    Christof ment:
    horzmenuitem.png and horzmenuhover.png

    for my 2cts


  3. David F says:

    Derek, thanks as always for a great tutorial!!
    I didn’t know it was this easy to have dynamic vertical menus in wp 3.0
    however after putting the navigation inside a locked layout, where the pagewrapper has auto margin on left and right, i encountered a slight problem… basically the third level sub menus were offset differently depending on the size of my browser window on the screen..

    this is what i originally wanted to ask about, but after some research on the jquery site i found that while .offset is global, the .position operator in jquery is relative to it’s parent… so i replaced all the .offset in your code with .position and after tweaking the second offset number to add +180 px instead of -10, it worked perfect again..

    i guess what i’m asking is: would you reckon this is a good way of doing it? or am I causing other problems that I can’t see at the moment?

    thanks again! cheers. david

    • admin says:

      It sounds like you found a fabulous solution πŸ™‚ Thank you for sharing it. The only thing I could add is to make sure the site looks the same on every browser and then change the style sheets to get a consistent result

      • David F says:

        cool thanks! actually what I just discovered which i can’t seem to figure out is that the the hover states now aren’t supported on iPhone/iPad..

        this took me a bit by surprise as I’m using the exact same way to register the menu in WP as you use in your Horizontal WP menu tutorial, and also haven’t done any changes to the css which you used in the vertical menu.

        what’s happening in the vertical menu is that once you click on a top level menu-item the page reloads instead of showing submenu-items. in your horizontal menu the submenu-items pop out when top level is clicked first time, without any tweaks to your code.

        i’ve been looking through the horizontal menu css to try to find what makes it work there, but not really sure what’s going on. i thought WP would take care of that :s

        would it be the jQuery in the vertical menu being the culprit? any pointers?

        sorry for the long-winded questions… thanks!! david

        • admin says:

          Yes iDevices seem to conflict with JQuery in some ways. Buttons don’t always work, sometimes scrolling works, etc. I hope the JQuery people find a work around for this, but the answer you get from the touch interface people is to create a website specifically for their devices. Hopefully WordPress will find a work around as well?

          That’s the reason why programmers can never stop learning. I’ll provide a work around if I can find a simple one

  4. krasimir says:

    Can you give a link for button background image downloading? I mean /’horzmenuitem.png”/ like is in your tutorial.

    Many thanks.

    • admin says:

      Those images don’t really exist. I just put that code in there so people would know how to place an image if they wanted to use one. I normally don’t use images in a menu

  5. Xavier says:

    Hi Derek, I loved your tutorial, I just have a question, is there a way this menu could work with the menus you create in WordPress? So if my clients want to add one page on their site, this link would be added to my vertical menu authomaticaly?

    • admin says:

      Thank you πŸ™‚ WordPress makes you create the custom menu and hence anytime you add a new page you have to update that menu. I can’t think of an easy way around that just now. I’ll look into it

  6. Robb says:

    I was trying to find the code for your site. I would like to use that as my template for my real estate agent site. Are you allowing that to be downloaded?

    • admin says:

      Sure you can have it. It is a little odd because it wasn’t really made to be a normal theme, but instead was made to show how to make a bunch of things like plugins and other stuff. The code is in this tutorial WordPress Theme Tutorial If everything isn’t there, tell me and I’ll pull everything together. Everything is in one zipped archive as far as I can remember

  7. ikampyla says:

    Dear Mr Derek Banas,
    i really liked your video…and found it useful…

    Although i tried using it in twentyeleven WP theme and didn’t work…

    I made a vertical menu using custom menus functionality of WP and then applied CSS and JS. As this didn’t work I wrote the code for the menu by myself just like in your video.

    Any help would be welcome,

    • admin says:

      What are you seeing on your screen? You should at the very least be seeing a table with the links in it. Give me a bit more info on that and errors and I’ll see if I can figure it out

      • ikampyla says:

        Dear Mr. Banas,
        sorry for not replying sooner..
        the problem was solved by replacing “$” with “jQuery”. πŸ™‚

        In case someone needs it…in wp_nav_menu i used the paremeter $container_class with the value “art-blockcontent-body”…also when you name your menu e.g. sidebar-menu, the ul the surrounds the whole menu gets an id with the prefix menu e.g. menu-sidebar-menu…

        Thanks again for the tutorial, it really helped a lot!

  8. polyxan says:

    Hi Derek,
    Great job.Also the way you speak makes the thing understand more like a friendly chat where you concentrate .
    I was up to give up to learn making website but after your Youtube tutorial i changed my mind and i uploaded the Blank Theme 1 created by chris coyie.
    Can you please tell me where is that file of wp.content you selected from the wp folder i can’t find that file there,can you please help me to find out and go further.
    A big Bravo what you are doing.

    • Giak says:

      Hi Derek,
      Great job.Also the way you speak makes the thing understand more like a friendly chat where you concentrate .
      I was up to give up to learn making website but after your Youtube tutorial i changed my mind and i uploaded the Blank Theme 1 created by chris coyie.
      Can you please tell me where is that file of wp.content you selected from the wp folder i can’t find that file there,can you please help me to find out and go further.
      A big Bravo what you are doing.

    • admin says:

      Thank you very much πŸ™‚ I’m glad to have been of help to you. The wp-content folder is in the main WordPress installation. It is in the same folder as wp-admin. If you don’t see it you may need to reinstall wordpress. Maybe something went wrong with the installation. If I’m missing anything please tell me and I’ll see if there is anything else I can do

  9. jd says:

    will u plz tell me how to add that menu in wordpress theme

  10. ady says:

    hi. i am a beginer. where do i have to write the jquery code? in what document?

  11. catherine clancy says:

    Hi I’ve tried this repeatedly. I cant get the fly out to work?? Any assistance would be great. I’ve done it step by step then given up and I’ve just copied your code directly and it still won’t work ?? What can I be missing.. thanks

  12. Laurence Quinn says:

    Hey Derek

    I have covered HTML and CSS in depth and had originally ignored the wordpress tutorials but looking at this page (linked in a comment from a CSS tutorial) it looks very nice.

    How do you suggest I proceed? I think HTML, CSS, Javascript, jQuery, WordPress?


    • Derek Banas says:

      Hey Laurence,

      Yes I love WordPress. You need a great understanding of HTML and CSS. Most of the PHP is just cut and paste codes, so you don’t have to be a PHP genius by any stretch. JavaScript is nice, but not required for the most part unless you want to make animated slide shows and such.

      After you learn WordPress putting together a secure site is a one day versus a one month project.

      • Laurence Quinn says:

        I really appreciate the responses. The story about your security system was really neat. I’ll get to work πŸ˜‰

Leave a Reply

Your email address will not be published.