Simple jQuery Drop Down Menu
There are many jQuery sliders created already. This is the one that I developed from scratch which only has the minimum needed features to work very light and efficiently on any type of web development project. You will need to have the original jQuery script attached to your page before adding this code and make sure to add all the required code.
Here is the jQuery code that is required:
$(document).ready(function () {
$(‘#nav li’).hover(
function () {
//show submenu
$(“ul”, this).slideDown(100); },
function () {
//hide submenu
$(“ul”, this).slideUp(100); } );
});
$(document).ready(function() {
$().piroBox_ext({
piro_speed : 700,
bg_alpha : 0.5,
piro_scroll : true
});
});
Here is the CSS code that is required:
/* submenu, it’s hidden by default display:none; */
.nav li ul { display:none; position:absolute; top:68px; left:30px; margin:0 0 0 -1px; list-style:none; background-color:#0CF; -moz-border-radius: 8px; border-radius: 8px; padding-top:8px; padding-bottom:8px; width:200px; opacity:0.96; }
.nav li ul li { padding-bottom:0px; width:170px; float:left; border-top:1px solid #fff; display:block; font-size:15px; margin-top:5px; margin-left:15px; background:none; padding-left:0px; ; }
.nav li ul li a { text-decoration:none; }
.nav li ul li a:hover { color:#FFF; }
#devNav { position:absolute; left:150px;}
Here is the HTML code that is required:
<ul class=”nav” id=”nav”>
<li><a href=”‘mainNav.php”>Main Navigation Item</a>
<ul class=”subnav”>
<li><a href=”‘submenu1.php”>Sub Menu Item 1</a></li>
<li><a href=”submenu2.php”>Sub Menu Item 2</a></li>
</ul>
</li></ul>
I hope that this simple jQuery slider helps you out in any of your project and as always please feel free to leave any comments or questions in the area below.
