JS VERTICAL MENU

This is a simple vertical drop down menu supported by java script tested in major browsers. The length and width of the menu area to be defined before setting this menu. This depends on the hover effects of Java script. entire source code is given below. The code pattern would:

<html> <head> <style type="text/css"> ...CSS code.. </style> <script type="text/javascript"> .... js code... </script> </head> <body> ... html code .. </body> </html>

For more menu examples   CLICK HERE

JAVA SCRIPT CODE (in header):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#menu > li').hover(function () { $(this).find("ul:first").show(); }, function () { $(this).find("ul:first").hide(); } ); $('#menu li li').hover(function () { $('ul:first', this).each(function () { var p = $(this).parent(); $(this).css('top', p.position().top) .css('left', p.position().left + p.width()) .show(); );}, function () { $('ul:first', this).hide(); } ); }); </script>
CSS CODE (in header):
<style type="text/css"> #menu { margin-left: 5px; } #menu ul{margin: 0;padding: 0;font-family: verdana, arial, Helvetica, sans-serif;} #menu li { list-style-type: none; } #menu a{display: block; padding: 5px 10px; width: 130px; border-left: 10px solid #1958b7; color: #fff; background: #2175bc; margin: 0 0 1px 0; text-decoration: none; } #menu a:hover{color: pink; background: #2586d7; border-left: 10px solid #1c64d1; } .submenu { display: none; } .submenu a{ text-align: right; font: 15px; border-left: 10px solid #abc123; text-decoration: none; } .submenu a:hover{ font-weight:bold; } </style>
HTML CODE ( in body):
<ul id="menu"> <li><a href="#">MENU 1</a> <ul class="submenu"> <li><a href="#">SUB 1-1</a> <li><a href="#">SUB 1-2</a></li> <li><a href="#">SUB 1-3</a></li> <li><a href="#">SUB 1-4</a></li> </ul> </li> <li><a href="#">MENU 2</a> <ul class="submenu"> <li><a href="#">SUB 2-1</a> <li><a href="#">SUB 2-2</a></li> <li><a href="#">SUB 2-3</a></li> <li><a href="#">SUB 2-4</a></li> </ul> </li> <li><a href="#"> MENU 3</a> <ul class="submenu"> <li><a href="#">SUB 3-1</a> <li><a href="#">SUB 3-2</a></li> <li><a href="#">SUB 3-3</a></li> <li><a href="#">SUB 3-4</a></li> </ul> </li> <li><a href="#">MENU 4</a> <ul class="submenu"> <li><a href="#">SUB 4-1</a> <li><a href="#">SUB 4-2</a></li> <li><a href="#">SUB 4-3</a></li> <li><a href="#">SUB 4-4</a></li> </ul> </li> <li><a href="#">MENU 5</a> <ul class="submenu"> <li><a href="#">SUB 5-1</a> <li><a href="#">SUB 5-2</a></li> <li><a href="#">SUB 5-3</a></li> <li><a href="#">SUB 5-4</a></li> </ul> </li> </ul>

No comments:

Click Here To add Comment

Post a Comment