ThichCode.NETCreate simple DropDown Menu Mega with css and jquery
Create simple DropDown Menu Mega with css and jquery
DEMO
Code HTML:
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- Mobile toggle button -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo -->
<a class="brand" href="#"><b>LOGO</b></a>
<!-- Navigation -->
<nav class="nav-collapse collapse">
<ul class="nav">
<li><a href="#top">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega Menu <b class="caret"></b></a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-column">
<ul>
<li class="nav-header">Mega menu 1</li>
<img src="http://placehold.it/150x120">
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Mega menu 2</li>
<img src="http://placehold.it/150x120">
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Mega menu 3</li>
<img src="http://placehold.it/150x120">
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
</ul>
</li>
</ul>
<!-- dropdown-menu -->
</li>
<!-- /.dropdown -->
<li><a href="#about">About Us</a></li>
<li><a href="#pricing">Our Pricing</a></li>
<li><a href="#team">Our Team</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!-- /.nav -->
</nav>
<!--/.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.nav-inner -->
</header>
Code CSS:
/* page style */
a, a: focus, a: active, a: hover, object, embed {
outline: none;text - decoration: none;
}: -moz - any - link: focus {
outline: none;
}
input::-moz - focus - inner {
border: 0;
}: focus {
outline: 0;
}
body {
background: #333; }
.brand { padding: 10px 40px !important; }
.navbar { border-bottom: 4px solid # 888;
}
/* MEGA MENU STYLE
********************************/
.mega - menu {
padding: 10 px 0 px!important;
width: 540 px;
border - radius: 0;
margin - top: 0 px;
}
.mega - menu li {
display: inline - block;
float: left;
font - size: 0.94 rem;
padding: 3 px 0 px;
}
.mega - menu li.mega - menu - column {
margin - right: 20 px;
width: 150 px;
}
.mega - menu.nav - header {
padding: 0!important;
margin - bottom: 10 px;
display: inline - block;
width: 100 % ;
border - bottom: 1 px solid# ddd;
}
.mega - menu img {
padding - bottom: 10 px;
}
/* Disable Toggle style
********************************/
/* Dropdown Toggle on style */
.navbar.nav li.dropdown.open > .dropdown - toggle,
.navbar.nav li.dropdown.active > .dropdown - toggle,
.navbar.nav li.dropdown.open.active > .dropdown - toggle {
background: inherit; /* Set to inherit when using mouse hover to open dropdown */
color: inherit;
}
/* Toggle off style */
.navbar.nav li.dropdown.open.active > .dropdown - toggle,
.navbar.nav > li.dropdown > a: focus {
background: inherit;
color: inherit;
}
/* Toggle hover */
.navbar.nav li.dropdown > .dropdown - toggle: hover,
.navbar.nav li.dropdown.open > .dropdown - toggle: hover {
background - color: #DDDDDD;
}
/* Toggle caret*/
.navbar.nav li.dropdown > .dropdown - toggle.caret {
border - bottom - color: ;
border - top - color: ;
}
/* Toggle caret hover */
.navbar.nav li.dropdown > a: hover.caret,
.navbar.nav li.dropdown > a: focus.caret {
border - bottom - color: #333;
border-top-color: # 333;
}
/* Toggle caret active */
.navbar.nav li.dropdown.open > .dropdown - toggle.caret,
.navbar.nav li.dropdown.active > .dropdown - toggle.caret,
.navbar.nav li.dropdown.open.active > .dropdown - toggle.caret {
border - bottom - color: #333;
border-top-color: # 333;
}
/* Hover style
********************************/
.navbar.nav > li > a, .mega - menu a {
-webkit - transition: all 200 ms ease; - moz - transition: all 200 ms ease; - ms - transition: all 200 ms ease; - o - transition: all 200 ms ease;
transition: all 200 ms ease;
/* -webkit-transform: translate3d(0, 0, 0); Webkit Hardware Acceleration*/
- webkit - backface - visibility: hidden; /* Safari Flicker Fix #2 */ - webkit - transform: translateZ(0);
}
Code Javascript:
// Dropdown Menu Fade
jQuery(document).ready(function() {
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).fadeIn("fast");
},
function() {
$('.dropdown-menu', this).fadeOut("fast");
});
});
Post a Comment