JQuery CSS Dropdown Menu – 2 Levels
using generic xhtml markup with very simple jQuery & CSS code to achieve the smooth drop down effect with 2 levels of drop down menu. So lets start then with the xhtml code.
Above code is the main menu of our drop down. Lets add the first-level drop down menu in the above code and then the second-level drop down menu.
Once you download the jquery we have to embed the same in the <head> tag of our html document and also the new js file which will contain our custom jquery code sinppet to call function as below:
using generic xhtml markup with very simple jQuery & CSS code to achieve the smooth drop down effect with 2 levels of drop down menu. So lets start then with the xhtml code.
First of all lets set the folder structure as follows:
- images (to store images)
- css (to store css files)
- js (to store javascript files)
1) Set up Xhtml Markup
We will need simple unordered list menu markup for this tutorial as you see below:<div id="menu-wrapper">
<ul>
<li><a href="#" title="Home"> Home </a></li>
<li><a href="#" title="About"> About </a></li>
<li><a href="#" title="Services"> Services </a></li>
<li><a href="#" title="Tutorials"> Tutorials </a></li>
<li><a href="#" title="Free Downloads"> Free Downloads </a></li>
<li><a href="#" title="Contact"> Contact </a></li>
</ul>
</div>Above code is the main menu of our drop down. Lets add the first-level drop down menu in the above code and then the second-level drop down menu.
<div id="menu-wrapper">
<ul>
<li><a href="#" title="Home"> Home </a></li>
<li><a href="#" title="About"> About </a></li>
<li><a href="#" title="Services"> Services </a>
<ul>
<li><a href="#" title="Logo Design">Logo Design</a></li>
<li><a href="#" title="Website Design">Website Design</a>
<ul>
<li><a href="#" title="Portfolio Websites">Portfolio Websites</a></li>
<li><a href="#" title="Corporate Websites">Corporate Websites</a></li>
<li><a href="#" title="Portals">Portals</a></li>
<li><a href="#" title="Contemporary Websites">Contemporary Websites</a></li>
</ul>
</li>
<li><a href="#" title="Print Design">Print Design</a></li>
<li><a href="#" title="Social Media Design">Social Media Design</a></li>
</ul>
</li>
<li><a href="#" title="Tutorials"> Tutorials </a></li>
<li><a href="#" title="Free Downloads"> Free Downloads </a></li>
<li><a href="#" title="Contact"> Contact </a></li>
</ul>
</div>
2) Now Lets add css code.
#menu-wrapper {
display:block;
width:900px;
margin:0 auto;
background:#333 url(../images/menu-bg.png) repeat-x 0px 0px scroll;
}
#menu-wrapper ul {
display:block;
list-style:none;
}
#menu-wrapper li {
display:block;
position:relative;
float:left;
}
#menu-wrapper li a:link, #menu-wrapper li a:visited {
display:inline-block;
padding:7px 15px;
color:#fff;
font-weight:bold;
text-shadow:#000 0px 1px 0px;
}
#menu-wrapper li a:hover, #menu-wrapper li.active a, #menu-wrapper li:hover a {
background:url(../images/menu-bg.png) repeat-x 0px -35px scroll;
color:#333;
text-shadow:#f5f6f8 0px 1px 0px;
}
#menu-wrapper li a:focus, #menu-wrapper li a:active {
background:url(../images/menu-bg.png) repeat-x 0px -70px scroll;
color:#fff;
text-shadow:#000 0px 1px 0px;
border:#4b4b4d 1px solid;
border-style:none solid none solid;
padding:7px 14px;
}
.haschild>a {
background-image:url(../images/submenu-arrow.png)!important;
background-position:right center!important;
background-repeat:no-repeat!important;
}
/* ------------- Submenu --------- */
#menu-wrapper li ul {
position:absolute;
border:#dadcdf 1px solid;
border-style:none solid solid solid;
left:0px;
top:34px;
display:none;
z-index:10000;
}
#menu-wrapper ul li ul.submenu li {
width:250px;
display:block;
}
#menu-wrapper ul li ul.submenu li a, #menu-wrapper ul li ul.submenu li:hover li a {
background:#ececec;
color:#333;
text-shadow:#fff 0px 1px 0px;
border-bottom:#fff 1px dotted;
display:block;
}
#menu-wrapper ul li ul.submenu li li a:hover, #menu-wrapper ul li ul.submenu li:hover a {
background:#333;
color:#fff;
text-shadow:#000 0px 1px 0px;
}
/* ------------- Level 2 ---------------------- */
#menu-wrapper li li ul {
position:absolute;
border:#dadcdf 1px solid;
border-style:none solid solid solid;
left:250px;
top:0px;
display:none;
z-index:10000;
}3) Lets add the jQuery code now
For this step we need the jquery framework to achieve the effects. You can get the latest jquery from here.Once you download the jquery we have to embed the same in the <head> tag of our html document and also the new js file which will contain our custom jquery code sinppet to call function as below:
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
4) Create the Script file
Lets create the script file now with the following code in it and put that in the same directory where all your JS files are. The following custom jquery code will get the jquery drop down effect for our menu.
$(document).ready(function() {
// Submenu Menu
$('#menu-wrapper ul li').hover(
function() {
$(this).find('ul:first').slideDown('slow');
}, function() {
$(this).find('ul').slideUp('fast');
});
});
No comments:
Post a Comment