Themeforest

jQuery Vertical Mega Menu Plugin

Advanced Styling

With some additional styling it’s easy to customise the vertical mega menu and configure it to handle most requirements.

You can download the complete source files for the custom vertical mega menu shown below from the plugin downloads page. To download the WordPress version go to the WordPress Vertical Mega Menu Plugin page.

The Mega Menu CSS

/* Vertical Mega Menu Styles */
.mega-menu {
font: bold 13px Arial, sans-serif;
line-height: 16px;
position: relative; /* Required */
border: 1px solid #999;
border-bottom: none;
}
/* Main menu styling */
.mega-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;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
background-position: 0 -40px;
color: #fff;
text-shadow: 1px 1px 1px #000;
}

/* Add arrow icon to parent links */
.mega-menu li a.dc-mega {
position: relative; /* Required since icons are positioned absolutely */
}
.mega-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;
}
.mega-menu li a:hover .dc-mega-icon, .mega-menu li.mega-hover a .dc-mega-icon {
background-position: 0 0;
}

/* Mega menu container */
.mega-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 */
}
.mega-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;
}
.mega-menu li .sub .row {
width: 100%; overflow: hidden; /* Required to clear floats for each row */
}
.mega-menu li .sub li {
float: none;
width: 160px; /* Set sub-menu width */
font-weight: normal;
}
.mega-menu li .sub li.mega-hdr {
float: left; /* Required */
margin: 0 5px 10px 5px;
}
.mega-menu li .sub a, .mega-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;
}
.mega-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;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
text-shadow: none;
}
.mega-menu .sub li.mega-hdr li {
margin-bottom: 3px;
}
.mega-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;
}
.mega-menu .sub li a:hover {
color: #fff;
background: #000 url(images/bullet_white.png) no-repeat 5px 8px;
}
.mega-menu .sub ul li {
padding-right: 0;
}

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

/* Custom mega menu styling */
/* Footwear */
.mega-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 */
}
.mega-menu li#menu-item-1 .sub .row.last {
background-image: url(images/ladies.png); /* Ladies row background image */
}
.mega-menu li#menu-item-1 .sub li.mega-hdr {
padding: 75px 0 0; /* Padding for top of each sub-menu for 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;}

/* Sports Bags */
li#menu-item-3 li.mega-hdr {
padding: 120px 0 0; /* Padding for top of each sub-menu for 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;}

/* Jackets */
.mega-menu li#menu-item-2 .sub-container.non-mega .sub {
width: 480px; /* Required to overide styling for 2-levels */
height: 180px;
padding: 20px 10px 10px;
}
.mega-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;
}
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;}

Initialising The Mega Menu

$('#mega-5').dcVerticalMegaMenu({
    rowItems: '3',
    speed: 'fast',
    effect: 'slide',
    direction: 'right'
});
Social Network Tabs
WordPress Social Stream Plugin
Top Social Share Posts Plugin
jQuery Social Share Buttons Plugin
Theme Forest