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

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

07.02.2014, 18:39. Просмотров 1720. Ответов 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
morgusha
2 / 2 / 2
Регистрация: 21.05.2009
Сообщений: 263
12.02.2014, 11:04  [ТС] 21
усё готово ! с opacity не вышло ! зато вышло с
PHP
1
visability:0;
0
Lazy_Den
2942 / 2618 / 1320
Регистрация: 15.01.2014
Сообщений: 5,748
12.02.2014, 11:07 22
Цитата Сообщение от morgusha Посмотреть сообщение
усё готово !
Вот и гуд Для общего развития, можете глянуть статейку Анимация в CSS3, чтоб под рукой всегда иметь альтернативу jQuery и т.д.
1
EPMAK
12.02.2014, 14:43     Выпадающее меню без дополнительных модулей
  #23

Не по теме:

Цитата Сообщение от Lazy_Den Посмотреть сообщение
Вот и гуд
:rofl:

0
12.02.2014, 14:43
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.02.2014, 14:43
Привет! Вот еще темы с ответами:

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

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

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


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

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

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