code is creating drop down menu using JavaScript. I can also used this code its working correctly. Its may be useful.
Step:1
Click here to download the jquery file.
<script type="text/javascript" src="JS/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ // This hides the menu when the page is clicked anywhere other than the menu. $(document).bind('click', function(e) { var $clicked = $(e.target); if (! $clicked.parents().hasClass("menu")){ $(".menu dd ul").hide(); $(".menu dt a").removeClass("selected"); } }); $(".menu dt a").click(function() { var clickedId = "#" + this.id.replace(/^link/,"ul"); // Hides everything else that the current menu $(".menu dd ul").not(clickedId).hide(); //Toggles the menu. $(clickedId).toggle(); //Add the selected class. if($(clickedId).css("display") == "none"){ $(this).removeClass("selected"); }else{ $(this).addClass("selected"); } }); // This function shows which menu item was selected in corresponding result place $(".menu dd ul li a").click(function() { var text = $(this).html(); $(this).closest('dl').find('.result').html(text); $(".menu dd ul").hide(); }); }); </script>
Its CSS class using this class and change the images and image path.
<style type="text/css"> .menu dl{ margin-left:5px; } .menu dd, .menu dt, .menu ul { margin:0px; padding:0px; } .menu dd { position:relative; } .menu dt a {background:#EEEEEE url(Images/privacyOff.png) no-repeat scroll right center; display:block; width:40px; height:22px; cursor:pointer;} .menu dt a.selected{ background:#EEEEEE url(Images/privacyOn.png) no-repeat scroll right center; } .menu dt a span { cursor:pointer; display:block; padding:5px;} .menu dd ul { background:#EEEEEE none repeat scroll 0 0; display:none; list-style:none; padding:3px 0; position:absolute; left:0px; width:160px; left:auto; right:0; border:1px solid #656565; cursor:pointer; } .menu dd ul li{ background-color:#EEEEEE; margin:0; width:160px; } .menu span.value { display:none;} .menu dd ul li a { display:block; font-weight:normal; width:137px; text-align:left; overflow:hidden; padding:2px 4px 3px 19px; color:#111111; text-decoration:none; } .menu dd ul li a:hover{ background:#656565; color:white; text-decoration:none; } .menu dd ul li a:visited{ text-decoration:none; } </style>
Its a HTML code just code and past change some thing in your drop down menu list.
<html><head> </head> <body> <div style="clear:both;">.</div> <div style="width:500px; margin:auto;"> <h1 style="margin:20px 0;">Facebook menu Menus</h1> <div style="height:300px;"> <div style="width:162px;"> <dl style="" class="menu"> <dt> <a class="" id="linkglobal" style="cursor: pointer;"></a></dt> <dd> <ul style="display: none;" id="ulglobal"> <li><a href="#">My Account</a></li> <li><a href="#">My Profile</a></li> <li><a href="#">My Product</a></li> <li><a href="#">My Feature</a></li> </ul> </dd> </dl> </div> </div> </div> </body></html>
0 comments
Post a Comment