как сделать так, чтобы выпадающее меню css сохранялось - PullRequest
Новая
       21

как сделать так, чтобы выпадающее меню css сохранялось

0 голосов
/ 14 июля 2011

У меня есть чистое выпадающее меню CSS, основанное на вложенных списках

Базовый CSS: 

#nav li ul {
  display:none;
  padding-right:3px;
  padding-bottom:3px;
  font-size: 9px;
}
#nav li ul:hover, #nav li:hover ul {
  display:inline;
  position:absolute;
  top:28px;
  background-color: #fc3;
}

Список: 

<ul id="nav">
  <li><a href="hours.php>Hours</a>
    <ul id="navhours">
      <li><a href="hours.php?id=1">Blacksburg</a></li>
      <li><a href="hours.php?id=2">Meadowbrook</a></li>
      <li><a href="hours.php?id=3">Floyd</a></li>
    </ul>  
  </li>
 <li><a href="navabout">About Us</a>
   <ul id="navabout">
     <li><a href="director.php">Director</a></li>
     <li><a href="board.php">Board of Trustees</a></li>
   </ul>
 </li>
</ul>

Я бы хотел сделать так, чтобы, если вы полностью наведете курсор мыши на последнее меню / подменю, над которым вы зависали, не исчезали ни на секунду или около того. Я чувствую, что это должно быть очень легко в jQuery, но мой мозг сегодня должен быть очень быстрым, потому что я просто не могу заставить его работать.

Спасибо!

Ответы [ 2 ]

1 голос
/ 14 июля 2011

HTML 

<ul id="nav">
  <li><a href="hours.php">Hours</a>
    <ul id="navhours">
      <li><a href="hours.php?id=1">Blacksburg</a></li>
      <li><a href="hours.php?id=2">Meadowbrook</a></li>
      <li><a href="hours.php?id=3">Floyd</a></li>
    </ul>  
  </li>
 <li><a href="navabout">About Us</a>
   <ul id="navabout">
     <li><a href="director.php">Director</a></li>
     <li><a href="board.php">Board of Trustees</a></li>
   </ul>
 </li>
</ul>

CSS 

#nav li ul {
  display:none;
  padding-right:3px;
  padding-bottom:3px;
  font-size: 9px;
  position:absolute;
  top:28px;
  background-color: #fc3;
}

JS 

$(document).ready(function(){
    $("#nav li").hover(function(){
        $("#nav li ul").stop().hide();
        $(this).find("ul").css("display","inline");
    },function(){
        $(this).find("ul").delay(1000).queue(function(){
            $(this).hide();
        });
    });
});

http://jsfiddle.net/FsVaX/

0 голосов
/ 14 июля 2011

Вы можете сделать это с помощью .mouseout ();функция в JQuery, но я бы посоветовал вам проверить плагин Hover Intent, здесь

...