Themeforest

WordPress Tutorial – Create Your own Custom Vertical Mega Menu

Custom Vertical Mega Menu

In our last menu tutorial we looked at creating a custom style sheet for the mega drop down menu plugin. Today we are going to go through the jQuery Vertical Mega Menu Plugin and how we can use the plugin’s built in CSS classes combined with the inherent WordPress menu classes to create a completely customised menu.

The sample CSS file in the demo can also be used as a template for your own WordPress vertical mega menu styles:

View Final Menu DemoDownload source code

This tutorial assumes that you understand at least the basics of CSS and HTML, know how to create a custom menu using the admin system in WordPress 3.0 and, of course, use our Vertical Mega menu plugin as some of the CSS selectors are specific to this plugin.

The Objectives

For the tutorial we will create a mega menu for a store selling sports clothing/equipment. In addition to the basic minimum styles required to create the vertical mega menu we will add a drop-shadow to the menu container and also customise all 3 of the sub-menus.

Footwear Custom Menu

For this menu we will customise each row to add labels showing Mens/Ladies as well as add background images for each of the product groups.

Footwear Custom Menu

Jackets Sub-Menu

Usually the mega menu works best with 3 levels of navigation. The jackets sub-menu gives an example of how you can still customise the mega menu with only 2 menu levels.

Jackets Custom Menu

Sports Bags Sub-Menu

Add background images to each sub-menu.

Sports Bags Custom Menu

Creating The Vertical Mega Menu

The Basic Mega Menu CSS

The following CSS code gives the minimum styling required to create the standard mega menu structure without any specifc styles for the menu options. Using this code our menu looks like this:

Basic Mega Menu

View Basic Mega Menu Demo

Still mega but definitely not as pretty!

The CSS contains notes on any essential styles

/* Main menu styling */
.dcjq-vertical-mega-menu .menu li a {
display: block;
color: #000;
padding: 11px 38px 11px 25px;
text-shadow: 1px 1px 1px #fff;
text-decoration: none;
border-bottom: 1px solid #999;
background: url(images/bg_nav.png) repeat-x 0 0;
}
.dcjq-vertical-mega-menu .menu li a:hover, .dcjq-vertical-mega-menu .menu li.mega-hover a {
background-position: 0 -40px;
color: #fff;
text-shadow: 1px 1px 1px #000;
}

/* Add arrow icon to parent links */
.dcjq-vertical-mega-menu .menu li a.dc-mega {
position: relative; /* Required since icons are positioned absolutely */
}
.dcjq-vertical-mega-menu .menu li a .dc-mega-icon {
display: block;
position: absolute;
top: 14px;
right: 15px;
width: 6px;
height: 8px;
background: url(images/arrow_right.png) no-repeat -6px 0;
}
.dcjq-vertical-mega-menu .menu li a:hover .dc-mega-icon, .dcjq-vertical-mega-menu .menu li.mega-hover a .dc-mega-icon {
background-position: 0 0;
}

/* Mega menu container */
.dcjq-vertical-mega-menu .menu li .sub-container {
position: absolute; /* Required */
overflow: hidden;
background: url(images/bg_menu.png) no-repeat 100% 100%; /* Add the drop shadow image */
padding: 0 13px 17px 0; /* Padding for drop shadow */
}
.dcjq-vertical-mega-menu .menu li .sub-container .sub {
border: none;
padding: 15px 15px 5px 15px;
background: #fff url(images/bg_grad_top.png) repeat-x 0 0;
border-top: 1px solid #ccc;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-left: 1px solid #ccc;
}
.dcjq-vertical-mega-menu .menu li .sub .row {
width: 100%; overflow: hidden; /* Required to clear floats for each row */
}
.dcjq-vertical-mega-menu .menu li .sub li {
float: none;
width: 160px; /* Set sub-menu width */
font-weight: normal;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr {
float: left; /* Required */
margin: 0 5px 10px 5px;
}
.dcjq-vertical-mega-menu .menu li .sub a, .dcjq-vertical-mega-menu .menu.left li .sub a {
background: none;
border: none;
text-shadow: none;
float: none;
color: #000;
display: block;
text-decoration: none;
font-size: 0.9em;
margin-bottom: 0;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a { /* Sub-menu headings */
background: url(images/bg_nav.png) repeat-x 0 -40px;
padding: 5px;
margin-bottom: 5px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #000;
text-align: center;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
text-shadow: none;
}
.dcjq-vertical-mega-menu .menu .sub li.mega-hdr li {
margin-bottom: 3px;
}
.dcjq-vertical-mega-menu .menu .sub li a {
padding: 3px 3px 3px 15px;
background: url(images/bullet.png) no-repeat 3px 8px;
font-weight: normal;
text-transform: capitalize; font-size: 12px;
}
.dcjq-vertical-mega-menu .menu .sub li a:hover {
color: #fff;
background: #000 url(images/bullet_white.png) no-repeat 5px 8px;
}
.dcjq-vertical-mega-menu .menu .sub ul li {
padding-right: 0;
}

/* Styling for menu items with only 2 levels */
.dcjq-vertical-mega-menu .menu li .sub-container.non-mega .sub {
padding: 10px;
background: #fff;
}
.dcjq-vertical-mega-menu .menu li .sub-container.non-mega li {
padding: 0;
margin: 0;
width: 150px;
float: none;
}

Custom Styling

In order to customise the menu you will need the menu item ID’s that WordPress automatically assigns to the HTML list items. To get these you can view the source code for the menu in your own site. The ID follows the format “menu-item-#”, where # is a unique number assigned by WordPress.

It can get a little confusing wading through the source code so it’s best to work out first which items need to have additional CSS rules. The list items that will be customised and their ID’s in our demo are:

  • Footwear (ID menu-item-1) – For adding the “Mens” & “Ladies” labels to the rows
  • Nike Mens (ID menu-item-4)
  • Adidas Mens (ID menu-item-6)
  • Gola Mens (ID menu-item-7)
  • Nike Ladies (ID menu-item-8)
  • Adidas Ladies (ID menu-item-10)
  • Gola Ladies (ID menu-item-11)
  • Jackets (ID menu-item-2) – Overide the standard styling for only 2 levels of navigation
  • Jacket 1 (ID menu-item-12)
  • Jacket 2 (ID menu-item-13)
  • Jacket 3 (ID menu-item-14)
  • Sports Bags (ID menu-item-3) – Add padding to top of all bag sub-menus
  • Golf Bags (ID menu-item-15)
  • Sports Bags (ID menu-item-17)
  • Tennis Bags (ID menu-item-18)

Custom CSS For Footwear

/* Footwear */
.dcjq-vertical-mega-menu .menu li#menu-item-1 .sub .row {
padding: 10px 10px 0 40px; /* Pad the rows to add the background labels */
margin-bottom: 10px;
border: 1px solid #ccc;
background: url(images/mens.png) no-repeat 0 center; /* Mens row background image */
}
.dcjq-vertical-mega-menu .menu li#menu-item-1 .sub .row.last {
background-image: url(images/ladies.png); /* Ladies row background image */
}
.dcjq-vertical-mega-menu .menu li#menu-item-1 .sub li.mega-hdr {
padding: 75px 0 0; /* Padding for top of each sub-menu for background images */
}

/* Add the background images */
li#menu-item-4.mega-hdr {background: url(images/nike.png) no-repeat center 0;}
li#menu-item-6.mega-hdr {background: url(images/adidas_1.jpg) no-repeat center 0;}
li#menu-item-7.mega-hdr {background: url(images/gola_1.jpg) no-repeat center 0;}
li#menu-item-8.mega-hdr {background: url(images/nike_2.jpg) no-repeat center 0;}
li#menu-item-10.mega-hdr {background: url(images/adidas_2.jpg) no-repeat center 0;}
li#menu-item-11.mega-hdr {background: url(images/gola_2.jpg) no-repeat center 0;}

Custom CSS For Jackets

The jackets are slightly different to the other 2 since the menu only have 2 levels of navigation. The CSS below will float each item and create a larger menu container.

/* Jackets */
.dcjq-vertical-mega-menu .menu li#menu-item-2 .sub-container.non-mega .sub {
width: 480px; /* Required to overide styling for 2-levels */
height: 180px; /* Required */
padding: 20px 10px 10px;
}
.dcjq-vertical-mega-menu .menu li#menu-item-2 .sub-container.non-mega li {
float: left;
}
li#menu-item-12, li#menu-item-13, li#menu-item-14{
padding: 150px 0 0; /* Padding for top of each sub-menu for background images */
margin-right: 10px;
}

/* Add the background images */
li#menu-item-12 {background: url(images/jacket_1.jpg) no-repeat center 0;}
li#menu-item-13 {background: url(images/jacket_2.jpg) no-repeat center 0;}
li#menu-item-14 {background: url(images/jacket_3.jpg) no-repeat center 0;}

Custom CSS For Sports Bags

/* Sports Bags */
li#menu-item-3 li.mega-hdr {
padding: 120px 0 0; /* Padding for top of each sub-menu for background images */
}

/* Add the background images */
li#menu-item-15.mega-hdr {background: url(images/bag_1.jpg) no-repeat center 0;}
li#menu-item-17.mega-hdr {background: url(images/bag_3.jpg) no-repeat center 0;}
li#menu-item-18.mega-hdr {background: url(images/bag_4.jpg) no-repeat center 0;}

That’s basically it! Using the above techniques you can pretty much customise the menu to suite most requirements.

Download the source code below for a complete working copies of both the basic and customised menus.

View Final Menu DemoDownload source code

31 Comments

  • [...] Get this menu [...]

  • I have tried implementing the above plugin but i realized that its css is being affected. The sub menu is not aligned with its default menu. Hav any idea of which rule has been affected. The webpage is mentioned above

    • Hi,

      You can check the menu using firebug – this will be able to give you which CSS rules are affecting the layout

  • Having troubles with z-index and the wp menu disappearing behind this menu. I can’t find any mention of where to edit the css for z-index. Anyone come across this?

    • Hi,

      The z index for the mega menu is actually set in the jQuery plugin code

  • Hi to all, i need this horizontal menu, how to make it menu horizontal with all function?

    • This is a vertical menu. You need to check out the horizontal mega menu version

  • Hi Lee,

    I’m still not understanding how to get this menu activated. Am I supposed to call the css file in my theme folder dcverticalmegamenu.css? Am I supposed to add the css to my stylesheet? which skin should I choose from the widget itself? No skin? One of the skins I want to edit? What should I call the css file in my theme folder?

    • Forgot to identify that I’m using the wordpress plugin on a twenty eleven child theme.
      Thanks!

    • Hi,

      The CSS can be added anywhere – either in a new CSS file, which you then add to your theme or add it to the main theme’s style sheet.

      If using a custom skin then select no skin in the widget options

  • The custom menu I modified directly within blue.css is working awesome
    Then I took blue.css down, simply renamed it to blueTest.css, uploaded it, chose it from the styles selection, and the style does not work (the menu is really tiny and with no formatting). The code is identical, just the file is renamed. When I select the blue.css again, my custom menu works just fine.

    any ideas? I want to use my custom menu file named differently instead of the custom menu I made in blue.css in case the client ever updates the menu plugin per your suggestion.

    -

    • Hi,

      You need to put any custom CSS into the theme folder, not the plugin folder. The complete plugin directory is deleted during a WordPress update, even if files are named differently

      • Hi! I meant to say custom skin. If I take a copy of blue.css and rename the copy to say bluetest.css and put it in the skin folder, then select the skin within the widget, bluetest.css loads the style with tiny letters and no formatting. But then when I select blue.css again (same exact code) it works fine. any ideas?

  • [...] post earlier this year was titled WordPress Tutorial – Create Your own Custom Vertical Mega Menu and discusses how to use a jQuery Vertical Mega Menu plugin and the plugin’s built in CSS to [...]

  • Hi! Im using the basic Blue.css and it works great. Now they want to change the colors of just a couple of the top level menu items, so for example

    item 1- blue
    item 2- blue
    item 3 – make this red
    item 4- blue

    I tried to add some code in the blue .css but it did not work,
    thanks!

    • Hi,

      As it shows in the tutorial you need to get the ID for that specific menu item in order to target individual links

      • Hi! How do I get that ID- I don’t see where to get it out of?
        thanks!

      • Found out how to get the ID
        http://vanweerd.com/how-to-retrieve-a-menu-item-id-from-wp-3-navigation-menus/

        I will add the code once I get it to work.

      • OK so I found the ID 280. On that Top level menu item, I want it to have a different background. So I did the code addition to the blue.css like so- but nothing happens. Any ideas?

        source code (blue .css)
        #dc_jqverticalmegamenu_widget-%ID%-item ul li a {float: none; display: block; color: #fff; background: url(skins/images/bg_blue.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none; border-right: 1px solid #536573; border-left: 1px solid #536573;}

        #dc_jqverticalmegamenu_widget-%ID%-item ul li#menu-item-280 {float: none; display: block; color: #fff; background: url(skins/images/bg_blueTopItems.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none; border-right: 1px solid #536573; border-left: 1px solid #536573;}

        • It should be – #dc_jqverticalmegamenu_widget-%ID%-item ul li#menu-item-280 a

          Be careful changing the skin files in the plugin folder though. All of these files automatically get updated whenever WordPress updates the plugin

          • Dude you are awesome! Thank you very much for your quick response that was it! I will port it over to the custom .css instead of the blue before launch.

  • Excellent plugin, thank you!

    I’m using this to display a flyout slider menu and have created a custom skin. Everything works except IE8: the sub-menu appears, but it’s cutoff, and it gets smaller and smaller on subsequent hovers over the trigger link. (The slide effect also seems to come from a different direction compared to the first hover.)

    Example: http://tinyurl.com/6euzou5

    (The menu in question is in the header area, starting with Services, About Us…etc. Clients and Testimonials don’t have sub-menus, just the other 4 menu items do.)

    Here’s the main style sheet: http://tinyurl.com/5tfnkel

    …and all the menu styles are imported: http://tinyurl.com/4xfqw5d

    I’m also using the following IE-only styles:

    DIV#dc_jqverticalmegamenu_widget-3 {
    	margin-left: 0;
    	padding-bottom: 20px;
    	width: 120px; /* 120px with padding */
    }
    
    .dcjq-vertical-mega-menu .menu li .sub .row {
    	width: 100%;
    	overflow: visible; /* Required to clear floats for each row */
    	clear: both;
    }

    I think this issue is related to the absolute positioning of .dcjq-vertical-mega-menu .menu li .sub-container. I can’t seem to set any width or height on this div. I’ve read a number of articles about an IE bug that could be related to this, where the solution was to add an empty DIV between the floated LI and the absolutely positioned DIV. But as this is a WordPress menu, I can’t edit the generated code easily. And since your demos work well, it’s more likely that there’s just something wrong with my CSS.

    The fact that the slide out div gets smaller and smaller on each rollover is puzzling me. Any ideas for making this work nicely in IE8? Thanks in advance for any suggestions!

    • Hi,

      It sounds like its a CSS problem. Either something in your style sheet is affecting the mega menu or the custom styles are missing something.

      Do you get the same problem with all animation styles?

      • Thank you for our quick reply, Lee. Your suggestion was a good one: I changed from the Slide effect to Fade In and most of my IE8 troubles disappeared. I still had some issues setting width and height on the sub-container, but solved it with some individual list item padding.

        • Hi,

          OK great. Glad that fixed the problem

  • I modified the sample CSS code, installed it in my theme (Agency theme by StudioPress) CSS file, and it’s not appearing. The main .sidebar li is overriding the Vertical Mega Menu styles, and the items that are supposed to float left are all mashed up top.

    I’ve checked for footer and overflow issues, and neither seem to be an issue.

    I can’t show the page as it’s protected. Anything I can try that’s obvious without you seeing it?

    -

    I tried to install it on the test site: http://www.jumpstartmddev.com/program/

    It’s the bottom sidebar. Same issues. Inherits regular sidebar style and doesn’t slide out/fade in properly.

    Please help :(

    Thank you!

  • Hi Lee

    Many thanks for all your help along the way.

    After lots of experimenting, the final result can now be seen at http://www.dimensionaledge.com
    For simplicity, I ultimately decided on a 2 level custom menu – however, the submenu items are custom links to page tabs.

    I chose Dynamic Drive’s tab content v2.2 because of the way I could combine it with the Mega Menu. I couldn’t find any other tab scripts that could allow me to activate a tab via the URL without using an anchor.

    To anyone looking to implement a 3 level custom mega menu, I would highly recommend combining the Mega Menu widget with Dynamic Drive tabs as a way of organising and accessing product content in an easy and concise way from the main menu.

    Once again Lee, thanks for your efforts making the Mega Menu such a wonderful product!

  • Thanks for the work that you are doing. I faced a challenge, though. When I tried installing the Wp mega menu plugin, I encountered the error “hte plugin does not have a valid header”. It couldn’t be activated, neither appeared in the plugins list. any help?

    • try deleting and reinstalling or check for errors with other plugins/code as the plugin does have a valid header

  • [...] Custom Vertical Mega Menu For WordPress – jQuery This tutorial by Design Chemical will teach you how to use the jQuery Vertical Mega Menu Plugin to [...]

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags