Themeforest

jQuery Mega Drop Down Menu Plugin

Advanced Styling

With some basic additional styling it’s easy to customise the mega menu plugin. The complete source files for the custom mega menu demo shown below can be downloaded for our plugin downloads page.

Menu CSS

The CSS code used to create this menu:

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

/* Main menu styles */
#mega-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;
}
#mega-menu li {
float: left;
font-weight: bold;
}
#mega-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;
}
#mega-menu li.mega-hover a, #mega-menu li a:hover {
background-position: 100% -40px;
color: #000;
text-shadow: none;
}

/* Arrow tag for parent links */
#mega-menu li a.dc-mega {
padding-right: 38px; /* Additional padding for arrow */
position: relative; /* Required for arrow positioning */
}
#mega-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;
}
#mega-menu li.mega-hover a .dc-mega-icon {
background-position: 0 100%;
}

/* Mega Menu Styling */
/* Mega Drop Down Container */
#mega-menu li .sub-container {
position: absolute; /* Required */
background: url(images/bg_sub_left.png) no-repeat 0 100%;
padding-left: 10px;
margin-left: -3px;
}
#mega-menu li .sub {
background: url(images/bg_sub.png) no-repeat 100% 100%;
padding: 20px 20px 20px 10px;
}
#mega-menu li .sub-container.mega .sub {
padding: 20px 10px 0 0;
}
#mega-menu li .sub .row { /* Clear the sub-menu floats */
width: 100%;
overflow: hidden;
clear: both;
}
#mega-menu li .sub li {
float: none;
font-size: 1em;
font-weight: bold;
}
/* Sub-menu Headers */
#mega-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;
}
#mega-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;
}
#mega-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;
}
#mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
text-shadow: none;
}

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

/* Style the 3rd level links */
#mega-menu li .sub li ul li {
margin-right: 90px;
}
#mega-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;
}
#mega-menu .sub li.mega-hdr li a:hover {
color: #990000;
background-image: url(images/bullet_on.png);
}

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

And our menu is initialised using:

$('#mega-menu').dcMegaMenu({
    rowItems: '3',
    speed: 'fast'
});