Introduction:
Here
I will explain how to create simple jQuery dropdown menu using CSS with example or jQuery CSS
Menu 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
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
10 comments :
hi........ added this menu in my html site but is is not working in IE
so what is the solution for that?
Hi suresh please help me
I have my Review page, in that 3 fields are there.
review title, Description, and Destination.
When I click submit button, if user is already loggedin, that review will insert in to sql database, otherwise login model popup window will open.
If he/she add credentials, it has to go that review page.
Please help me with jQuery modal popup window.
How to write condition in button code ?
I wrote this button_click:
Collapse | Copy Code
if(Request.QueryString["userid"] != null)
{
//insert code..
}
else
{
}
can submenu to in submenu?
on tab (safari),after clicking on subitem, slid down is not working.
Hi, I want add sub menu dynamically(using code behind), please help me...
sir i want to remove first node i.e. root node in menu control (in asp menu control)... help
ajaywadekar13@gmail.com
thank u very much sir.nice blog..
For submenu hover..please correct this
.sub_items ul li a:hover{ with .sub_menu ul li a:hover{
please change sub_items with sub_menu ...unless it looks great
Note: Only a member of this blog may post a comment.