Create Professional and Advance Dropdown Menu in Jquery

Just few days ago we learn to create simple Horizontal and vertical drop-down menu in CSS that was just for giving you an idea to create simple side bar and horizontal sub-menu but today we are going to create professional and advance menu. When you visit big websites like Facebook, LinkedIn, Google+ or Yahoo, notice that they use advance Jquery menu for account settings and user sign-out etc. So we create that type of professional drop-down menu for our website. Before start tutorial you must see the Live Demo so that you can understand what actually we are going to create .

Creating Basic Structure in HTML

Create new file write simple HTML Code as below, and save that file with extension .html :

<html>
<head><title>Create drop-down Menu using Jquery and JavaScript</title></head>
<div align=”center”>
<h3>jQuery Dropdown – Click on My Account below</h3>
<form action=”#” method=”post” style=”width:119px; height:160px; padding:30px;” >

<div class=”dropdown”>
<a class=”mainmenu toggle-login”>My Account <span class=”icon”>?</span></a>

<div class=”submenu”>
<ul class=”menuitems”>
<li ><a href=”#”>Advertising</a></li>
<li ><a href=”#”>Account setting</a></li>
<li ><a href=”#”>Privacy setting</a></li>
<li ><a href=”#”>Logout</a></li> <hr>
<li ><a href=”#”>Help</a></li>
</ul>
</div>
</div>
</form>
</div>

</body>
</html>

I hope you understand this simple code as already well explained in our previous tutorials. we use unordered-list to create menu items. We use one extra thing above that is “?” in class icon, we actually convert this icon into beautiful small triangle with the help of css. This Icon is used to Show and Hide (Toggle) our menu items.

Give Styling to Menu in CSS

Now we give some styling and positioning to our menu and list items. You may use external style sheet or paste this css code in <head> tag. CSS code is given below :

body {
}
.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: “Arial”, Georgia;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#3B5998;
color: #FFFFFF;
text-decoration: none;
}
a.mainmenu
{
font-size: 14px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.menuitems
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}

.icon{
color: #0099FF;
}
.toggle-login
{
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}

Using Jquery to Create Advance Drop-down Menu

First of all before using Jquery you must include Jquery library in your <head> section. Jquery is actually an advance library of JavaScript which has built-in functions. We call that functions as per need. So add Jquery link as :

<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
</head>

That’s it. Now add this JavaScript Code in your body section :

<script type=”text/javascript”>
$(document).ready(function () {
$(‘.toggle-login’).click(function () {
$(this).next(‘#login-content’).slideToggle();
$(this).toggleClass(‘active’);

if ($(this).hasClass(‘active’)) $(this).find(‘span’).html(‘▲’)
else $(this).find(‘span’).html(‘▼’)
})
});

$(document).ready(function () {

$(“.mainmenu”).click(function () {
var X = $(this).attr(‘id’);
if (X == 1) {
$(“.submenu”).hide();
$(this).attr(‘id’, ’0′);
}
else {
$(“.submenu”).show();
$(this).attr(‘id’, ’1′);
}
});
$(“.submenu”).mouseup(function () {
return false
});
$(“.mainmenu”).mouseup(function () {
return false
});
$(document).mouseup(function () {
$(“.submenu”).hide();
$(“.mainmenu”).attr(‘id’, ”);
});
});

</script>

Final Code

Now that’s all. I am giving you final code in one file to review. Just Copy/Paste this code in any html file and see the output.

<html>
<head>
<style>
body {
}
.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: “Arial”, Georgia;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#3B5998;
color: #FFFFFF;
text-decoration: none;
}
a.mainmenu
{
font-size: 14px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.menuitems
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}

.icon{
color: #0099FF;
}
.toggle-login
{
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
</style>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
</head>
<body>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘.toggle-login’).click(function () {
$(this).next(‘#login-content’).slideToggle();
$(this).toggleClass(‘active’);

if ($(this).hasClass(‘active’)) $(this).find(‘span’).html(‘▲’)
else $(this).find(‘span’).html(‘▼’)
})
});

$(document).ready(function () {

$(“.mainmenu”).click(function () {
var X = $(this).attr(‘id’);
if (X == 1) {
$(“.submenu”).hide();
$(this).attr(‘id’, ’0′);
}
else {
$(“.submenu”).show();
$(this).attr(‘id’, ’1′);
}
});
$(“.submenu”).mouseup(function () {
return false
});
$(“.mainmenu”).mouseup(function () {
return false
});
$(document).mouseup(function () {
$(“.submenu”).hide();
$(“.mainmenu”).attr(‘id’, ”);
});
});

</script>

<div align=”center”>
<h3>jQuery Dropdown – Click on My Account below</h3>
<form action=”#” method=”post” style=”width:119px; height:160px; padding:30px;” >

<div class=”dropdown”>
<a class=”mainmenu toggle-login”>My Account <span class=”icon”>?</span></a>

<div class=”submenu”>
<ul class=”menuitems”>
<li ><a href=”#”>Advertising</a></li>
<li ><a href=”#”>Account setting</a></li>
<li ><a href=”#”>Privacy setting</a></li>
<li ><a href=”#”>Logout</a></li> <hr>
<li ><a href=”#”>Help</a></li>
</ul>
</div>
</div>
</form>
</div>

</body>
</html>

what you think now ? is it not just like “Facebook Account Setting drop down menu” ?

So now create these type of professional links navigation for your sites. You may alter CSS code according to your styling requirements. Your questions and queries are more then welcome below. I will try my best to solve them for you. Also share this with your friends and on social networks as you know sharing is caring

1 comment:

Web MicroSeptember 2, 2022 at 6:09 AM
Thanks for Sharing,
If you're looking for the best website design Canada, has to offer, look no further than webmicro.co.in. Our team of experienced professionals will work with you to create a website that not only looks great but also delivers results.