Добавление setTimeout UL меню с использованием JavaScript - PullRequest
Новая
       22

Добавление setTimeout UL меню с использованием JavaScript

0 голосов
/ 19 декабря 2010

Я пытаюсь добавить задержку в выпадающее меню.Я хочу, чтобы меню оставалось видимым в течение примерно двух секунд после того, как курсор отошел от него.Вот пример моего HTML. 

<ul class="select">
  <li><a><b>Home</b></a></li>
  <li><a><b>Accommodation</b></a>
    <ul class="sub">
      <li><a>Hotels</a></li>
      <li><a>Luxury Villas</a></li>
      <li><a>Apartments</a></li>
      <li><a>Hostels</a></li>
    </ul>
  </li>
</ul>

Вот CSS, который я использую.

nav {

height:30px;
width: 904px;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:13px;
z-index:500;
background-color: #666;
background: url(../images/sub-nav_04.jpg);

}

nav.select {

margin: 0;обивка: 0;список-стиль: нет;бело-пространство: Nowrap;}

nav li {

float:left;

}

nav. Выберите {

display:block;
height:30px;
float:left;
text-decoration:none;
line-height:30px;
white-space:nowrap;
color:#333;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #666;
padding-right: 0;
padding-left: 15px;
margin-top: 0px;
margin-bottom: 0px;

}

nav .select1{{1025 * height: 30px; line-height:30px; cursor:pointer; color:#fff; background-color: #006; background-image: url(../images/sub-nav2.jpg); } nav. Выберите ab {

display: block;отступы: 0 30px 0px 15px;}

nav .select li: hover a {

height: 30px;
line-height:30px;
cursor:pointer;
color:#fff;
background-color: #006;
background-image: url(../images/sub-nav2.jpg);  
z-index: 2000;

}

nav .select li: hover ab {

display:block;
cursor:pointer;
padding-top: 0;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 15px;
z-index: 2000;

}

nav .sub {

дисплей: нет;Маржа: 0;padding: 0 0 0 0; стиль списка: нет;цвет фона: # 006;}

nav .sub li {background-color: # 006;}

nav .select li: hover .sub {

высота: 30 пикселей;Дисплей: блок;позиция: абсолютная;плыть налево;ширина: 904px;топ: 28px;Слева направо: 0;выравнивания текста: центр;цвет фона: # 006;фон: URL (../ изображений / суб-nav2.jpg);z-индекс: 980;}

nav .select li: hover .sub li a {

display:block;
height:30px;
line-height:30px;
float:left;
white-space:nowrap;
color: #FFF;
font-size:12px;
font-weight: bold;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: dotted;
border-right-color: #666;
padding-right: 16px;
padding-left: 16px;
margin-right: 0;
margin-bottom: 0;
margin-left: 7;
z-index: 1000;

}

nav .select li: hover .sub li a: hover {

цвет: # 000;фон: #fff;border-top: 0px;высота строки: 30px;высота: 30 пикселей;фон: URL (../ изображений / суб-nav3.jpg);z-индекс: 990;}

1 Ответ

0 голосов
/ 19 декабря 2010

A (Сорта) хороший пример этого можно найти здесь 

var hideDelayTimer = null;
$('.select').mouseenter(function () {
  $(this).children('.sub').slideDown().mousenter(function () {
    if (hideDelayTimer) clearTimeout(hideDelayTimer);
  }).mouseleave(function () {
    if (hideDelayTimer) clearTimeout(hideDelayTimer);
    hideDelayTimer = setTimeout(function () {
      hideDelayTimer = null;
      $(this).slideUp();
    }, 2 * 1000);
  });
});

Если вам нужна помощь с позиционированием, вы можете сделать что-то вроде этого: 

$('.sub').each(function () {
  var parent = $(this).parent();
  var parentOffset = parent.offset();
  $(this).css({
    left: parentOffset.left + parent.width(), 
    top: parentOffset.top
  });
});
...