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