Javascript.RU

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

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

http://code.tutsplus.com/tutorials/h...enu--net-15129

Нужно сделать так, чтобы меню раскрывалось не при простом наведении мышки, а если пользователь подержит курсор на пункте меню несколько секунд. А то получается раздражающее мелькание меню при случайной проводке по нему.

Так же вставил такой вот код, чтобы меню плавно раскрывалось и закрывалось:

<!-- Javascript -->

<script type="text/javascript">
$(function(){
//Hide SubLevel Menus
$('#header ul li ul').hide();
//OnHover Show SubLevel Menus
$('#header ul li').hover(
//OnHover
function(){
//Hide Other Menus
$('#header ul li').not($('ul', this)).stop();
// Show Hoved Menu
$('ul', this).slideDown();
},
//OnOut
function(){
// Hide Other Menus
$('ul', this).slideUp();
//Remove the Arrow
$('ul li.arrow', this).remove();
}
);
});
</script>


Можете добавить функцию задержки раскрывания меню в этот код или написать свой.

Думаю 150-200 WMR адекватная цена.
Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 16.05.2014, 22:37
Профессор
Отправить личное сообщение для alex.vv Посмотреть профиль Найти все сообщения от alex.vv
 
Регистрация: 15.04.2014
Сообщений: 176

что-то типа такого:
вместо этого
$('ul', this).slideDown();

это
setTimeout(function() {$('ul', this).slideDown();},1500);


Только надо проверять, остается ли hover по истечении таймера.
Ответить с цитированием
  #3 (permalink)  
Старый 16.05.2014, 23:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077


<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  	$(function()
  	  {
  	    //Hide SubLevel Menus
  	    $('#header ul li ul').hide();
  	    //OnHover Show SubLevel Menus
  	    $('#header ul li').hover(
  	      //OnHover
  	      function() {
  	        //Hide Other Menus
  	        $('#header li ul').not($('ul', this)).stop(true, true);
  	        // Show Hoved Menu
  	        $('ul', this).delay(5000).slideDown(); //5 сек задержка перед открытием
  	      },
  	      //OnOut
  	      function() {
  	        // Hide Other Menus
  	        $('ul', this).stop(true, true).slideUp();
  	        //Remove the Arrow
  	        $('ul li.arrow', this).remove();
  	      }
  	    );
  	  }
  	);
  </script>
</head>
<body id="header">
 <ul >
    <li><a href="#">Item 1</a>
        <ul>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>
        <ul>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
        </ul>
    </li>
</ul>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 17.05.2014, 01:25
Новичок на форуме
Отправить личное сообщение для olegG Посмотреть профиль Найти все сообщения от olegG
 
Регистрация: 16.05.2014
Сообщений: 8

Спасибо, alex.vv, за ваш ответ, заменил указанную строку, на ту, что вы написали, страница не загрузилась вообще.

Спасибо, рони, за ваш код, вставил его, вроде бы то что нужно, только получается, что сам фон сразу выпадает, при наведении мышки, а те ссылки, что там должны быть, через время.

Чтоб вы поняли как это выглядит - на демо меню http://cdn.tutsplus.com/net/uploads/...emo/index.html
если мышка наводится на Home-моментально выпадает серый фон, а потом, через несколько секунд, появляются ссылки.

Хотелось бы чтобы нужно было подержать курсор над самим Home, после чего и серый фон и ссылки появлялись одновременно, с задержкой.
Ответить с цитированием
  #5 (permalink)  
Старый 17.05.2014, 01:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Сообщение от olegG
Чтоб вы поняли как это выглядит
нет не понял -- покажите код здесь или песочнице
Ответить с цитированием
  #6 (permalink)  
Старый 17.05.2014, 02:16
Новичок на форуме
Отправить личное сообщение для olegG Посмотреть профиль Найти все сообщения от olegG
 
Регистрация: 16.05.2014
Сообщений: 8

Сайт еще не на хостинге, а что такое песочница я не знаю. Код моего меню такой же как по ссылке выше, оттуда качал. Сделал скриншоты как это выглядит.
Если навести курсор на слово Home, то сразу же выпадает серый фон (скрин 1), а потом, через несколько секунд, появляются ссылки (скрин 2).



А хотелось бы, чтобы на слове Home нужно было бы подержать курсор несколько секунд, после чего медленно выдвинулся бы серый фон с сылками на нем
Ответить с цитированием
  #7 (permalink)  
Старый 17.05.2014, 02:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

olegG,
Песочница
гадать по фото что и как у вас выпадает без кода ?
Ответить с цитированием
  #8 (permalink)  
Старый 17.05.2014, 02:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #9 (permalink)  
Старый 17.05.2014, 14:15
Новичок на форуме
Отправить личное сообщение для olegG Посмотреть профиль Найти все сообщения от olegG
 
Регистрация: 16.05.2014
Сообщений: 8

Вроде бы добавил код и css в песочницу

http://learn.javascript.ru/play/aOzKub
Ответить с цитированием
  #10 (permalink)  
Старый 17.05.2014, 15:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Сообщение от olegG
фон сразу выпадает, при наведении мышки, а те ссылки, что там должны быть, через время.
1.у вас срабатывает hover из css
2.в коде моего скрипта одни селекторы и у вас в html совершенно другие

непонимание таких деталей, говорит о том что вы совершенно не готовы
код ниже под ваш html, но думаю он вас не спасёт - дорабатывайте css сами.
... ни ваших средств ни знаний недостаточно.

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
  	$(function()
  	  {
  	    $('.wrapper a ~').hide();
  	    $('.wrapper ul li').hover(
  	      function() {
  	        $('a ~', this).delay(5000).slideDown();
  	      },
  	      function() {
  	        $('a ~', this).stop(true, true).slideUp();
  	      }
  	    );
  	  }
  	);
  </script>

  </head>
  <body>
<div class="wrapper">
<ul id="menu">
<li style="padding: 21px 15px 21px 15px;"><a href="http://javascript.ru" class="drop">Главная</a>
<div class="dropdown_4columns">
<div class="col_1">
<a href="http://javascript.ru" class="footerm12">подменю</a>
<ul>
<li><a href="http://javascript.ru">ссылка</a></li>
<li><a href="http://javascript.ru">ссылка</a></li>
<li><a href="http://javascript.ru">ссылка</a></li>
  <img style="margin: 5px 0px 12px 5px" src="img2.gif">
</ul>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>

Последний раз редактировалось рони, 18.05.2014 в 18:52.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Задержка свертывания выпадающего меню Сергей123 Элементы интерфейса 11 31.01.2018 15:52
Задержка перед появлением второго уровня меню esergion jQuery 4 01.07.2016 19:48
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30
Задержка в выпадающем меню apster Элементы интерфейса 4 22.05.2013 22:05
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36