jQuery Vertical Mega Menu Plugin
Getting Started
For the WordPress vertical mega menu plugin version go to – WordPress Vertical Mega Menu Widget
Overview
This plugin creates vertical mega menus from standard HTML nested lists, allowing users to view all available menu options for each top-level menu item.
There are several plugin options available for customising the mega menu:
- Choose animation effect for the flyout menu – show/hide, fade in or slide
- Set animation speed
- Set number of sub-menus per row
- Display the flyout mega menu on the left or right depending on the menu position
For horizontal mega menus refer to our other plugin – jQuery Mega Drop Down Menu.
Quick Start
The plugin doesnt require extra mark up in the menu HTML code and will generate the mega menu effect from standard nested lists. For the best effect use 3 nested levels of links.
1. Create Your Nested List
<ul id="mega-1" class="mega-menu">
<li><a href="#">Menu Item A</a>
<ul>
<li><a href="#">Sub-Header 1</a>
<ul>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul>
</li>
<li><a href="#">Sub-Header 2</a>
<ul>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul>
</li>
<li><a href="#">Sub-Header 3</a>
<ul>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
2. Add the Plugin Files
The plugin also uses the hoverIntent plugin by Brian Cherne.
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script> <script type='text/javascript' src='js/jquery.dcverticalmegamenu.1.3.js'></script>
3. Add the CSS For Styling
Below is the sample CSS used to create the menu in the examples page.
/* Vertical Mega Menu Styles */
.mega-menu{
font: bold 13px Arial, sans-serif;
line-height: 16px;
background: #333;
border-left: 1px solid #1B1B1B;
position: relative; /* Required */
}
.mega-menu li a {
display: block;
color: #fff;
padding: 12px 38px 12px 25px;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
background: #4b4b4b;
color: #fff;
border-right: 1px solid #4b4b4b;
}
.mega-menu li a.dc-mega {
position: relative;
}
/* Add arrow icon to parent links */
.mega-menu li a .dc-mega-icon {
display: block;
position: absolute;
top: 18px;
right: 15px;
width: 6px;
height: 8px;
background: url(images/arrow_right.png) no-repeat 0 0;
}
/* Mega menu container */
.mega-menu li .sub-container {
position: absolute; /* Required */
background: #4B4B4B;
padding: 10px 10px 0 10px;
overflow: hidden;
border: 1px solid #4b4b4b;
border-left: none;
}
.mega-menu li .sub .row {
width: 100%; overflow: hidden; /* Clear floats */
}
.mega-menu li .sub li {
float: none;
width: 150px;
font-size: 1em;
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: #fff;
padding: 7px 10px;
display: block;
text-decoration: none;
font-size: 0.9em;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a {
padding: 5px 5px 5px 15px;
margin-bottom: 5px;
background: #E88221;
text-transform: uppercase;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #333;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
text-shadow: none;
}
.mega-menu .sub li.mega-hdr li a {
padding: 4px 5px 4px 20px;
background: url(images/arrow_white.png) no-repeat 5px 8px;
font-weight: normal;
}
.mega-menu .sub li.mega-hdr li a:hover {
color: #a32403;
background: #efefef url(images/arrow_on.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;}
.mega-menu li .sub-container.non-mega li {
padding: 0;
margin: 0;
width: 150px;
}
.mega-menu li .sub-container.non-mega li a {
padding: 7px 5px 7px 22px;
background: url(images/arrow_white.png) no-repeat 7px 10px;
}
.mega-menu li .sub-container.non-mega li a:hover {
color: #a32403;
background: #efefef url(images/arrow_on.png) no-repeat 7px 10px;
}
4. Initialise The Vertical Mega Menu
To create a vertical mega menu with the default settings (see options page) use the following:
jQuery(document).ready(function($) {
$('#mega-1').dcVerticalMegaMenu();
});
See the examples page for plugin demos or the options page for more information on how to customise the mega menu.
1 Comment
Leave a comment
[...] Source Demo [...]