Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.03.2013, 15:20
Новичок на форуме
Отправить личное сообщение для Сергей123 Посмотреть профиль Найти все сообщения от Сергей123
 
Регистрация: 06.03.2013
Сообщений: 6

Задержка свертывания выпадающего меню
Очень нужно! Подскажите, пожалуйста, как реализовать следующие. Есть многоуровневое меню, при наведение на пункт - открывается меню нижнего уровня. Если курсив уходит с открывшегося меню оно прячется через 1-2 сек. Если за эти пару секунд пользователь вернул курсив на меню, оно остается открытым. Вроде, все получается, кроме того что б оно оставалась открытым при возврате, в любом случае при уходе оно через определенное время закрывается.=((( Вот так бы хотелось что б это выглядело - http://super-skoda.com.ua/. Я совсем новичок в Jquery, буду очень признателен за помощь!
Ответить с цитированием
  #2 (permalink)  
Старый 06.03.2013, 15:39
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Нужно хранить идентификатор таймера ( var timerId = setTimeout(...) ), а при возвращении мышки очищать таймер через clearTimeout(timerId).
Ответить с цитированием
  #3 (permalink)  
Старый 06.03.2013, 15:53
Новичок на форуме
Отправить личное сообщение для Сергей123 Посмотреть профиль Найти все сообщения от Сергей123
 
Регистрация: 06.03.2013
Сообщений: 6

Спасибо! Но я все равно не могу разобраться((( Буквально пару дней имею дело с JS. Посмотрите, пожалуйста, код - что неправильно? Меню вообще перестали закрываться....
$(document).ready(function(){

$('.top_menu > ul li').hover(function() {
var linkChild=$(this).children('ul');
linkChild.css('display','block');
},
function() {
var linkChild=$(this).children('ul');
var timerId = setTimeout(function() {
linkChild.hide();
},800)
if(linkChild.mouseenter()){clearTimeout(timerId);}
});})
Ответить с цитированием
  #4 (permalink)  
Старый 06.03.2013, 16:06
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

$(el).hover(fn1, fn2) - clearTimeout нужно делать в первой функции (она срабатывает по наведению на элемент).
И перменную timerId нужно вывести в область видимости обеих функций, то есть на уровне hover() (строчкой выше, например)
Ответить с цитированием
  #5 (permalink)  
Старый 06.03.2013, 16:35
Новичок на форуме
Отправить личное сообщение для Сергей123 Посмотреть профиль Найти все сообщения от Сергей123
 
Регистрация: 06.03.2013
Сообщений: 6

Блин. Ничего не получается( Капец. Это конечно наглость с моей стороны, но был бы очень признателен за приблизительный код или ссылку где объясняется как сделать такую менюшку...
Ответить с цитированием
  #6 (permalink)  
Старый 06.03.2013, 21:02
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>
    #nav_menu_content * {
        margin: 0;
        padding:  0;
        margin: 0;
        padding:  0;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }
    #nav_menu_content{
        background:#fff url(http://s2.uploads.ru/dNObX.png) repeat-y -76px 0;
        /*border:red solid 1px;*/
        list-style: none;
        padding-left: 12px;
        display:inline:block;
        width:134px;
    }
    #nav_menu_content ul {
        background-color:#3D81F3;
        list-style-position: outside;
        text-align:left;
        position: absolute;
        margin-left:100px;
        margin-top:-20px;
        padding: 0 3px 0 0;
        list-style: none;
        display: none;
    }
    #nav_menu_content li {
        border-bottom:#fff solid 1px;
        list-style: none;
        margin:4px auto 4px 4px;
        padding:2px 4px;
    }
    #nav_menu_content ul>li {
        border:red solid 1px;
        list-style: none;
        margin:4px auto 4px 4px;
        padding:2px 4px;
    }
    #nav_menu_content > li:hover {
        background-color:#fff;
    }
</style>


</head>
<body style="padding-left:13%;padding-top:60px;">

<ul id='nav_menu_content'>
    <li><a href='#0'>Категория 1</a>
        <ul>
            <li><a href="#">Субкатегория 1</a>
            </li>
           <li><a href="#">Субкатегория 2</a>
            </li>
           <li><a href="#">Субкатегория 3</a>
            </li>
        </ul>
    </li>
    <li><a href='#0'>Категория 2</a>
        <ul>
           <li><a href="#">Субкатегория 4</a>
            </li>
        </ul>
    </li>
    <li><a href='#0'>Категория 3</a>
        <ul>
           <li><a href="#">Субкатегория 5</a>
            </li>
            <li><a href="#">Субкатегория 6</a>
            </li>
        </ul>
    </li>
    <li><a href='#0'>Категория 4</a>
        <ul>
           <li><a href="#">Субкатегория 7</a>
            </li>
           <li><a href="#">Субкатегория 8</a>
             </li>
           <li><a href="#">Субкатегория 9</a>
            </li>
        </ul>
    </li>
</ul>


<script type="text/javascript">
var timerId0;

        $('#nav_menu_content >li').mouseenter(function(){
	   var a=$(this).find("ul:first");
	   clearTimeout(timerId0)
	   $('#nav_menu_content >li>ul.active').not(a).fadeOut("slow");
	   a.addClass('active').fadeIn("slow");
	}).mouseleave(function(){
	   var a=$(this).find("ul:first");
	   if(a.hasClass('active'))
	   timerId0=setTimeout(function(){a.fadeOut("slow");},970)
        });

</script>


</body>
</html>

Последний раз редактировалось Deff, 07.03.2013 в 02:24.
Ответить с цитированием
  #7 (permalink)  
Старый 07.03.2013, 01:41
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Deff, а что делает return false?
Ответить с цитированием
  #8 (permalink)  
Старый 07.03.2013, 02:25
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

danik.js,
Ждало, когда спросишь
Ответить с цитированием
  #9 (permalink)  
Старый 07.03.2013, 02:33
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Вот ты и дождалось )
Ответить с цитированием
  #10 (permalink)  
Старый 07.03.2013, 09:12
Новичок на форуме
Отправить личное сообщение для Сергей123 Посмотреть профиль Найти все сообщения от Сергей123
 
Регистрация: 06.03.2013
Сообщений: 6

Ого! Спасибо огромное, сейчас буду пробовать)))
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переход между элементами выпадающего меню Digan jQuery 3 10.10.2012 20:03
Скрипт выпадающего меню vadimon Элементы интерфейса 3 12.09.2012 22:06
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 13:36
Сокращение списка выпадающего меню. Predatorbbs Элементы интерфейса 3 22.11.2010 14:23
В IE странная ошибка - скрипт выпадающего меню Akram Internet Explorer 0 11.03.2010 19:37