jq menu

This is simple J-query horizontal drop down menu light weight and simple to use. This menu has tested in major browsers and found satisfactory. The skeleton of the web page is here under: <html> <head> <script type="text/java script"> ... the java script code goes here.. </script> <style type="text/css"> ... the CSS code goes here ... </style> </head> <body> ... html code goes here... </body> <html> JQUERY CODE CODE(in header):
<script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $(".ks").click(function () { var divname= this.value; $("#"+divname).show("slow").siblings().hide("slow"); }); }); </script>
CSS CODE (in header):
<style type="text/css"> .ks { width: 100px; height: 30px; padding: 5px 10px; font-size: 15px; } .sm { display: none; width: 515px; height: 50px; padding: 5px; border-top: 10px solid #ffffff;} .sm a{ padding:5px 10px; font-size: 18px; text-decoration: none; margin: 5px; } .sm a:hover{ color: red; font-weight: bold; text-decoration: underline; } </style>
HTML CODE (in body):
<input type="button" id="k1" class="ks" value="MENU-1"></input> <input type="button" id="k2" class="ks" value="MENU-2"></input> <input type="button" id="k3" class="ks" value="MENU-3"></input> <input type="button" id="k4" class="ks" value="MENU-4"></input> <input type="button" id="k5" class="ks" value="MENU-5"></input> <div> <div id="MENU-1" class="sm"> <a href=" #">SUB 1-1 </a> <a href="#">SUB 1-2 </a><a href=" #">SUB 1-3 </a> <a href="#">SUB 1-4 </a> <a href="#">SUB 1-5 </a> </div> <div id="MENU-2" class="sm"> <a href=" #">SUB 2-1 </a> <a href="#">SUB 2-2 </a><a href=" #">SUB 2-3 </a> <a href="#">SUB 2-4 </a> <a href="#">SUB 2-5 </a> </div> <div id="MENU-3" class="sm"> <a href=" #">SUB 3-1 </a> <a href="#">SUB 3-2 </a><a href=" #">SUB 3-3 </a> <a href="#">SUB 3-4 </a> <a href="#">SUB 3-5 </a> </div> <div id="MENU-4" class="sm"> <a href=" #">SUB 4-1 </a> <a href="#">SUB 4-2 </a><a href=" #">SUB 4-3 </a> <a href="#">SUB 4-4 </a> <a href="#">SUB 4-5 </a> </div> <div id="MENU-5" class="sm"> <a href=" #">SUB 5-1 </a> <a href="#">SUB 5-2 </a><a href=" #">SUB 5-3 </a> <a href="#">SUB 5-4 </a> <a href="#">SUB 5-5 </a> </div> </div>



No comments:

Click Here To add Comment

Post a Comment