Разворачивающееся меню
Меню должно разворачиваться через полсекунды после наведения на него курсора, если курсор с него не убрали. Использую setTimeout. Если курсор убрали с меню, то делаем clearTimeout. Почему при отведении курсора Таймер не уничтожается? меню разворачивается, даже если курсор отвели.
$(".h_menu li").mouseenter(function(){
var that = this;
glt = setTimeout(function() {
var num=$(that).index();
if (num>0) {
$(".hpop_item").stop();
$(".hpop").stop();
num--;
var $item=$(".hpop_item").eq(num);
var he=$item.height();
$(".hpop_item").stop(true,true).fadeOut(100);
$(".hpop").stop().animate({height:he},300);
$item.stop().fadeIn(300);
}
else {
if($(".hpop_item").is(":visible")) {
hpopclose();
}
}
}, 500)
});
// если убрать курсор с пункта меню, таймер уничтожается
$(".h_menu li").onmouseout = function() {
clearTimeout(glt);
}
|
Hurray,
возможно вы на другом Li или если запустилась анимация то clearTimeout её неостановит |
Цитата:
|
Hurray,
макет нужен вашего меню |
Цитата:
<nav class="h_menu"> <ul> <li class=" h_menu-now"> <div class="logo"> <a href="/" title="Indian Ocean"> <span>Indian<b>Ocean</b></span> <p>сайт туристической компании Dek Travel</p> </a> </div> </li> <li class="h_menu_i h_menu_i-1 "><a href="/seychelles/"><span>Сейшельские</span> острова</a></li> <li class="h_menu_i h_menu_i-2 "><a href="/mauritius/">остров <span>Маврикий</span></a></li> <li class="h_menu_i h_menu_i-3 "><a href="/maldives/">острова <span>Мальдивы</span></a></li> <li class="h_menu_i h_menu_i-4 "><a href="/сountrys/">другие <span>Страны</span></a></li> </ul> </nav> <div style="height: 0px; overflow: hidden;" class="hpop list"> <div style="display: none; opacity: 1;" class="hpop_item"> Выпадающая вкладка 1 </div> <div style="display: none; opacity: 1;" class="hpop_item"> Выпадающая вкладка 2 </div> <div style="display: none; opacity: 1;" class="hpop_item"> Выпадающая вкладка 3 </div> <div style="display: none; opacity: 1;" class="hpop_item"> Выпадающая вкладка 4 </div> </div> |
Hurray, ошибка у вас в 25 строке = вместо ()
ну и как вариант <!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.hpop_item{
background-color: #FFA500;
height: 100px
}
</style>
</head>
<body>
<nav class="h_menu">
<ul>
<li class="h_menu-now">
<div class="logo">
<a href="/" title="Indian Ocean">
<span>Indian<b>Ocean</b></span>
<p>сайт туристической компании Dek Travel</p>
</a>
</div>
</li>
<li class="h_menu_i h_menu_i-1
"><a href="/seychelles/"><span>Сейшельские</span> острова</a></li>
<li class="h_menu_i h_menu_i-2
"><a href="/mauritius/">остров <span>Маврикий</span></a></li>
<li class="h_menu_i h_menu_i-3
"><a href="/maldives/">острова <span>Мальдивы</span></a></li>
<li class="h_menu_i h_menu_i-4
"><a href="/сountrys/">другие <span>Страны</span></a></li>
</ul>
</nav>
<div style="height: 0px; overflow: hidden;" class="hpop list">
<div style="display: none; opacity: 1;" class="hpop_item">
Выпадающая вкладка 1
</div>
<div style="display: none; opacity: 1;" class="hpop_item">
Выпадающая вкладка 2
</div>
<div style="display: none; opacity: 1;" class="hpop_item">
Выпадающая вкладка 3
</div>
<div style="display: none; opacity: 1;" class="hpop_item">
Выпадающая вкладка 4
</div>
</div>
<script>var glt;
var $menu = $(".h_menu .h_menu_i")
$menu.mouseenter(function(){
var num = $menu.index(this);
glt = setTimeout(function() {
var $item=$(".hpop_item").eq(num);
var he=$item.height();
$(".hpop_item").stop(true,true).fadeOut(100);
$(".hpop").stop().css({height:0}).animate({height:he},300);
$item.stop().fadeIn(300);
}, 500)
});
// если убрать курсор с пункта меню, таймер уничтожается
$(".h_menu .h_menu_i").mouseleave( function() {
$(".hpop_item").stop(true,true).fadeOut(100);
clearTimeout(glt);
})
</script>
</body>
</html>
|
Спасибо огромное! Всё работает.
А как сделать, чтобы вкладка не сворачивалась, если курсор находится над нею, то есть если передвинули курсор с пункта меню на вкладку? Сворачиваться вкладка должна только в том случае, если курсор покинул и $(".h_menu .h_menu_i") и $(".hpop_item"). $(".h_menu .h_menu_i").mouseleave( function() {
$(".hpop_item").stop(true,true).fadeOut(100);
clearTimeout(glt);
})
|
Hurray,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.hpop_item{
background-color: #FFA500;
height: 100px
}
.h_menu_i{
display: block;
width: 25%;
float: left;
}
</style>
</head>
<body>
<nav class="h_menu">
<ul>
<li class="h_menu-now">
<div class="logo">
<a href="/" title="Indian Ocean">
<span>Indian<b>Ocean</b></span>
<p>сайт туристической компании Dek Travel</p>
</a>
</div>
</li>
<li class="h_menu_i h_menu_i-1
"><a href="/seychelles/"><span>Сейшельские</span> острова</a></li>
<li class="h_menu_i h_menu_i-2
"><a href="/mauritius/">остров <span>Маврикий</span></a></li>
<li class="h_menu_i h_menu_i-3
"><a href="/maldives/">острова <span>Мальдивы</span></a></li>
<li class="h_menu_i h_menu_i-4
"><a href="/сountrys/">другие <span>Страны</span></a></li>
</ul>
</nav>
<div style="height: 0px; overflow: hidden; " class="hpop list">
<div style="display: none; opacity: 1;" class="hpop_item">
Выпадающая вкладка 1
</div>
<div style="display: none; opacity: 1;" class="hpop_item">
Выпадающая вкладка 2
</div>
<div style="display: none; opacity: 1;" class="hpop_item">
Выпадающая вкладка 3
</div>
<div style="display: none; opacity: 1;" class="hpop_item">
Выпадающая вкладка 4
</div>
</div>
<script>
var glt;
var $menu = $(".h_menu .h_menu_i")
$menu.mouseenter(function(){
var num = $menu.index(this);
clearTimeout(glt);
glt = setTimeout(function() {
var $item=$(".hpop_item").eq(num);
var he=$item.height();
$(".hpop_item").stop(true,true).fadeOut(100);
$(".hpop").stop().css({height:0}).animate({height:he},300);
$item.stop().fadeIn(300);
}, 500)
});
$(".hpop_item").mouseenter(function(){clearTimeout(glt)})
$(".h_menu .h_menu_i, .hpop_item").mouseleave( function() {
clearTimeout(glt);
glt = setTimeout(function() {
$(".hpop_item").stop(true,true).fadeOut(100);},500)
})
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 10:56. |