Javascript.RU

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

Сообщение от Deff Посмотреть сообщение
<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>
Понимаю что тема очень старая, и автор скрипта уже не появляется на форуме, но может кто-нибудь подскажет как переделать этот скрипт для 2х-3хуровневого меню? просто повтор кода но с $('#nav_menu_content >li> ul >li') и $('#nav_menu_content >li> ul >li> ul >li') не помогает, задержка работает только к первому уровню
Заранее спасибо за потраченное время
Ответить с цитированием
  #12 (permalink)  
Старый 31.01.2018, 15:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

свертывание выпадающего меню с задержкой
tantan812,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     #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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
$("#nav_menu_content li").mouseenter(function() {
  var a = $(this).find("ul:first").stop();
  $(this).siblings().find("ul").stop().fadeOut(300);
  a.fadeIn(700);
}).mouseleave(function() {
  $(this).find("ul").stop().delay(900).fadeOut(700);
});
});
  </script>
</head>

<body>
<ul id='nav_menu_content'>
    <li><a href='#0'>Категория 1</a>
        <ul>
            <li><a href="#">Субкатегория 1<ul>
            <li><a href="#">Субкатегория 1</a>
            </li>
           <li><a href="#">Субкатегория 2</a>
            </li>
           <li><a href="#">Субкатегория 3</a>
            </li>
        </ul></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>
</body>
</html>
Ответить с цитированием
Ответ


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

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


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