Bootstrap имеет компонент меню, благодаря которому можно быстро реализовать навигацию по сайту. Но шаблонное меню имеет недостаток: на десктопной версии меню раскрывается только при клике по родительскому пункту. На мобильной версии так и должно быть — нажал на родительский пункт — меню раскрылось. Однако, как сделать, чтобы меню раскрывалось при наведении? В этом поможет замечательный скрипт, реализован он на jQuery:
|
<script> 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(); }) </script> |
Теперь при просмотре сайта на компьютере, меню будет выпадать при наведении на родительский пункт. А на мобильной версии, меню сохранит свое прежнее поведение.
Однако, корневой пункт меню все еще остается некликабелен. Что весьма некрасиво и это надо исправить, чтобы на десктопных версиях при клике по корневому пункту bootstrap меню происходил переход по ссылке. Для этого необходимо удалить атрибут у ссылки корневого пункта меню:
Но опять проблема: теперь на больших экранах все четко и красиво, но на мобильной версии(когда меню сворачивается в пирожок) дочернее меню не раскрывается, а сразу происходит переход по ссылке. То есть получается ситуация, когда на мобильной версии этот атрибут нужен, а на десктопной не нужен. Тогда внизу страницы добавляем скрипт:
|
if(document.body.clientWidth > 767) { $('.navbar-nav li a').removeAttr("data-toggle"); } |
И теперь, наконец таки, получается нормальное меню.