Это из серии «мелочь, а приятно!». Бутстрап хорош для адаптивных сайтов ИМХО, но есть маленькая неприятность — они действуют под лозунгом «Mobile first!» и наведение мышки их вообще не интересует. Это приводит к тому, что на обычных компьютерах выпадающее меню не срабатывает при наведении мышкой, а только при клике. Это не совсем удобно для тех, кто к этому не привык. Так же это может несколько ударить по конверсионности сайта. Мне тут подсказали простенький, но отлично работающий скрипт, исправляющий это. Им и делюсь :)
jQuery('ul.nav > li').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
})
Как наверняка многие догадались, он просто навешивает на менюшку событие при наведении мышкой (и отвод ее). При этом прелесть скрипта в том, что он игнорируется на мобильных телефонах. То есть мобильники не выбрасывают событие mouseover, и потому там это событие не будет срабатывать. Это и хорошо. Я как-то пробовал сделать менюшку выпадающей и заюзал для этого стороннюю либу, которая типа это делает. Да, на компах все было ОК, но на мобильниках меню при клике раскрывалось и тут же схлопывалось. То есть одно лечим, другое калечим. А тут и там и там все ОК :)
Когда-то давно один умный дядька говорил, что по-уму меню должно выпадать только по клику, а не по наведению, но современные технологии css этого не позволяют. Фамилию дядьки повспоминать и вспомнить могу, вертится на языке, но сидеть и вспоминать лень. Это я так, к слову.
Дядьке так удобно… очтальным так… почему кто то должен этого дядьку слушать?
Объясняет тем, что в десктопных прогах так. Наведите мыху на любую менюху в браузере (интерфейса браузера, а не сайта) — увидите, что без клика ничего не происходит. Слушали его многие, он преподавал здесь www.specialist.ru/ Звать его Евгений Петров, сейчас в списках педагогов его нету.
Верстал, кстати, не семантично.
Современный css (bootstrap) прекрасно позволяет делать выпад на клике. А вот при наведении — тоже очень полезная и нужная вещь и чисто css (+фе-форки) сейчас даже не припомню делается ли и как. Выпад на ховере очень полезен, когда нужно чтобы на клике было другое событие. Например — пункт меню «Блог» на ховере показывает рубрики, а на клике открывает страницу «Блог» с выборкой статей по лайкам к примеру.
З.Ы. А где кстати тут страничка Блог?.. :)
Так данное решение как раз и учитывает это. То есть на планшетах и мобилах (где нет события наведения мыши) будет работать по клику. А на компе, где есть мышь и привык к ней, будет работать наведение. Кстати, это даже гугл.хром-эмулятор понимает. Попробуйте на gorodskie-bani.ru/ joxi.ru/D2PjRW0SNBopr3 F12 (не забудьте страницу обновить).
Еще раз: на мобильных устройствах нет наведения мыши. Если вы что-то навесите только на это событие, то на мобильнике это будет просто недоступно пользователям.
З.Ы. А где кстати тут страничка Блог?.. :)
Вот теперь сделаю менюшку выпадающую, как руки дойдут. А так ссылки просто разбросаны по странице.
Мы естественно поняли, для чего енто решение и я говорю не для спора, а про то, что есть мысль, что как в bootstrap — правильно. Навожу я мыхой в браузере на «инструменты» или «закладки» — ничего ведь не выпадает. Нужно кликнуть. Хотя фаерфокс явно не для мобилок сделан, а для устройств с мыхой. Т.е. я про то, что возможно это не баг, а фича.
Но чисто имхо — вернуть людям возможность увидеть меню при наведении мысль неплохая. Оно привычно и пока что на всех сайтах так.
Вы имеете ввиду, что нет такого пункта в главном меню или интересуетесь, где искать страничку? Если второе, то вот modxclub.ru/blogs/
А моё мнение, это наплевательское отношение к пользователям… ))) мне не удобно по клику. а планшеты и смартфоны, я считаю вообще бесполезные вещи…
А если копнуть глубже, то сейчас не сайты делают, а говнобанеры на бутстрапе… тормозные и абсолютно бестолковые… и все благодоря таким знахарям как тот препод…
Я не разрабатываю сайты, но мне у вас понравилось ))) Молодцы… Без сна и отдыха работе отдаетесь. Радует
Спасибо :)
Сталкивался с этой задачей тоже. Исправлял добавлением в стили
ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; }
Не знаю почему, но меню начинало работать при наведении:)
… а вот про мобильные как раз забыл, сэнкс)
А что если для мобильных добавить появление маленького шеврона (стрелка вниз) возле пункта меню? И тогда на клик по названию пункта можно повесить переход на страницу с рубриками и т.д. А на клик по шеврону открывать выпадающее меню пункта.
Нашёл, спасибо)
css-колдунство, не иначе)))
ведь изучал это и забыл( напомнили, спасибо)
Бутстрап не различает девайсы. Он различает только размеры экранов. Если вы попробуете для этого использовать механизм размера экрана, то придется верстку менюшки переделывать. А нафига ломать работающее?
Сорри, что тут спрашиваю, но есть вопрос, не знаю в какой раздел точно:
Очень понравилось приложение Сonsole. Прям пхп с ним учу — удобно) Но сегодня консоль работать перестала. Я уже и переустанавливал её по всякому, и ноль на массу. Причём на другом ядре модкс работает без проблем. А на том, где сейчас актуальней всего — никак.
Как проявляется? Да просто там где должен быть вывод появляется «loading» на миллисекунды а потом пустота. И не важно что в консоли пишешь.
Когда примерно появилось? Мне кажется, когда я экспериментировал с разными пакетами и поставил пакет sdStore (хочу разобраться с комментариями для блога, вот и забрёл туда). В итоге пакет этот снёс уже, а консоль всё равно молчит...
Может конфиги какие сбились? Где искать?
Кста, когда делаешь деинсталяцию консоли, пунктик в менюшке не пропадает) Кликаешь по нему — и баг. Приходится руками в настройках меню самому удалять.
Однозначно комментарий не туда. Публиковать такое топиком надо, в любой блог (хоть в личный). В крайнем случае в топике, посвященном самой консоли.
По сабжу: включайте вывод php ошибок и смотрите что и как. Дело вряд ли в самой консоли.
Субъективный взгляд со стороны — очень не удобно, когда меню автоматом выпадает без клика.
Уже несколько раз обжигался.
Редактируешь в админке что-то, тянешь мышку к кнопке СОХРАНИТЬ, и по дороге цепляешь меню. И в момент когда нажимаешь кнопку СОХРАНИТЬ под ним меню выскакивает, которое предпологает переход в другое место.
Каждый раз подскакиваешь и испытываешь стресс, от того, что можешь перейти в другое место без соранения, вместо того, чтобы сохранить внесённые изменения.
В этом плане, последняя версия админки MODX неудобна. С предыдущей версией MODX — таких проблем не возникало.
Субъективный ответ
Каждый раз — практически в 100% случаев — использую для сохранения сочетание клавиш Ctrl + S
Работает четко и никаких стрессов… Хотя вру :) Теперь стрессы от того, что в не во всех других приложениях и программах используется такое сочетание
Подскажите пожалуйста а как это все дело подключить? закинул в файл .js, подключил таким образом <script src="/static/dropdown.js"></script>, но не работает
Добрый день! Статья 2015-го года. Я даже не помню какая версия бутстрапа там использовалась (3 или 4) и не уверен, что этот код работает без подключенного бутстрапа (скорее всего не работает без него), потому что для менюшки же еще стили нужны, а стили использовались как раз бутстраповские. А мой скрипт только делал видимым подменю и скрывал. В любом случае, смотрите dev-tools браузера, может там ошибки какие есть. Может и jQuery у вас еще не подгружен (свой скрипт навесьте на загрузку документа).