Fi1osof
5 июля 2015 г., 5:58

Делаем выпадающее меню bootstrap при наведении

Это из серии «мелочь, а приятно!». Бутстрап хорош для адаптивных сайтов ИМХО, но есть маленькая неприятность — они действуют под лозунгом «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 Работает четко и никаких стрессов… Хотя вру :) Теперь стрессы от того, что в не во всех других приложениях и программах используется такое сочетание

Добавить комментарий