Как сделать так, чтобы всплывающее меню Twitter Bootstrap не зависало
Я бы хотел, чтобы меню Bootstrap автоматически выпадало при наведении курсора, а не щелкало заголовок меню. Я также хотел бы потерять маленькие стрелки рядом с заголовками меню.
40 ответов
Я создал раскрывающееся меню при наведении курсора, основанное на последней (v2.0.2) платформе Bootstrap, которая поддерживает несколько подменю, и решил опубликовать ее для будущих пользователей:
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="Search" class="search-query span2">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="#" href="#">Menu</a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</div>
</div>
<hr>
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" id="menu1">
<li>
<a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Menu</a>
</li>
<li class="dropdown">
<a href="#">Menu</a>
</li>
</ul>Чтобы меню автоматически появлялось при наведении, это можно сделать с помощью базового CSS. Вы должны отработать селектор для скрытого пункта меню, а затем настроить его для отображения в виде блока, когда это необходимо li тег наведен Если взять пример со страницы начальной загрузки Twitter, селектор будет выглядеть следующим образом:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
Однако, если вы используете отзывчивые функции Bootstrap, вам не понадобятся эти функции на свернутой панели навигации (на экранах меньшего размера). Чтобы избежать этого, оберните код выше в медиа-запрос:
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
Чтобы скрыть стрелку (курсор), это делается по-разному в зависимости от того, используете ли вы Twitter Bootstrap версии 2 и ниже или версию 3:
Bootstrap 3
Для удаления каретки в версии 3 вам просто нужно удалить HTML <b class="caret"></b> от .dropdown-toggle якорный элемент:
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<b class="caret"></b> <-- remove this line
</a>
Bootstrap 2 и ниже
Чтобы удалить каретку в версии 2, вам нужно немного больше узнать о CSS, и я предлагаю посмотреть, как :after псевдоэлемент работает более подробно. Чтобы начать понимать, как нацеливать и удалять стрелки в примере начальной загрузки Twitter, вы должны использовать следующий селектор CSS и код:
a.menu:after, .dropdown-toggle:after {
content: none;
}
Это будет работать в вашу пользу, если вы посмотрите дальше, как они работают, а не просто используете ответы, которые я вам дал.
Спасибо @CocaAkat за указание на то, что мы пропустили дочерний комбинатор ">", чтобы предотвратить отображение подменю при наведении на родительский элемент
В дополнение к ответу из "My Head Hurts" (это было здорово):
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
Есть 2 проблемы:
- При нажатии на выпадающую ссылку откроется выпадающее меню. И он останется открытым, если пользователь не щелкнет где-то еще или не наведет на него курсор назад, создав неудобный пользовательский интерфейс.
- Между раскрывающейся ссылкой и выпадающим меню есть отступ в 1 пиксель. Это приводит к тому, что выпадающее меню становится скрытым, если вы медленно перемещаетесь между выпадающим меню и выпадающим меню.
Решением (1) является удаление элементов "class" и "data-toggle" из ссылки nav
<a href="#">
Dropdown
<b class="caret"></b>
</a>
Это также дает вам возможность создать ссылку на вашу родительскую страницу - что было невозможно при реализации по умолчанию. Вы можете просто заменить "#" на любую страницу, которую вы хотите отправить пользователю.
Решение проблемы (2) заключается в удалении поля margin в селекторе.dropdown-menu
.navbar .dropdown-menu {
margin-top: 0px;
}
Я использовал немного JQuery:
// Add hover effect to menus
jQuery('ul.nav li.dropdown').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();
});
Просто настройте свой стиль CSS в три строки кода
.dropdown:hover .dropdown-menu {
display: block;
}
Здесь много действительно хороших решений. Но я думал, что я пойду вперед и поставлю свою здесь в качестве другой альтернативы. Это просто простой фрагмент jQuery, который делает это так, как при начальной загрузке, если он поддерживает hover для выпадающих меню вместо простого щелчка. Я только что проверил это с версией 3, поэтому я не знаю, будет ли это работать с версией 2. Сохраните это как фрагмент в вашем редакторе и сделайте это одним нажатием клавиши.
<script>
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
</script>
По сути, он просто говорит, что когда вы наводите курсор на выпадающий класс, он добавляет к нему открытый класс. Тогда это просто работает. Когда вы перестаете зависать на родительском li с выпадающим классом или на дочернем ul / li, он удаляет открытый класс. Очевидно, что это только одно из многих решений, и вы можете добавить его, чтобы оно работало только с конкретными экземплярами.dropdown. Или добавьте переход к родительскому или дочернему элементу.
Если у вас есть элемент с dropdown Класс как это (например):
<ul class="list-unstyled list-inline">
<li class="dropdown">
<a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
<ul class="dropdown-menu">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
<ul class="dropdown-menu">
<li><a href="">Item A</a></li>
<li><a href="">Item B</a></li>
<li><a href="">Item C</a></li>
<li><a href="">Item D</a></li>
<li><a href="">Item E</a></li>
</ul>
</li>
</ul>
Затем вы можете использовать раскрывающееся меню для автоматического раскрытия при наведении курсора, а не щелкать его заголовок, используя этот фрагмент кода jQuery:
<script>
$('.dropdown').hover(
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
},
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
}
);
$('.dropdown-menu').hover(
function() {
$(this).stop(true, true);
},
function() {
$(this).stop(true, true).delay(200).fadeOut();
}
);
</script>
Этот ответ основывался на ответе @Michael, я внес некоторые изменения и добавил некоторые дополнения для правильной работы выпадающего меню.
[Обновление] Плагин на GitHub, и я работаю над некоторыми улучшениями (например, использование только с атрибутами данных (JS не требуется). Я оставляю код ниже, но он не такой, как на GitHub.
Мне понравилась чисто CSS-версия, но приятно иметь задержку до ее закрытия, так как обычно это удобнее для пользователя (то есть не наказывается за скольжение мыши, которое выходит за 1 пиксель вне выпадающего списка и т. Д.), И как упоминалось в комментариях есть 1пкс поля, с которым вам приходится иметь дело, или иногда навигация неожиданно закрывается, когда вы переходите к выпадающему меню из исходной кнопки и т. д.
Я создал небольшой плагин, который я использовал на нескольких сайтах, и он работал хорошо. Каждый элемент навигации обрабатывается независимо, поэтому у них есть свои таймеры задержки и т. Д.
JS
// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {
// the element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function() {
var $this = $(this).parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
options = $.extend(true, {}, defaults, options, data),
timeout;
$this.hover(function() {
if(options.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$(this).addClass('open');
}, function() {
timeout = window.setTimeout(function() {
$this.removeClass('open');
}, options.delay);
});
});
};
delay параметр самоочевиден, а instantlyCloseOthers мгновенно закроет все другие выпадающие списки, которые открываются, когда вы наводите курсор мыши на новый.
Не чистый CSS, но, надеюсь, поможет кому-то еще в этот поздний час (т.е. это старая ветка).
Если вы хотите, вы можете увидеть различные процессы, которые я прошел (в обсуждении #concrete5 IRC), чтобы заставить его работать через различные шаги в этой сути: https://gist.github.com/3876924
Подход шаблона плагинов намного чище для поддержки отдельных таймеров и т. Д.
Смотрите сообщение в блоге для получения дополнительной информации.
Это сработало для меня:
.dropdown:hover .dropdown-menu {
display: block;
}
Это встроено в Bootstrap 3. Просто добавьте это в свой CSS:
.dropdown:hover .dropdown-menu {
display: block;
}
Просто хочу добавить, что если у вас есть несколько выпадающих (как я), вы должны написать:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
И это будет работать правильно.
Еще лучше с jQuery:
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).show();
jQuery(this).addClass('open');
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).hide();
jQuery(this).removeClass('open');
});
Лучший способ сделать это - просто вызвать событие нажатия Bootstrap при наведении курсора. Таким образом, он должен оставаться сенсорным устройством.
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
Вы можете использовать по умолчанию $().dropdown('toggle') способ переключения выпадающего меню при наведении:
$(".nav .dropdown").hover(function() {
$(this).find(".dropdown-toggle").dropdown("toggle");
});
Мне удалось это следующим образом:
$('ul.nav li.dropdown').hover(function(){
$(this).children('ul.dropdown-menu').slideDown();
}, function(){
$(this).children('ul.dropdown-menu').slideUp();
});
Я надеюсь, что это помогает кому-то...
На мой взгляд, лучший способ таков:
;(function($, window, undefined) {
// Outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// If instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {
// The element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function() {
var $this = $(this),
$parent = $this.parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
settings = $.extend(true, {}, defaults, options, data),
timeout;
$parent.hover(function(event) {
// So a neighbor can't open the dropdown
if(!$parent.hasClass('open') && !$this.is(event.target)) {
return true;
}
if(settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
}, function() {
timeout = window.setTimeout(function() {
$parent.removeClass('open');
}, settings.delay);
});
// This helps with button groups!
$this.hover(function() {
if(settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
});
// Handle submenus
$parent.find('.dropdown-submenu').each(function(){
var $this = $(this);
var subTimeout;
$this.hover(function() {
window.clearTimeout(subTimeout);
$this.children('.dropdown-menu').show();
// Always close submenu siblings instantly
$this.siblings().children('.dropdown-menu').hide();
}, function() {
var $submenu = $this.children('.dropdown-menu');
subTimeout = window.setTimeout(function() {
$submenu.hide();
}, settings.delay);
});
});
});
};
$(document).ready(function() {
// apply dropdownHover to all elements with the data-hover="dropdown" attribute
$('[data-hover="dropdown"]').dropdownHover();
});
})(jQuery, this);
Образец разметки:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">My Account</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Change Email</a></li>
<li><a tabindex="-1" href="#">Change Password</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Logout</a></li>
</ul>
</li>
Это тоже может сделать это.
$('.dropdown').on('mouseover',function(){
$(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave',function(){
$(this).find('.dropdown-menu').hide();
});
Если в раскрывающемся списке есть промежуток между зависшими элементами, раскрывающийся список немедленно закроется, как показано на этом GIF-изображении.
ht tps:https://stackru.com/images/c132abdebe6169e14c8c0d45f7b9e1b3cfbe43de.gif
Чтобы предотвратить такое поведение, вы можете добавить тайм-аут для событий 100 РС
let dropdownTimer;
$('.dropdown').on('mouseover', () => {
clearTimeout(dropdownTimer)
$(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave', () =>{
dropdownTimer = setTimeout(() => {
$(this).find('.dropdown-menu').hide();
}, 100)
});
ht tps:https://stackru.com/images/4ebea6d20fff98e4d448231708c4567b0846cbbe.gif
Я опубликовал подходящий плагин для всплывающей подсказки Bootstrap 3, в котором вы даже можете определить, что происходит при нажатии на dropdown-toggle элемент (щелчок можно отключить):
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
Почему я сделал это, когда уже есть много решений?
У меня были проблемы со всеми ранее существующими решениями. Простые CSS не используют .open класс на .dropdown, поэтому не будет никакого отклика на раскрывающийся элемент переключателя, когда раскрывающийся список виден.
JS те, которые мешают нажать на .dropdown-toggleТаким образом, раскрывающийся список отображается при наведении курсора, а затем скрывается при нажатии на раскрывающемся раскрывающемся списке, а при перемещении мыши этот раскрывающийся список запускается снова. Некоторые из решений js нарушают совместимость с iOS, некоторые плагины не работают в современных браузерах для настольных компьютеров, которые поддерживают сенсорные события.
Вот почему я создал плагин Bootstrap Dropdown Hover, который предотвращает все эти проблемы, используя только стандартный API-интерфейс Bootstrap javascript, без каких-либо взломов. Даже атрибуты Aria отлично работают с этим плагином.
Это, вероятно, глупая идея, но просто убрав стрелку, указывающую вниз, вы можете удалить
<b class="caret"></b>
Это ничего не делает для того, чтобы направить один, хотя...
Также добавлено margin-top:0, чтобы сбросить поле начальной загрузки css для.dropdown-menu, чтобы список меню не исчезал, когда пользователь медленно перемещается из выпадающего меню в список меню.
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.nav .dropdown-menu {
margin-top: 0;
}
Это работает для Bootstrap V4
JS:
<script>
$(function() {
$('.dropdown-hover').hover(
function() { $(this).addClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded', true); $(this).find('.dropdown-menu').addClass('show'); },
function() { $(this).removeClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded',false); $(this).find('.dropdown-menu').removeClass('show'); }
);
});
</script>
Vanilla Bootstrap 4 Dropdown HTML, за исключением добавления класса dropdown-hover:
<div class="dropdown dropdown-hover">
<button class="btn btn-text dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
Если вы не хотите выборочно включать функцию наведения с помощью класса.dropdown-hover, просто измените селектор jquery с.dropdown-hover на.dropdown.
Очень простое решение для версии 2, только CSS. Сохраняет одинаковую дружественную функциональность для мобильных устройств и планшетов.
@media (min-width: 980px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
Bootstrap v4 Solution - работает в IE
Это позволит вам следовать навигационным ссылкам верхнего уровня.
Это полное решение, которое использует события mouseover и mouseleave и некоторую проверку ширины экрана.
Это было сделано с учетом настольных компьютеров и мобильных устройств. Не стесняйтесь изменять переменную BREAK_POINT в соответствии с вашими потребностями:D.
JQuery
var WINDOW_WIDTH;
var BREAK_POINT = 991;
(function ($) {
/** Set window width onload */
WINDOW_WIDTH = $(window).width(); // Returns width of browser viewport
/** Set window width if the browser is resized */
$(window).resize(function () {
WINDOW_WIDTH = $(window).width(); // Returns width of browser viewport
});
/** Dropdown menu on mouseenter */
$(".nav-item.dropdown").on('mouseenter', function () {
console.log("mouseenter");
if (WINDOW_WIDTH >= BREAK_POINT) {
// Open up the dropdown
$(this).addClass('show'); // add the class show to the li parent
$(this).children('.nav-link').removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
$(this).children('.dropdown-menu').addClass('show'); // add the class show to the dropdown div sibling
}
});
/** Dropdown menu on mouseleave */
$(".nav-item.dropdown").on('mouseleave', function () {
console.log("mouseleave");
if (WINDOW_WIDTH >= BREAK_POINT) {
// Open up the dropdown
$(this).removeClass('show'); // add the class show to the li parent
$(this).children('.nav-link').attr('data-toggle', 'dropdown'); // remove the data-toggle attribute so we can click and follow link
$(this).children('.dropdown-menu').removeClass('show'); // add the class show to the dropdown div sibling
}
});
});
CSS
@media(min-width: 768px) {
.dropdown-menu {
margin-top: 0; // fixes closing on slow mouse transition
}
}
Используйте этот код, чтобы открыть подменю при наведении курсора мыши (только на рабочем столе):
$('ul.nav li.dropdown').hover(function () {
if ($(window).width() > 767) {
$(this).find('.dropdown-menu').show();
}
}, function () {
if ($(window).width() > 767) {
$(this).find('.dropdown-menu').hide().css('display','');
}
});
И если вы хотите, чтобы меню первого уровня было интерактивным, даже на мобильном устройстве, добавьте следующее:
$('.dropdown-toggle').click(function() {
if ($(this).next('.dropdown-menu').is(':visible')) {
window.location = $(this).attr('href');
}
});
Подменю (раскрывающееся меню) открывается при наведении курсора мыши на рабочем столе и при нажатии / прикосновении к мобильному устройству и планшету. После открытия подменю второй щелчок откроет ссылку. Благодаря if ($(window).width() > 767), подменю займет всю ширину экрана на мобильном телефоне.
Итак, у вас есть этот код:
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
Обычно он работает с событием щелчка, и вы хотите, чтобы он работал с событием наведения мыши. Это очень просто, просто используйте этот код JavaScript/jQuery:
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
Это работает очень хорошо, и вот объяснение: у нас есть кнопка и меню. При наведении курсора на кнопку мы отображаем меню, а когда мы щелкаем мышью по кнопке, мы скрываем меню через 100 мс. Если вы удивляетесь, почему я это использую, вам нужно время, чтобы перетащить курсор из кнопки над меню. Когда вы находитесь в меню, время сбрасывается, и вы можете оставаться там столько раз, сколько хотите. Когда вы выходите из меню, мы скрываем меню мгновенно, без перерыва.
Я использовал этот код во многих проектах, если у вас возникнут какие-либо проблемы с его использованием, не стесняйтесь задавать мне вопросы.
Это скроет
.navbar .dropdown-menu:before {
display:none;
}
.navbar .dropdown-menu:after {
display:none;
}
Это должно скрывать выпадающие списки и их каретки, если они меньше планшета.
@media (max-width: 768px) {
.navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
display: none;
}
}
Решение jQuery хорошо, но ему нужно будет либо справиться с событиями щелчка (для мобильного телефона или планшета), так как зависание не будет работать должным образом... Может быть, возможно, обнаружится изменение размера окна?
Ответ Андреса Ильича, кажется, работает хорошо, но его следует заключить в медиа-запрос:
@media (min-width: 980px) {
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
}
Для карета... Я не видел никого, определяющего простой CSS, который полностью блокирует каретку.
Ну вот:
.caret {
display: none !important;
}