Jquery Simple Drop Down Menu

From Code Trash
Jump to: navigation, search

Intro

I have been trying for a simple jquery drop down menu and i found the following.
Still CSS drop down without using jquery is available in A List Apart site.

Jquery simple Drop down tree menu 1

<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<style type="text/css">
 
ul#nav, ul#nav ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
 
ul#nav ul {
  border: 1px solid #999;
  background-color: #ccc;
  display: none;
  position: absolute;
  z-index: 9;
}
 
ul#nav li {
  display: inline;
  float: left;
  text-indent: 0px;
  margin: 0px;
  margin: 0px;
  margin: 0px;
  width: 180px;
}
 
ul#nav ul li a {
  display: block;
  text-decoration: none;
  color: #000;
  padding: 2px;
}
 
ul#nav ul li a:hover {
  background-color: #000;
  color: #fff;
}
 
ul#nav li li {
  display: block;
  float: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
  $('ul#nav > li').hover(function() {
    $('ul:first', this).show();
  },
  function() {
    $('ul:first', this).hide();
  });
 
  $('ul#nav li li').hover(function() {
    $('ul:first', this).each(function() {
      $(this).css('top', $(this).parent().position().top );
      $(this).css('left', $(this).parent().position().left + $(this).parent().width() );
      $(this).show();
    });
  },
  function() {
    $('ul:first', this).hide();
  });
});
 
</script>
</head>
<body>
 
<ul id="nav">  
  <li><a href="#">menu item 1</a>
 
    <ul>
      <li><a href="#">sub menu item 1</a>
        <ul>
          <li><a href="#">sub sub menu item 1</a></li>
          <li><a href="#">sub sub menu item 2</a></li>
          <li><a href="#">sub sub menu item 3</a></li>
          <li><a href="#">sub sub menu item 4</a></li>
 
        </ul>
      </li>
      <li><a href="#">sub menu item 2</a>
        <ul>
          <li><a href="#">sub sub menu item 1</a></li>
          <li><a href="#">sub sub menu item 2</a></li>
          <li><a href="#">sub sub menu item 3</a></li>
 
          <li><a href="#">sub sub menu item 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">menu item 2</a>
    <ul>
      <li><a href="#">sub menu item 1</a>
 
        <ul>
          <li><a href="#">sub sub menu item 1</a></li>
          <li><a href="#">sub sub menu item 2</a></li>
          <li><a href="#">sub sub menu item 3</a></li>
          <li><a href="#">sub sub menu item 4</a></li>
        </ul>
      </li>
 
      <li><a href="#">sub menu item 2</a>
        <ul>
          <li><a href="#">sub sub menu item 1</a></li>
          <li><a href="#">sub sub menu item 2</a></li>
          <li><a href="#">sub sub menu item 3</a></li>
          <li><a href="#">sub sub menu item 4</a></li>
 
        </ul>
      </li>
    </ul>
  </li>
</ul>

Jquery simple Drop down tree menu 2


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){    
    $("#dropdownbutton").click(function () {
      $("#menu").slideToggle("slow");
    });
  });
  </script>
</head>
<body>
  <a href="#" id="dropdownbutton">Show Menu</a>
  <ul id="menu" style="display:none">
  	<li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</body>
</html>

Drop down links

Retrieved from "http://vikku.info/code-trash/index.php?title=Jquery_Simple_Drop_Down_Menu&oldid=971"