Fi1osof 05 июля 2015 0 21
Это из серии «мелочь, а приятно!». Бутстрап хорош для адаптивных сайтов ИМХО, но есть маленькая неприятность — они действуют под лозунгом «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, и потому там это событие не будет срабатывать. Это и хорошо. Я как-то пробовал сделать менюшку выпадающей и заюзал для этого стороннюю либу, которая типа это делает. Да, на компах все было ОК, но на мобильниках меню при клике раскрывалось и тут же схлопывалось. То есть одно лечим, другое калечим. А тут и там и там все ОК :)
21 комментарий
M
MisterN 05 июля 2015г в 10:33 #
Когда-то давно один умный дядька говорил, что по-уму меню должно выпадать только по клику, а не по наведению, но современные технологии css этого не позволяют. Фамилию дядьки повспоминать и вспомнить могу, вертится на языке, но сидеть и вспоминать лень. Это я так, к слову.
Э
Эраст 05 июля 2015г в 10:38 #
Дядьке так удобно… очтальным так… почему кто то должен этого дядьку слушать?
M
MisterN 05 июля 2015г в 10:58 #
Объясняет тем, что в десктопных прогах так. Наведите мыху на любую менюху в браузере (интерфейса браузера, а не сайта) — увидите, что без клика ничего не происходит. Слушали его многие, он преподавал здесь www.specialist.ru/ Звать его Евгений Петров, сейчас в списках педагогов его нету.
Верстал, кстати, не семантично.
Fi1osof1
Fi1osof 05 июля 2015г в 11:02 #
Так данное решение как раз и учитывает это. То есть на планшетах и мобилах (где нет события наведения мыши) будет работать по клику. А на компе, где есть мышь и привык к ней, будет работать наведение. Кстати, это даже гугл.хром-эмулятор понимает. Попробуйте на gorodskie-bani.ru/ joxi.ru/D2PjRW0SNBopr3 F12 (не забудьте страницу обновить).
M
MisterN 05 июля 2015г в 11:10 #
Мы естественно поняли, для чего енто решение и я говорю не для спора, а про то, что есть мысль, что как в bootstrap — правильно. Навожу я мыхой в браузере на «инструменты» или «закладки» — ничего ведь не выпадает. Нужно кликнуть. Хотя фаерфокс явно не для мобилок сделан, а для устройств с мыхой. Т.е. я про то, что возможно это не баг, а фича.
Но чисто имхо — вернуть людям возможность увидеть меню при наведении мысль неплохая. Оно привычно и пока что на всех сайтах так.
Э
Эраст 05 июля 2015г в 11:28 #
А моё мнение, это наплевательское отношение к пользователям… ))) мне не удобно по клику. а планшеты и смартфоны, я считаю вообще бесполезные вещи…

А если копнуть глубже, то сейчас не сайты делают, а говнобанеры на бутстрапе… тормозные и абсолютно бестолковые… и все благодоря таким знахарям как тот препод…
R
Roman 05 июля 2015г в 11:01 #
Современный css (bootstrap) прекрасно позволяет делать выпад на клике. А вот при наведении — тоже очень полезная и нужная вещь и чисто css (+фе-форки) сейчас даже не припомню делается ли и как. Выпад на ховере очень полезен, когда нужно чтобы на клике было другое событие. Например — пункт меню «Блог» на ховере показывает рубрики, а на клике открывает страницу «Блог» с выборкой статей по лайкам к примеру.

З.Ы. А где кстати тут страничка Блог?.. :)
Fi1osof1
Fi1osof 05 июля 2015г в 11:05 #
Еще раз: на мобильных устройствах нет наведения мыши. Если вы что-то навесите только на это событие, то на мобильнике это будет просто недоступно пользователям.

З.Ы. А где кстати тут страничка Блог?.. :)
Вот теперь сделаю менюшку выпадающую, как руки дойдут. А так ссылки просто разбросаны по странице.
R
Roman 07 июля 2015г в 11:16 #
… а вот про мобильные как раз забыл, сэнкс)
R
Roman 07 июля 2015г в 11:23 #
А что если для мобильных добавить появление маленького шеврона (стрелка вниз) возле пункта меню? И тогда на клик по названию пункта можно повесить переход на страницу с рубриками и т.д. А на клик по шеврону открывать выпадающее меню пункта.
Fi1osof1
Fi1osof 07 июля 2015г в 16:30 #
Бутстрап не различает девайсы. Он различает только размеры экранов. Если вы попробуете для этого использовать механизм размера экрана, то придется верстку менюшки переделывать. А нафига ломать работающее?
R
Roman 07 июля 2015г в 17:40 #
Сорри, что тут спрашиваю, но есть вопрос, не знаю в какой раздел точно:

Очень понравилось приложение Сonsole. Прям пхп с ним учу — удобно) Но сегодня консоль работать перестала. Я уже и переустанавливал её по всякому, и ноль на массу. Причём на другом ядре модкс работает без проблем. А на том, где сейчас актуальней всего — никак.
Как проявляется? Да просто там где должен быть вывод появляется «loading» на миллисекунды а потом пустота. И не важно что в консоли пишешь.

Когда примерно появилось? Мне кажется, когда я экспериментировал с разными пакетами и поставил пакет sdStore (хочу разобраться с комментариями для блога, вот и забрёл туда). В итоге пакет этот снёс уже, а консоль всё равно молчит...

Может конфиги какие сбились? Где искать?
Кста, когда делаешь деинсталяцию консоли, пунктик в менюшке не пропадает) Кликаешь по нему — и баг. Приходится руками в настройках меню самому удалять.
Fi1osof1
Fi1osof 07 июля 2015г в 17:47 #
Однозначно комментарий не туда. Публиковать такое топиком надо, в любой блог (хоть в личный). В крайнем случае в топике, посвященном самой консоли.

По сабжу: включайте вывод php ошибок и смотрите что и как. Дело вряд ли в самой консоли.
M
MisterN 05 июля 2015г в 11:12 #
Вы имеете ввиду, что нет такого пункта в главном меню или интересуетесь, где искать страничку? Если второе, то вот modxclub.ru/blogs/
R
Roman 07 июля 2015г в 11:25 #
Нашёл, спасибо)
Э
Эраст 05 июля 2015г в 11:38 #
Я не разрабатываю сайты, но мне у вас понравилось ))) Молодцы… Без сна и отдыха работе отдаетесь. Радует
Fi1osof1
Fi1osof 05 июля 2015г в 11:39 #
Спасибо :)
S
Spirit_Ninja 05 июля 2015г в 22:20 #
Сталкивался с этой задачей тоже. Исправлял добавлением в стили


ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}


Не знаю почему, но меню начинало работать при наведении:)
R
Roman 07 июля 2015г в 11:27 #
css-колдунство, не иначе)))
ведь изучал это и забыл( напомнили, спасибо)
s
sit 08 июля 2015г в 08:25 #
Субъективный взгляд со стороны — очень не удобно, когда меню автоматом выпадает без клика.
Уже несколько раз обжигался.
Редактируешь в админке что-то, тянешь мышку к кнопке СОХРАНИТЬ, и по дороге цепляешь меню. И в момент когда нажимаешь кнопку СОХРАНИТЬ под ним меню выскакивает, которое предпологает переход в другое место.
Каждый раз подскакиваешь и испытываешь стресс, от того, что можешь перейти в другое место без соранения, вместо того, чтобы сохранить внесённые изменения.
В этом плане, последняя версия админки MODX неудобна. С предыдущей версией MODX — таких проблем не возникало.
stager1
stager 08 июля 2015г в 16:39 #
Субъективный ответ
Каждый раз — практически в 100% случаев — использую для сохранения сочетание клавиш Ctrl + S
Работает четко и никаких стрессов… Хотя вру :) Теперь стрессы от того, что в не во всех других приложениях и программах используется такое сочетание
Авторизуйтесь или зарегистрируйтесь (можно через соцсети ), чтобы оставлять комментарии.