Форум

olegG · #1 (**permalink**) 16.05.2014, 20:41

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

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

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

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



<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 адекватная цена.
Спасибо

alex.vv · #2 (**permalink**) 16.05.2014, 22:37

что-то типа такого:
вместо этого

$('ul', this).slideDown();

это

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

Только надо проверять, остается ли hover по истечении таймера.

рони · #3 (**permalink**) 16.05.2014, 23:13

<!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>

olegG · #4 (**permalink**) 17.05.2014, 01:25

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

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

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

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

рони · #5 (**permalink**) 17.05.2014, 01:50

Сообщение от olegG

Чтоб вы поняли как это выглядит

нет не понял -- покажите код здесь или песочнице

olegG · #6 (**permalink**) 17.05.2014, 02:16

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

А хотелось бы, чтобы на слове Home нужно было бы подержать курсор несколько секунд, после чего медленно выдвинулся бы серый фон с сылками на нем

рони · #7 (**permalink**) 17.05.2014, 02:23

olegG,
Песочница
гадать по фото что и как у вас выпадает без кода ?

рони · #8 (**permalink**) 17.05.2014, 02:26

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

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

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

olegG · #9 (**permalink**) 17.05.2014, 14:15

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

http://learn.javascript.ru/play/aOzKub

рони · #10 (**permalink**) 17.05.2014, 15:22

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript