Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.78/9: Рейтинг темы: голосов - 9, средняя оценка - 4.78
morgusha
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 263
1

Выпадающее меню без дополнительных модулей

07.02.2014, 18:39. Просмотров 1729. Ответов 22
Метки нет (Все метки)

подскажите плиз не могу никак довести до ума меню. было решено делать выпадающее меню без всяких там доп модулей !
значит само меню было создано через админку drupal ну и вложеность тоже там была сделана ! далее подключил скрипт такой вот!
Javascript
1
2
3
4
5
6
jQuery(document).ready(function slide() {
 jQuery('li.expanded').hover(function (event) {
  jQuery(this).children(".expanded ul").slideToggle('slow');
        event.stopPropagation();
 });
});
в итоге всё работает ! вот ссылка...на левом меню первые 3 пункта !
drupal.metko.ru
но проблема в том, что если 10 раз быстро навести на пункт меню, то 10 раз и откроется меню вторjго уровня....а как от этого избавиться ??? и плюс hover срабатывает ни на элемент "a" списка а на li и поэтому меню второго уровня открывается когда её не навёл на ссылку даже ! как поправить подскажите плиз !

Добавлено через 3 часа 22 минуты
сделал просто меню второго уровня поближе к основному и норм вроде стало ! но всё же хотелось бы реализовать и задержку скрытия менб второго уровня. подскажиииите !

Добавлено через 2 часа 52 минуты
цcc меню:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#block-menu-menu-left-menu ul{
margin-left:91px;
list-style: none;
}
 
#block-menu-menu-left-menu  li{
padding: 0px;
margin: 0px 0px 2px 0px;
background: none;
}
 
#block-menu-menu-left-menu ul li a{
padding: 8px 5px;
color: #353639;
display: inline-block;
background-color: rgba(0,0,0,0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#11000000,endColorstr=#11000000);
text-decoration: none;
font-size: 14px;
}
 
#block-menu-menu-left-menu ul li a:hover{
background-color: rgba(0,0,0,0.1);
}
 
#left_column li{
display:block;
}
 
#block-menu-menu-left-menu .expanded ul{
display: none;
left:100px;
position:absolute;
margin-top: -32px;
padding-left: 33px;
margin-left: 47px;
}
#block-menu-menu-left-menu .expanded ul li{
margin-left:-37px;
width:170px;
}
.act{
display:block !important;
}
вот html
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<aside id="left_column"> 
                    <div class="region region-sidebar-first">
    <div id="block-menu-menu-left-menu" class="block block-menu">
 
    
  <div class="content">
    <ul class="menu"><li class="first expanded"><a href="/about.html" title="">О компании</a><ul class="menu"><li class="first leaf"><a href="/press.html" title="">Пресса о нас</a></li>
<li class="leaf"><a href="/companion.html" title="">Партнерам</a></li>
<li class="leaf"><a href="/valuable.html" title="">Ценности и устремления</a></li>
<li class="last leaf"><a href="/vacancy.html" title="">Работа у нас</a></li>
</ul></li>
<li class="expanded"><a href="/projects.html" title="">Проекты и партнеры</a><ul class="menu"><li class="first leaf"><a href="/awards.html" title="">Награды и достижения</a></li>
<li class="last leaf"><a href="/cases.html" title="">Кейсы</a></li>
</ul></li>
<li class="expanded"><a href="/seo.html" title="">Seo</a><ul class="menu"><li class="first leaf"><a href="/promotion.html" title="">Продвижение</a></li>
<li class="last leaf"><a href="/optimization.html" title="">Оптимизация</a></li>
</ul></li>
<li class="leaf"><a href="/developing.html" title="">Интернет разработки</a></li>
<li class="leaf"><a href="/technology.html" title="">Технологии</a></li>
<li class="leaf"><a href="/audit.html" title="">Аудит сайтов</a></li>
<li class="leaf"><a href="/consulting.html" title="">Консалтинг</a></li>
<li class="last leaf"><a href="/actions.html" title="">Акции</a></li>
</ul>  </div>
</div>
так кто выпендрица и подскажет ?)
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
07.02.2014, 18:39
Ответы с готовыми решениями:

Выпадающее меню
Доброго времени суток. Не знаю в какую сторону копать, поэтому нужна ваша...

Выпадающее меню
Делаю выпадающее меню: при щелчке по кнопке меню раскрывается, если еще раз...

Выпадающее меню
Хочу сделать выпадающее меню такое же самое как на этом сайте http://4m.net.ua...

Выпадающее меню на JS
Здравствуйте! у меня меню из картинок и ссылок. При наведении курсором на...

Выпадающее меню
Привет всем. Сегодня пытался найти скрипт выпадающего меню, но столкнулся с...

22
kojj
3 / 3 / 1
Регистрация: 13.11.2012
Сообщений: 32
07.02.2014, 19:22 2
Файл со стилями напугал...

Написал пример раскрывающегося меню, может поможет:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <meta charset="utf-8" />
</head>
<body>
<div class="put" style="padding: 5px; border: 1px solid #000;">Навести</div>
<div class="menu" style="display: none;">
    <div class="item" style="position: relative; float: left; padding: 0 5px; margin:10px 0 10px 0;">
        <div class="subitem" style="padding: 5px; border: 1px solid #000;">Some text1</div>
        <div class="subitem2" style="padding: 5px; border: 1px solid #000;">Some text2</div>
    </div>
    <div class="item" style="position: relative; float: left; padding: 0 5px; margin:10px 0 10px 0;">
        <div class="subitem" style="padding: 5px; border: 1px solid #000;">Some text3</div>
        <div class="subitem2" style="padding: 5px; border: 1px solid #000;">Some text4</div>
    </div>
</div>
 
<script>
    jQuery(document).ready(function($) {
        $('.put').hover(function() {
            if ($('.menu').is(':hidden')) {
            $('.menu').slideDown("slow"); } else {
            $('.menu').slideUp("slow");}
        });
    }); 
</script>
 
</body>
</html>
Скрипт у тебя какой то сложный
0
morgusha
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 263
07.02.2014, 19:32  [ТС] 3
так я подгоняю под классы и блоки меню, которое сформировано в админки друпала, а не сам делаю его с нуля ! поэтому и нужно поправить скрипт или дать другой )
0
kojj
3 / 3 / 1
Регистрация: 13.11.2012
Сообщений: 32
07.02.2014, 19:42 4
Нужно что бы оно медленно закрывалось?

Javascript
1
2
3
4
5
6
jQuery(document).ready(function slide() {
 jQuery("li.expanded").hover(function (event) {
  jQuery(this).children(".expanded ul").slideToggle("slow");
        event.stopPropagation();
 });
});
0
morgusha
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 263
07.02.2014, 19:51  [ТС] 5
нужно что бы меню 3 открывалось тогда, когда курсор мыши будет в зоне 1 ,а сейчас меню 3 открывается, когда курсор наводится на зону 2 получается что если названия меню короткое то навести можно просто рядом с ним и меню 3 откроется ! ну и сделать так что бы меню 3 закрывалось с задержкой пол секунды скажем !
0
Миниатюры
Выпадающее меню без дополнительных модулей  
kojj
3 / 3 / 1
Регистрация: 13.11.2012
Сообщений: 32
08.02.2014, 00:10 6
Попробуй так:

Javascript
1
2
3
4
5
6
jQuery(document).ready(function slide() {
 jQuery("li.expanded a").hover(function (event) {
  jQuery(this).children(".expanded ul").slideToggle(500);
        event.stopPropagation();
 });
});
0
morgusha
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 263
09.02.2014, 17:35  [ТС] 7
не могу понять почему
Javascript
1
 jQuery("li.expanded a"
не происходит как я понимаю выбора тега а так как он работает почему то ( ???
0
kojj
3 / 3 / 1
Регистрация: 13.11.2012
Сообщений: 32
09.02.2014, 22:37 8
Не знаю почему не работает, можете попробовать еще так:

Javascript
1
2
3
4
5
6
jQuery(document).ready(function slide() {
 jQuery("li.expanded > a").hover(function (event) {
  jQuery(this).children(".expanded ul").slideToggle(500);
        event.stopPropagation();
 });
});
0
morgusha
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 263
10.02.2014, 11:45  [ТС] 9
Javascript
1
 jQuery("li.expanded > a")
тоже не работает ! как же сделать выбор a элемента ?(
0
EPMAK
tribal dance
167 / 151 / 36
Регистрация: 03.09.2009
Сообщений: 821
Записей в блоге: 17
11.02.2014, 07:15 10
Цитата Сообщение от morgusha Посмотреть сообщение
так кто выпендрица и подскажет ?)
звучит как - ультиматум


Цитата Сообщение от morgusha Посмотреть сообщение
меню 3 закрывалось с задержкой пол секунды скажем !
Вешайте setTimeout во время сворачивания слайда, при второй(mouseout) вызовe hover'a
0
morgusha
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 263
11.02.2014, 09:29  [ТС] 11
Вешайте setTimeout во время сворачивания слайда, при второй(mouseout) вызовe hover'a[/QUOTE]
не понял ! ))) вообще не понял _ ) код можно ?)
0
Lazy_Den
2979 / 2641 / 1334
Регистрация: 15.01.2014
Сообщений: 5,798
11.02.2014, 12:11 12
morgusha, а зачем тут jQuery в принципе? Глянул меню на вашем сайте и на данный момент вижу, что достаточно добавить пару строк в CSS, чтоб работало оно аналогично оригиналу. Тогда это будет гораздо ближе к названию поста "Выпадающее меню без дополнительных модулей". Вот тут пример.
CSS
1
2
3
4
5
6
7
8
9
10
#block-menu-menu-left-menu ul li ul a {
    transition: all 0.3s linear;
}
#block-menu-menu-left-menu ul li:hover ul {
    display: block;
}
#block-menu-menu-left-menu ul li ul a:hover {
    background-color: #333;
    color: #fff;
}
1
morgusha
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 263
11.02.2014, 17:14  [ТС] 13
а как сделать что бы меню второго уровня открывалось когда курсор попадает именно на ТЕГ А главного меню ! а то срабатывает и когда рядом просто курсор ставить ! ????????????
0
Lazy_Den
2979 / 2641 / 1334
Регистрация: 15.01.2014
Сообщений: 5,798
11.02.2014, 17:36 14
Цитата Сообщение от morgusha Посмотреть сообщение
открывалось когда курсор попадает именно на ТЕГ А
А кто вам мешает это сделать? Правило :hover не на <li>, а на <a>.
CSS
1
2
3
4
#block-menu-menu-left-menu ul li a:hover + ul {
    display: block;
    margin-left: 147px; /* значение своё */
}
1
morgusha
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 263
11.02.2014, 20:32  [ТС] 15
отключил скрипт, добавил пару строк и заработало ! Но получается, что на А срабатывает,а на меню второго уровня повесить задержку без jquery можно как то ?
0
Lazy_Den
2979 / 2641 / 1334
Регистрация: 15.01.2014
Сообщений: 5,798
11.02.2014, 21:30 16
Цитата Сообщение от morgusha Посмотреть сообщение
а на меню второго уровня повесить задержку без jquery можно как то ?
CSS
1
transition: all 0.3s linear 0.1s; // 0.1s - это и будет задержкой. Увеличить/уменьшить как хотите
0
morgusha
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 263
12.02.2014, 09:23  [ТС] 17
не срабатывает задержка ( пробывал ставить её ко всем css правилам для меню и нифига (
0
Lazy_Den
2979 / 2641 / 1334
Регистрация: 15.01.2014
Сообщений: 5,798
12.02.2014, 09:36 18
Цитата Сообщение от morgusha Посмотреть сообщение
не срабатывает задержка
Телепат из меня никудышний и угадать, что у вас там не так - сложновато. Может маленькую задержку поставили, может перекрывающие стили есть или мы о каких-то разных задержках говорим. То, что показал я вам выше, производит задержку перед запуском эффекта перехода. Смотрите простейший тестик.
CSS
1
2
3
4
5
6
p {
    transition: all 2s linear 2s;
}
p:hover {
    font-size: 5em;
}
Работает?
0
morgusha
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 263
12.02.2014, 10:13  [ТС] 19
а задержка нужна как я понимаю для ul списка меню второго уровня. что бы когда отводишь курсор от тега А меню первого уровня меню второго уровня не сразу закрывалось, а спустя пару секунд !
0
Lazy_Den
2979 / 2641 / 1334
Регистрация: 15.01.2014
Сообщений: 5,798
12.02.2014, 10:23 20
В каком элементе происходят изменения, на тот элемент и выставляется задержка. Кстати, если у вас там правило display: none;, то для него анимация не работает. Для "увода" элемента с поля зрения, используют другие эффекты. Например, размеры на "ноль", opacity: 0 или что-то еще. Порой получается даже более "зрелищней".
0
12.02.2014, 10:23
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.02.2014, 10:23

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

Выпадающее меню
необходимо сделать 2 выпадающих меню при регестрации. 1 - выбераем страну. 2 -...

Выпадающее меню
Добрый день ! Я новичок. Что то неполучается у меня с JS. Посмотрите, может...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru