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>

Step:2

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>


Step:3 

 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>
Output:

0 comments

Related Posts Plugin for WordPress, Blogger...