jQuery Dropdown Menu
After searching for simple jQuery dropdown menu and not finding any (?) I have decided to write my own ( it works btw
). Ok, we need CSS, HTML, and of course JS.
1. CSS ( please modify it to suite your needs )
#menu{margin: 0 auto;width:1000px;height:39px;font-size:14px;font-weight:bold;background:transparent url(gfx/meni0.png) repeat-x top left;border-top:4px solid #fff;}
#menu ul{margin:0;padding:0;list-style-type:none;width:auto;}
#menu ul li{display:block;float:left;margin:0;}
#menu ul li a{display:block;color:#fff;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(gfx/menidiv.png) no-repeat top right;}
#menu ul li a:hover,#meni ul li a.trenutni{color:#000;background:#fff url(gfx/meni1.png) repeat-x;}
#menu ul li ul{margin: 0; padding: 0; position: absolute; display:none;}
#menu ul li ul li{float: none; display: inline;}
#menu ul li ul li a{display:block;background:#fff;height:30px;width:120px;text-decoration:none;text-align:center;font-size:14px;color:#000;white-space: nowrap;border-bottom: 1px dashed #ff0000;}
#menu ul li ul li a:hover{color:#fff;background:#ff0000;}
2. The Markup ( you'll get it )
<div id="meni">
<ul>
<li><a href="http://www.webarto.com">Webarto's</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">Simple</a></li>
<li><a href="#">Drop</a></li>
<li><a href="#">Down</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Have</a></li>
<li><a href="#">Fun!</a></li>
</ul>
</div>
2. jQuery - spice things up !
$(document).ready(function()
{
$("#menu ul li").hover(function () {
$(this).find("ul").slideDown(400);
},
function () {
$(this).find("ul").slideUp(1000);
});
});
That should be it
If you have any trouble mail me at dejan.marjanovic@gmail.com
