Themeforest

WordPress Tutorial – Create Your own Custom Mega Menu Styles

Custom WordPress Mega Menu

In today’s tutorial we are going to go through how to create your own CSS file for the WordPress Mega drop down menu plugin and with just a few additional CSS styles, fully customise your navigation to create more exciting and unique menus.

The objective of the tutorial will be to create a complete set of CSS rules for the mega menu that will display a drop down menu box showing 6 categories of cars, each with 4 links. In each category we are going to customise the menu by adding a background image of each type of car.

See final menu demo.

The tutorial assumes that you already have the jQuery mega drop down menu plugin installed, have a general understanding of CSS and that you understand how to create the custom menu structure in WordPress admin.

Mega Menu Basics

Both WordPress and the jquery plugin that creates the WordPress mega menu add some additional CSS IDs/classes to your menu’s standard HTML structure that can be used to customise the menu layout and design.

Due to the mega menu’s unique layout there are several parts that we need to consider when putting our design together:

  • The main “top-level” menu
  • The drop down mega menu section
  • The sub-menus – headers and links
  • Styling for menu items with only 2 levels – i.e. “non-mega” sub-menus

Setting Up Your Style Sheet

All mega menus created by this plugin are wrapped in div tags, which have the css class “dcjq-mega-menu” and the menu itself, which is created by the WordPress custom menu system is given the class “menu”.

Using these 2 CSS identifiers we can create the style rules, which can be added to our theme style sheet.

If you have more than one menu on your site and want specific control over each of the menu’s stlying you can change the “dcjq-mega-menu” to use the widget’s ID instead.

1. The Main Menu

There are a few CSS rules, which are essential in order to make the mega menu work as designed. These are highlighted in the CSS code below with additional comments.

The main menu area covers the visible navigation bar and includes all of the top level menu items. Styling this is fairly straightforward and requires css rules for the menu background, the default menu state and the hover state. For both states we will use a single CSS sprite and just change the background image position.

/* Reset code to remove theme inherent styling for unordered lists */

.dcjq-mega-menu ul.menu ul, .dcjq-mega-menu ul.menu li {
list-style: none;
padding: 0;
margin: 0;
}

.dcjq-mega-menu ul.menu ul {
display: none; /* Hides non-mega links */
}

.dcjq-mega-menu ul.menu .sub ul {
display: block; /* overrides above hide for mega menus */
}

/* Main menu styles */

.dcjq-mega-menu ul.menu {
background: #222 url(images/bg_black.png) repeat-x 0 -80px;
width: 100%;
height: 40px;
border-right: 1px solid #1B1B1B;
border-left: 1px solid #1B1B1B;
position: relative; /* Important - required for positioning of mega menu */
font: normal 13px Arial, sans-serif;
line-height: 16px;
}

.dcjq-mega-menu ul.menu li {
float: left;
font-weight: bold;
}

.dcjq-mega-menu ul.menu li a {
float: left;
display: block;
padding: 12px 25px;
background: url(images/bg_black.png) repeat-x 100% 0;
color: #fff;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
}

.dcjq-mega-menu ul.menu li.mega-hover a, .dcjq-mega-menu ul.menu li a:hover {
background-position: 100% -40px;
color: #000;
text-shadow: none;
}

One additional item that the plugin adds is a span tag to all main menu links that have sub-menus. This additional tag allows us to add a custom arrow or bullet icon to the menu item, which highlights to the user which links have more options.

jQuery also adds a class of “mega-hover” when the mouse is over the main menu link – this can be used to change the arrow background image to “active”.

/* Arrow tag for parent links */

.dcjq-mega-menu ul.menu li a.dc-mega {
padding-right: 38px; /* Additional padding for arrow */
position: relative; /* Required for arrow positioning */
}

.dcjq-mega-menu ul.menu li a .dc-mega-icon {
display: block;
position: absolute;
top: 18px;
right: 15px;
width: 8px;
height: 6px;
background: url(images/arrow.png) no-repeat 0 0;
}

.dcjq-mega-menu ul.menu li.mega-hover a .dc-mega-icon {
background-position: 0 100%;
}

2. Creating the mega drop down

To create the mega drop down layout the plugin uses several tags/css classes to control the positioning of the sub-menus:

Mega Menu Container – Each group of sub-menus are wrapped in a div tag, which is given the class “sub-container”. The only important rule for this tags is – “position: absolute”.

The container allows more advanced styling to be used for the drop down such as the drop-shadow background used in this example.

Mega Menu Rows – Based on the number of menu items per row, which is set in the widget control panel, the plugin wraps the sub-menus in div tags, which are given the class “row”. We can clear the sub-menu floats by applying the width: 100%; overflow: hidden rule to these div tags.

For this layout no additional styling is required for the row tags, but again these provide another way of adding more advanced styling to your menu.

/* Mega Menu Styling */
/* Mega Drop Down Container */

.dcjq-mega-menu ul.menu li .sub-container {
position: absolute; /* Required */
background: url(../../images/bg_sub_left.png) no-repeat 0 100%;
padding-left: 10px;
margin-left: -3px;
}

.dcjq-mega-menu ul.menu li .sub {
background: url(images/bg_sub.png) no-repeat 100% 100%;
padding: 20px 20px 20px 10px;
}

.dcjq-mega-menu ul.menu li .sub-container.mega .sub {
padding: 20px 10px 0 0;
}

/* Mega Menu Rows */

.dcjq-mega-menu ul.menu li .sub .row { /* Clear the sub-menu floats */
width: 100%;
overflow: hidden;
clear: both;
}

.dcjq-mega-menu ul.menu li .sub li {
float: none;
font-size: 1em;
font-weight: bold;
}

3. Styling the sub-menus

The 2nd level menu items are what the plugin uses to create the sub-menu headers. “Float” and “width” must be set for these elements in order to structure the mega menu correctly. For our layout we are going to border each sub-menu and add a slight gradient background to the header text.

/* Sub-menu Headers */

.dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
float: left; /* Float the sub-menus and give them a fixed width to from the mega menu rows */
width: 260px;
margin: 0 10px 20px 10px;
border: 1px solid #ccc;
}

.dcjq-mega-menu ul.menu li .sub a { /* Clear the styles from the top-level links and set the font styles */
background: none;
border: none;
text-shadow: none;
color: #111;
padding: 7px 10px;
display: block;
float: none;
text-decoration: none;
font-size: 0.9em;
}

.dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a {
padding: 7px 10px;
margin-bottom: 5px;
border-bottom: 1px solid #ccc;
text-transform: uppercase;
font-weight: bold;
color: #000;
background: #EAEAEA url(images/bg_hdr.png) repeat-x center center;
}

.dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
text-shadow: none;
}

Now that we have the layout formatted we can add the individual images, which will make our menu more unique.

To do this we simply add background images to each of the 2nd level li tags – in our CSS rules above we have already set the width of the items to 260px, which allows us to add a 120px wide background image and leave enough room for the links.

WordPress automatically adds ID’s to each of the custom menu tags, which will usually be formatted as menu-item-1, menu-item-2, menu-item-3, etc depending on how many menus you have set up for your site. These are different for each site so you need to check the source code of your page to get the correct IDs

/* Add the individual sub-menu backgrounds */

.dcjq-mega-menu ul.menu li .sub li#menu-item-1 {
background: url(images/bg_coupe.jpg) no-repeat 135px 40px;
}

.dcjq-mega-menu ul.menu li .sub li#menu-item-2 {
background: url(images/bg_sedan.jpg) no-repeat 135px 40px;
}

.dcjq-mega-menu ul.menu li .sub li#menu-item-3 {
background: url(images/bg_convert.jpg) no-repeat 135px 40px;
}

.dcjq-mega-menu ul.menu li .sub li#menu-item-4 {
background: url(images/bg_suv.jpg) no-repeat 135px 40px;
}

.dcjq-mega-menu ul.menu li .sub li#menu-item-5 {
background: url(images/bg_pickup.jpg) no-repeat 135px 40px;
}

.dcjq-mega-menu ul.menu li .sub li#menu-item-6 {
background: url(images/bg_sports.jpg) no-repeat 135px 40px;
}

4. Styling the sub-menu links

To complete the mega menu we can finish off the design by styling the sub-menu links using a custom bullet image and add a “”margin-right” to these list items to prevent them overlapping the background images:

/* Style the 3rd level links */

.dcjq-mega-menu ul.menu li .sub li ul li {
margin-right: 90px;
}
.dcjq-mega-menu ul.menu .sub li.mega-hdr li a {
color: #444;
font-weight: normal;
padding: 3px 0 3px 25px;
background: url(images/bullet.png) no-repeat 10px 8px;
}

.dcjq-mega-menu ul.menu .sub li.mega-hdr li a:hover {
color: #990000;
background-image: url(images/bullet_on.png);
}

5. Style non-mega dropdowns

The last thing we need to do is add a few CSS rules to style main menu items that only have one sub-level and therefore dont get styled using the mega menu css rules.

The plugin adds the class “non-mega” to the container wrapping the 2nd level items and this can be used to differentiate between the 2 types of drop down menu.


/* Styling for items with only 2 levels */

.dcjq-mega-menu ul.menu li .sub-container.non-mega .sub {
padding: 20px 20px 20px 10px;
}

.dcjq-mega-menu ul.menu li .sub-container.non-mega li {
width: 190px; /* Set the drop down width */
}

.dcjq-mega-menu ul.menu li .sub-container.non-mega li a {
padding: 7px 5px 7px 22px;
background: url(images/bullet.png) no-repeat 5px 12px;
}

.dcjq-mega-menu ul.menu li .sub-container.non-mega li a:hover {
color: #990000;
background-image: url(images/bullet_on.png);
}

That’s basically all that is required to create a more advanced layout for your mega menus.

Add the menu css rules to your theme style sheet and the necessary images to the theme images folder – make sure that you set the paths to any background images based on where you store your files – in our example we store the images in a folder called “images”, which is in the same sub-directory of the stlye sheet file.

If using a custom style sheet for your mega menu set the “skin” option in the widget control panel to “No Theme” – this will remove any of the sample skins from your website page.

The Complete CSS

/* Reset code to remove theme inherent styling */
.dcjq-mega-menu ul.menu ul, .dcjq-mega-menu ul.menu li {
list-style: none;
padding: 0;
margin: 0;
}
.dcjq-mega-menu ul.menu ul {
display: none; /* Hides non-mega links */
}
.dcjq-mega-menu ul.menu .sub ul {
display: block; /* overrides above hide */
}

/* Main menu styles */
.dcjq-mega-menu ul.menu {
background: #222 url(images/bg_black.png) repeat-x 0 -80px;
width: 100%;
height: 40px;
border-right: 1px solid #1B1B1B;
border-left: 1px solid #1B1B1B;
position: relative; /* Important - required for positioning of mega menu */
font: normal 13px Arial, sans-serif;
line-height: 16px;
}
.dcjq-mega-menu ul.menu li {
float: left;
font-weight: bold;
}
.dcjq-mega-menu ul.menu li a {
float: left;
display: block;
padding: 12px 25px;
background: url(images/bg_black.png) repeat-x 100% 0;
color: #fff;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
}
.dcjq-mega-menu ul.menu li.mega-hover a, .dcjq-mega-menu ul.menu li a:hover {
background-position: 100% -40px;
color: #000;
text-shadow: none;
}

/* Arrow tag for parent links */
.dcjq-mega-menu ul.menu li a.dc-mega {
padding-right: 38px; /* Additional padding for arrow */
position: relative; /* Required for arrow positioning */
}
.dcjq-mega-menu ul.menu li a .dc-mega-icon {
display: block;
position: absolute;
top: 18px;
right: 15px;
width: 8px;
height: 6px;
background: url(images/arrow.png) no-repeat 0 0;
}
.dcjq-mega-menu ul.menu li.mega-hover a .dc-mega-icon {
background-position: 0 100%;
}

/* Mega Menu Styling */
/* Mega Drop Down Container */
.dcjq-mega-menu ul.menu li .sub-container {
position: absolute; /* Required */
background: url(images/bg_sub_left.png) no-repeat 0 100%;
padding-left: 10px;
margin-left: -3px;
}
.dcjq-mega-menu ul.menu li .sub {
background: url(images/bg_sub.png) no-repeat 100% 100%;
padding: 20px 20px 20px 10px;
}
.dcjq-mega-menu ul.menu li .sub-container.mega .sub {
padding: 20px 10px 0 0;
}
.dcjq-mega-menu ul.menu li .sub .row { /* Clear the sub-menu floats */
width: 100%;
overflow: hidden;
clear: both;
}
.dcjq-mega-menu ul.menu li .sub li {
float: none;
font-size: 1em;
font-weight: bold;
}
/* Sub-menu Headers */
.dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
float: left; /* Float the sub-menus and give them a fixed width to from the mega menu rows */
width: 260px;
margin: 0 10px 20px 10px;
border: 1px solid #ccc;
}
.dcjq-mega-menu ul.menu li .sub a { /* Clear the styles from the top-level links and set the font styles */
background: none;
border: none;
text-shadow: none;
color: #111;
padding: 7px 10px;
display: block;
float: none;
text-decoration: none;
font-size: 0.9em;
}
.dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a {
padding: 7px 10px;
margin-bottom: 5px;
border-bottom: 1px solid #ccc;
text-transform: uppercase;
font-weight: bold;
color: #000;
background: #EAEAEA url(images/bg_hdr.png) repeat-x center center;
}
.dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
text-shadow: none;
}

/* Add the individual sub-menu backgrounds */
.dcjq-mega-menu ul.menu li .sub li#menu-item-1 {
background: url(images/bg_coupe.jpg) no-repeat 135px 40px;
}
.dcjq-mega-menu ul.menu li .sub li#menu-item-2 {
background: url(images/bg_sedan.jpg) no-repeat 135px 40px;
}
.dcjq-mega-menu ul.menu li .sub li#menu-item-3 {
background: url(images/bg_convert.jpg) no-repeat 135px 40px;
}
.dcjq-mega-menu ul.menu li .sub li#menu-item-4 {
background: url(images/bg_suv.jpg) no-repeat 135px 40px;
}
.dcjq-mega-menu ul.menu li .sub li#menu-item-5 {
background: url(images/bg_pickup.jpg) no-repeat 135px 40px;
}
.dcjq-mega-menu ul.menu li .sub li#menu-item-6 {
background: url(images/bg_sports.jpg) no-repeat 135px 40px;
}

/* Style the 3rd level links */
.dcjq-mega-menu ul.menu li .sub li ul li {
margin-right: 90px;
}
.dcjq-mega-menu ul.menu .sub li.mega-hdr li a {
color: #444;
font-weight: normal;
padding: 3px 0 3px 25px;
background: url(images/bullet.png) no-repeat 10px 8px;
}
.dcjq-mega-menu ul.menu .sub li.mega-hdr li a:hover {
color: #990000;
background-image: url(images/bullet_on.png);
}

/* Styling for items with only 2 levels */
.dcjq-mega-menu ul.menu li .sub-container.non-mega .sub {
padding: 20px 20px 20px 10px;
}
.dcjq-mega-menu ul.menu li .sub-container.non-mega li {
width: 190px; /* Set the drop down width */
}
.dcjq-mega-menu ul.menu li .sub-container.non-mega li a {
padding: 7px 5px 7px 22px;
background: url(images/bullet.png) no-repeat 5px 12px;
}
.dcjq-mega-menu ul.menu li .sub-container.non-mega li a:hover {
color: #990000;
background-image: url(images/bullet_on.png);
}

See custom mega menu demo.

Download

Download a complete working copy of the menu, including background images and style sheet – http://www.designchemical.com/lab/jquery/demo/download/custom_mega_menu_styles.zip

100 Comments

  • oh I just saw your comment regarding IE Z order below…. am still checking your comments.

  • I have installed and implemented your menu which displays and works great. Problem I am having is that I do not know how to turn off the other menu from theme template I am using. I got rid of Menu from themes style.css, but how can I entirely get rid of page menu that is not Mega Menu?

    • Hi,

      Easiest way if you dont need it is to delete the code where the menu is being created from your theme files