<ul id="menu">
  <li class="menu">Sub 1
    <ul>
      <li>test 1</li>
      <li>test 2</li>
      <li>test 3</li>
      <li>test 4</li>
    </ul>
  </li>
  <li class="menu">Sub 2
    <ul>
      <li>test 1</li>
      <li>test 2</li>
      <li>test 3</li>
      <li>test 4</li>
    </ul>
  </li>
</ul>

Пример 1

var toggle = function(direction, display) {
    return function() {
      var self = this;
      var ul = $("ul", this);
      if( ul.css("display") == display && !self["block" + direction] ) {
        self["block" + direction] = true;
        ul["slide" + direction]("slow", function() {
          self["block" + direction] = false;
        });
      }
    };
  }
  $("li.menu").hover(toggle("Down", "none"), toggle("Up", "block"));
  $("li.menu ul").hide();

Результат выполнения кода выше:

Попробуйте сами

Полный код:

<!DOCTYPE html>
<html>
<head>
  <style>
    #menu, #menu ul {list-style-type:none;}
    #menu li.menu { float:right; width:150px; background:#06155F; color:#fff;}
  </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
     $(document).ready(function(){
var toggle = function(direction, display) {
    return function() {
      var self = this;
      var ul = $("ul", this);
      if( ul.css("display") == display && !self["block" + direction] ) {
        self["block" + direction] = true;
        ul["slide" + direction]("slow", function() {
          self["block" + direction] = false;
        });
      }
    };
  }
  $("li.menu").hover(toggle("Down", "none"), toggle("Up", "block"));
  $("li.menu ul").hide();
     });
  </script>
</head>
<body>
<ul id="menu">
  <li class="menu">Sub 1
    <ul>
      <li>test 1</li>
      <li>test 2</li>
      <li>test 3</li>
      <li>test 4</li>
    </ul>
  </li>
  <li class="menu">Sub 2
    <ul>
      <li>test 1</li>
      <li>test 2</li>
      <li>test 3</li>
      <li>test 4</li>
    </ul>
  </li>
</ul>
</body>
</html>

Попробуйте сами

Другой метод с меньшим количеством анимации:

Пример 2

        $("#menu li ul").hide(); 
	$("#menu li").hover(
        function () {
		$(this).children("ul").show();
        },function(){
		$(this).children("ul").hide();
	});//hover

Результат выполнения кода выше:

Попробуйте сами

Пример 2 - Полный код:

<!DOCTYPE html>
<html>
<head>
  <style>
    #menu, #menu ul {list-style-type:none;}
    #menu li.menu { float:right; width:150px; background:#06155F; color:#fff;}
  </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
     $(document).ready(function(){
        $("#menu li ul").hide(); 
	$("#menu li").hover(
        function () {
		$(this).children("ul").show();
        },function(){
		$(this).children("ul").hide();
	});//hover
     });
  </script>
</head>
<body>
<ul id="menu">
  <li class="menu">Sub 1
    <ul>
      <li>test 1</li>
      <li>test 2</li>
      <li>test 3</li>
      <li>test 4</li>
    </ul>
  </li>
  <li class="menu">Sub 2
    <ul>
      <li>test 1</li>
      <li>test 2</li>
      <li>test 3</li>
      <li>test 4</li>
    </ul>
  </li>
</ul>
</body>
</html>

Попробуйте сами

Была ли эта информация полезной?

Да Нет

Навигация

Простой показ подменю при наведении.

Пример 1

Полный код:

Пример 2

Пример 2 - Полный код:

Комментарии