Today i would like to show, How to Create Drop Down Menu using CSS3 and jQuery. Designing a Simple Drop Down Menu with HTML by Implementing CSS and jQuery is very easy to create. A simple horizontal menu that shows it’s sub menu on mouse hover. when you hover a mouse on main link it will show it’s sub menu. just take a look at this tutorial.
When mouse hovered on main menu the following .hover() function called.
That's it, we have created here a simple Drop Down Menu with HTML, CSS and jQuery.
you can download this tutorial by using following Download link and implement it in your projects.
The HTML
Simple HTML Code , Menu Structure With UL , LI tags
<div class="wrap">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About cleartuts</a>
<ul>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Get in Touch</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">PHP & MySql</a></li>
<li><a href="#">PHP OOP</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub-menu 1</a></li>
<li><a href="#">Sub-menu 2</a></li>
<li><a href="#">Sub-menu 3</a></li>
<li><a href="#">Sub-menu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Website Design</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">User Interface</a></li>
<li><a href="#">Android</a></li>
</ul>
</li>
<li><a href="#">Categories</a>
<ul>
<li><a href="#">PHP OOP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySql</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
</ul>
</div>
The Javascript/jQuery
Javascript contains .hover(), .slideDown and .slideUp() functions.When mouse hovered on main menu the following .hover() function called.
<script type="text/javascript">
$(document).ready(function()
{
$('#nav li').hover(function()
{
$('ul', this).slideDown(50);
$(this).children('a:first').addClass("hov");
}, function()
{
$('ul', this).slideUp(50);
$(this).children('a:first').removeClass("hov");
});
});
</script>
The CSS
* {
margin: 0;
padding: 0;
}
body {
font-family: "Comic Sans MS", cursive;
font-size: 15px;
color: #232323;
}
#head {
background: #f9f9f9;
height: 100px;
padding-top: 15px;
border-bottom: 1px solid #d5dce8;
}
.wrap {
width: 800px;
margin: 0 auto;
}
/* nav menu */
#nav {
margin: 0;
padding: 0;
list-style: none;
border-left: 1px solid #d5dce8;
border-right: 1px solid #d5dce8;
border-bottom: 1px solid #d5dce8;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
height: 50px;
padding-left: 15px;
padding-right: 15px;
background: #f9f9f9;
}
#nav li {
float: left;
display: block;
background: none;
position: relative;
z-index: 999;
margin: 0 1px;
}
#nav li a {
display: block;
padding: 0;
font-weight: 700;
line-height: 50px;
text-decoration: none;
color: #818ba3;
zoom: 1;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
padding: 0px 12px;
}
#nav li a:hover, #nav li a.hov {
background-color: #fff;
border-left: 1px solid #d5dce8;
border-right: 1px solid #d5dce8;
color: #576482;
}
/* subnav */
#nav ul {
position: absolute;
left: 1px;
display: none;
margin: 0;
padding: 0;
list-style: none;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
padding-bottom: 3px;
}
#nav ul li {
width: 180px;
float: left;
border-top: 1px solid #fff;
text-align: left;
}
#nav ul li:hover {
border-left: 0px solid transparent;
border-right: 0px solid transparent;
}
#nav ul a {
display: block;
height: 20px;
line-height: 20px;
padding: 8px 5px;
color: #666;
border-bottom: 1px solid transparent;
text-transform: uppercase;
color: #797979;
font-weight: normal;
}
#nav ul a:hover {
text-decoration: none;
border-right-color: transparent;
border-left-color: transparent;
background: transparent;
color: #4e4e4e;
}
That's it, we have created here a simple Drop Down Menu with HTML, CSS and jQuery.
you can download this tutorial by using following Download link and implement it in your projects.
Awesome, usually im adding menu is manuany not using database this is cool tutorial i like it,,,, visit my IT blog guys im from indonesian materi-it.com, thanks for this usefull article :)
ReplyDeleteYou're welcome, septian
Deleteand keep visiting... :)