I ve designed a simple jquery dropdown Menu without using any jquery menu plugins....
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script>
<style type="text/css">
ul, li{margin:0; padding:0; list-style:none;}
/* Targeting both first and second level menus */
#Programming li { float: left; position: relative;font-family:Arial,Helvetica,sans-serif; }
#Programming li a { background: #f3fded; border: 3px solid #333f31; color: #333; display: block; margin: 0 5px 0 0; padding: 5px 8px;text-decoration:none; font-size:110%;font-weight:bold;}
#Programming li a:hover { background: #333f31;color:#fff; text-decoration: none; font-size:110%;font-weight:bold;}
/* Targeting the first level menu */
#Programming { display: block; height: 35px; padding: 10px 0; width: 700px; z-index: 100; position: absolute;}
#Programming > li > a { font-size:110%;font-weight:bold; }
/* Targeting the second level menu */
#Programming li ul { background: #f3fded; border: 3px solid #333f31; color: #333; display: none; margin: -3px 0 0 0; width: 105px; position: absolute; }
#Programming li ul li { width: 100% }
#Programming li ul li a { background: none; border: none; line-height: 30px; margin: 0; padding: 0 0 0 5px; text-decoration:none; font-size:110%; font-weight:bold;}
#Programming li ul li a:hover { background: #333f31;color:#fff;font-size:110%;font-weight:bold;}
/* A class of current will be added via jQuery */
#Programming li.current > a { background: #333f31;color:#fff; font-size:110%;font-weight:bold;}
/* CSS fallback */
#Programming li:hover > ul.child { display: block; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="ProgMenu" style="padding-left: 45px;">
<ul id="Programming">
<li><a href="#">.net</a>
<ul class="child">
<li><a href="#">asp.net</a></li>
<li><a href="#">WPF</a></li>
<li><a href="#">Winforms</a></li>
<li><a href="#">Silverlight</a></li>
</ul>
</li>
<li><a href="#">java</a>
<ul class="child">
<li><a href="#">Struts</a></li>
<li><a href="#">Spring</a></li>
<li><a href="#">Hibernate</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#Programming ul.child").removeClass("child");
$("#Programming li").has("ul").hover(function() {
$(this).addClass("current").children("ul").fadeIn();
}, function() {
$(this).removeClass("current").children("ul").stop(true, true).css("display", "none");
});
});
</script>
</div>
</form>
</body>
</html>
No comments:
Post a Comment