Introduction:
Here
I will explain how to show jQuery dropdown menu on
hover with CSS example or show/hide dropdown menu on hover/mouseout
using jQuery.
Description:
In previous articles I explained jQuery dropdown menu with CSS, jQuery Bounce Menu Example, jQuery floating navigation menu on scrolling and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to show/hide dropdown menu on hover/mouseout using jQuery.
In previous articles I explained jQuery dropdown menu with CSS, jQuery Bounce Menu Example, jQuery floating navigation menu on scrolling and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to show/hide dropdown menu on hover/mouseout using jQuery.
To implement this we need to write the
code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery hover dropdown menu with css example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function()
{
$(".menu").hover(
function() { $(".sub").slideToggle(400);
},
function() { $(".sub").hide();
}
);
});
</script>
<style type="text/css">
a{
text-decoration: none;
}
.menu{
font-family: Arial;
color: #515151;
width: 200px;
position: relative;
height: 40px;
text-align:left;
width: 202px;
margin: 0 auto;
}
.menu li a{
color: #515151;
display: block;
padding: 6px 15px;
cursor: pointer;
font-size: 14px;
}
.menu li a:hover{
background: #f44141;
color: #fff;
}
.sub{
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
padding: 40px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
}
a.hover-link{
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
padding: 10px 0 1px 10px;
height: 28px;
cursor:pointer;
border-radius: 5px 5px 0 0;
font-weight: bold;
border: 1px solid #ddd;
}
.sub-options{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
}
</style>
</head>
<body>
<div class='menu'>
<a class='hover-link'>Hover on Menu</a>
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
|
Live
Demo
For
Live Demo 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
|
|||
11 comments :
wo tnks bro
Hi how are you
How are you badri
very nice Article
can you tell me how can i animate uppar side ? thanks
Not showing menu when postback occurs
Can We load it in dynamic
ewq
How to add scroll in this example ?
It's worked for me. Thanks for wonderful Example :)
very nice. can u show me how to make the menu dynamically by get the menu list from db?
Note: Only a member of this blog may post a comment.