Introduction:
Here I will explain how to create simple jQuery dropdown menu using CSS with example or jQuery CSSMenu with Submenu example. jQuery dropdown menu is used to provide better navigation menu for users in website.
Description:
In previous articles I explained jQuery Menu with Bounce effect, CSS Tabbed Menu with rounded corners,jQuery fancy switch on and off effects example, jQuery convert upper case to lower case and many articles relating to jQuery, asp.net. Now I will explain how to implement jQuery Dropdown menu or menu with submenu using jQuery.
In previous articles I explained jQuery Menu with Bounce effect, CSS Tabbed Menu with rounded corners,jQuery fancy switch on and off effects example, jQuery convert upper case to lower case and many articles relating to jQuery, asp.net. Now I will explain how to implement jQuery Dropdown menu or menu with submenu using jQuery.
To implement dropdown menu we need to write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Simple Dropdown Menu or Menu with Submenu</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.menu ul li').hover(
function () {
$('.sub_menu', this).stop(true, true).slideDown(); /*slideDown the subitems on mouseover*/
}, function () {
$('.sub_menu', this).stop(true, true).slideUp(); /*slideUp the subitems on mouseout*/
});
});
</script>
<style type="text/css">
.menu{
width:600px;
font-family: verdana, Segoe UI;
background-color:#B34C00;
margin:0 auto;
height:38px;
border: 1px solid #B34C00;
border-radius: 4px; /*To make the corners rounded in IE*/
-moz-border-radius: 4px; /*this is for mozilla*/
-webkit-border-radius: 4px; /*chrome and other browsers*/
box-shadow: 0 1px 1px #dddddd inset;
-moz-box-shadow: 0 1px 1px #dddddd inset;
-webkit-box-shadow: 0 1px 1px #dddddd inset;
}
.menu ul{
padding:0px;
margin: 0px;
list-style: none;
}
.menu ul li{
display: inline-block;
float:left;
position: relative;
}
.menu ul li a{
color:#ffffff;
text-decoration: none;
display: block;
padding:10px 15px;
}
.menu ul li a:hover{
background-color: #666666;
}
.sub_menu{
position: absolute;
background-color: #666666;
width:200px;
top:38px;
left:0px;
display:none; /*hide the subitems div tag initially*/
border-bottom:4px solid #B34C00; /*just to add a little more good look*/
}
.sub_menu ul li{
width:200px;
}
.sub_menu ul li a{
color:#ffffff;
text-decoration: none;
display: block;
padding:10px 15px;
}
.sub_items ul li a:hover{
background-color: #777777;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<div class="sub_menu">
<ul>
<li><a href="#">The Company</a></li>
<li><a href="#">The Website</a></li>
<li><a href="#">The author</a></li>
</ul>
</div>
</li>
<li><a href="#">Tutorials</a>
<div class="sub_menu">
<ul>
<li><a href="#">Asp.net Tutorials</a></li>
<li><a href="#">Jquery Tutorials</a></li>
<li><a href="#">Sql Tutorials</a></li>
<li><a href="#">Other tutorials</a></li>
</ul>
</div>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</div>
</body>
</html>
|
Live Demo
To check for live demo mouse hover on below menu
No comments:
Post a Comment