JQuery Responsive DropDown Menu With Codes Must Watch
 |
| JQuery Responsive DropDown Menu |
a Nice DropDown Menu is Most Important for Every Website.it can Attarct More Visitor To Your Website. and Your Can Display Your Category ,Service etc as DropDown Menu.
It will help User to Find Menus,Service and Topic Easily.
use the below codes to create dropdown menu using jquery..
Overview: What You will Need:
 |
| JQuery DropDown Menu Folder Structure |
You will Needs 4 Files:
index.html
style.css
script.js
jquery_latest.js
Note: Put All files In same Folder.
Download jquery_latest.js from ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
Code For index.html
<!doctype html>
<html>
<head>
<title>Responsive DropDown Menu Using Jquery by MegaTech24.Blogspot.Com</title>
<link rel="stylesheet" href="style.css" type="text/css"
/>
<script src="jquery_latest.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<ul id="menu">
<li><a href="#">|Home|</a></li>
<li><a href="#">|Tutorials|</a>
<ul>
<li><a href="#">Web Development</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">CakePHP</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">CakePHP</a></li>
</ul>
</li>
<li><a href="#">|Online Help Guide|</a>
<ul>
<li><a href="#">SEO Guide</a></li>
<li><a href="#">Web Hosting Guide</a></li>
<li><a href="#">Love Guide</a></li>
<li><a href="#">Parenting Guide</a></li>
</ul>
</li>
<li><a href="#">|Online Course|</a>
<ul>
<li><a href="#">SEO Course(45)Videos</a></li>
<li><a href="#">CSE Lesson (150)Videos</a></li>
<li><a href="#">Love Guide</a></li>
<li><a href="#">Parenting Guide</a></li>
</ul>
</li>
<li><a href="#">|About Us|</a></li>
<li><a href="#">|Contact Us|</a></li>
<li><a href="#">|Like Us|</a></li>
</ul>
</div>
</body>
</html>
Code For style.css
body {
font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size: 12px;
}
#content {
width:1000px;
margin: 0 auto;
background: green;
padding: 3px;
min-height: 50px;
}
#menu li {
float: left;
list-style: none;
position: relative;
margin-right: 4px;
}
.rem_radius a,.rem_radius a:hover {
border-bottom-left-radius: 0!important;
border-bottom-right-radius: 0!important;
}
#menu li ul {
display: none;
float: left;
position: absolute;
top: 36px;
padding: 0;
}
#menu li ul li {
width: 150px;
border-radius: 0;
}
#menu li ul li a {
width: 230px;
background-color:black;
border-radius: 0;
}
#menu li ul li:first-child a,#menu li ul li:first-child a:hover {
border-top-right-radius: 6px!important;
}
#menu li ul li:last-child a,#menu li ul li:last-child a:hover {
border-bottom-left-radius: 6px!important;
border-bottom-right-radius: 6px!important;
}
#menu li a {
display: block;
float: left;
color: #fff;
background: green;
font-weight: bold;
text-decoration: none;
padding: 10px;
border-radius: 6px;
}
#menu li a:hover {
background: red;
border-radius: 6px;
}
#menu li ul li a:hover {
background: red;
border-radius: 0;
}
Code For script.js
$(document).ready(function () {
$('#menu li').hover(function () {
$(this).find('ul').slideDown(200);
}, function () {
$(this).find('ul').slideUp(200);
});
$('#menu li').hover(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('rem_radius');
}
}, function () {
$(this).removeClass('rem_radius');
});
});
that's it how to create dropdown menu using jquery..
Please Comments If You have any Problems.
If You Like This Article Please Like US on Facebook.
Thank You for reading My Article.
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.