Choose from our various pricing plans. There is a package for everyone!


jQuery drop down menu

View previous topic View next topic Go down

jQuery drop down menu

Post by Mr.Joker on Sun Jun 09, 2013 8:09 pm

This is simple jQuery drop down menu I did for someone who might need. Smile
DEMO: Click here
Coder: Mr.Joker
Description: There are 3 different versions of menu, so you can pick one you want.
Code:
Red version:
Code:
<html>
<script src="jquery.js"></script>
<head>
<style type="text/css">
* {
padding:0px;
margin:0px;
}
#menu {
margin-top:50px;
margin-left:50px;
border:1px solid #cacaca;
}
#menu, #menu ul {
list-style-type: none;
width:200px;
}
#menu li {
padding:10px;
cursor: pointer;
background: #dddddd;
border-bottom: 1px solid #cacaca;
border-left:3px solid #f12727;
}
#menu li a { text-decoration: none;color:#6b6d8f;font-family:Segoe UI; }
#menu > li > a{
padding: 2px 10px;
font-weight: bold;
}
#menu li li {
cursor: auto;
border: 0;
padding: 0 14px;
width:80%;

}
#menu li li a{
color:#9092b4;
}
</style>
<script>
$(document).ready(function() {
$('#menu > li > ul')
.hide()
.click(function(event) {
event.stopPropagation();
});
$('#menu > li').toggle(function() {
$(this).find('ul').slideDown();
}, function() {
$(this).find('ul').slideUp();
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="#">Tutorials</a>
<ul class="active">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Premium Gallery</a></li>
<li><a href="#">Open Source Gallery</a></li>
</ul>
</li>
<li><a href="#">Social Networks</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
</ul>
Orange:
Code:
<html>
<script src="jquery.js"></script>
<head>
<style type="text/css">
* {
padding:0px;
margin:0px;
}
#menu2 {
margin-top:50px;
margin-left:50px;
border:1px solid #cacaca;
}
#menu2, #menu2 ul {
list-style-type: none;
width:200px;
}
#menu2 li {
padding:10px;
cursor: pointer;
background: #dddddd;
border-bottom: 1px solid #cacaca;
border-left:3px solid #f12727;
}
#menu2 li a { text-decoration: none;color:#6b6d8f;font-family:Segoe UI; }
#menu > li > a{
padding: 2px 10px;
font-weight: bold;
}
#menu2 li li {
cursor: auto;
border: 0;
padding: 0 14px;
width:80%;

}
#menu2 li li a{
color:#9092b4;
}
</style>
<script>
$(document).ready(function() {
$('#menu2 > li > ul')
.hide()
.click(function(event) {
event.stopPropagation();
});
$('#menu2 > li').toggle(function() {
$(this).find('ul').slideDown();
}, function() {
$(this).find('ul').slideUp();
});
});
</script>
</head>
<body>
<ul id="menu2">
<li><a href="#">Tutorials</a>
<ul class="active">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Premium Gallery</a></li>
<li><a href="#">Open Source Gallery</a></li>
</ul>
</li>
<li><a href="#">Social Networks</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
</ul>
Blue:
Code:
<html>
<script src="jquery.js"></script>
<head>
<style type="text/css">
* {
padding:0px;
margin:0px;
}
#menu1 {
margin-top:50px;
margin-left:50px;
border:1px solid #cacaca;
}
#menu1, #menu1 ul {
list-style-type: none;
width:200px;
}
#menu1 li {
padding:10px;
cursor: pointer;
background: #dddddd;
border-bottom: 1px solid #cacaca;
border-left:3px solid #f12727;
}
#menu1 li a { text-decoration: none;color:#6b6d8f;font-family:Segoe UI; }
#menu > li > a{
padding: 2px 10px;
font-weight: bold;
}
#menu1 li li {
cursor: auto;
border: 0;
padding: 0 14px;
width:80%;

}
#menu1 li li a{
color:#9092b4;
}
</style>
<script>
$(document).ready(function() {
$('#menu1 > li > ul')
.hide()
.click(function(event) {
event.stopPropagation();
});
$('#menu1 > li').toggle(function() {
$(this).find('ul').slideDown();
}, function() {
$(this).find('ul').slideUp();
});
});
</script>
</head>
<body>
<ul id="menu1">
<li><a href="#">Tutorials</a>
<ul class="active">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Premium Gallery</a></li>
<li><a href="#">Open Source Gallery</a></li>
</ul>
</li>
<li><a href="#">Social Networks</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
</ul>


Please read forum rules. Don't request help via PM!

avatar
Mr.Joker
Premium Member


Age : 25
Posts : 283
Join date : 2012-06-24
Reputation : 21

View user profile

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum