Как сделать так, чтобы всплывающее меню Twitter Bootstrap при наведении курсора, а не при нажатии


1184

Я бы хотел, чтобы меню Bootstrap автоматически выпадало при наведении курсора, а не щелкало заголовок меню. Я также хотел бы потерять маленькие стрелки рядом с заголовками меню.


9
Для этого есть решение, поэтому ответ Микко правильный, но теперь он снабжен плагином для конкретной ситуации. самозагрузки-парения-Выпадающий
HenryW

2
Посмотрите мой недавно опубликованный правильный плагин, который предотвращает проблемы описанных ниже решений CSS и js, и прекрасно работает на iOS и в современных настольных браузерах с сенсорными событиями. Даже атрибуты арии работают нормально: github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
Иштван Уй-Месарош

Я сделал чистый выпадающий список CSS3 с помощью загрузочной навигационной панели, посмотрите на CodePen Pure CSS3 Dropdown
Gothburz

18
Подумайте дважды, действительно ли вам это нужно? Bootstrap используется для адаптивных сайтов. Это означает, что они также будут использоваться на устройствах с сенсорным управлением. Вот почему он разработан таким образом. На сенсорных экранах нет "зависания".
Serj.by

Возможный дубликат Bootstrap Dropdown с Hover
slugster

Ответы:


592

Я создал раскрывающееся меню при наведении курсора, основанное на последней (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>

демонстрация


54
в начальной загрузке это дизайнерское решение не открывать выпадающие
списки при

18
так хорошо! Я также удалил, class="dropdown-toggle" data-toggle="dropdown"чтобы только зависание, а не щелчок вызывало меню. Обратите внимание, что при использовании адаптивных стилей меню по-прежнему отображаются в маленькой кнопке в правом верхнем углу, которая по-прежнему вызывается щелчком мыши. Большое спасибо!
ptim

11
Чтобы избежать автоматического выпадения на меньших устройствах (таких как телефоны) и разрешить его только на минимальной ширине, например, 768 пикселей до @media (min-width: 768px) {.dropdown-menu li:hover .sub-menu {visibility: visible;}}и@media (min-width: 768px) {.dropdown:hover .dropdown-menu {display: block;}}
Крис Аелбрехт,

1
Кроме того, чтобы сделать ссылку с дочерними объектами кликабельными, необходимо удалить тег «data-toggle = 'dropdown" »в теге <a>.
joan16v

2
Вот код, который работает с новейшей версией Bootstrap 3: jsfiddle.net/sgruenwald/2tt8f8xg
Стефан Грюнвальд

910

Чтобы меню автоматически появлялось при наведении, это можно сделать с помощью базового 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>

Бутстрап 2 и ниже

Чтобы удалить каретку в версии 2, вам нужно немного больше узнать о CSS, и я предлагаю посмотреть, как :afterработает псевдоэлемент, более подробно. Чтобы начать понимать, как нацеливать и удалять стрелки в примере начальной загрузки Twitter, вы должны использовать следующий селектор CSS и код:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

Это будет работать в вашу пользу, если вы посмотрите дальше, как они работают, а не просто используете ответы, которые я вам дал.

Спасибо @CocaAkat за указание на то, что мы пропустили дочерний комбинатор ">" для предотвращения отображения подменю при наведении на родительский элемент


79
Также пришлось добавить margin: 0;, в противном случае поле в 1px выше .dropdown-menuвызывает ошибочное поведение.
Салман фон Аббас

12
Простое решение, но родительская ссылка все еще не активна. Я использую последнюю загрузку с корнями темы.
Крунал

5
Примечание. Да, это так - это будет работать в любом браузере, который поддерживает загрузчик Twitter. @GeorgeEdison Это основной CSS - какая часть не будет поддерживаться IE8? Если у вас возникли проблемы, оставьте вопрос, не вводя в заблуждение комментарии.
Моя голова болит

3
@MyHeadHurts: После некоторых дальнейших исследований выясняется, что это действительно была ошибка Bootstrap, и она была исправлена ​​только пять дней назад.
Натан Осман

5
@ Крунал, чтобы можно было нажать на ссылку, вы должны удалить data-toggle="dropdown"атрибут.
Pherrymason

231

В дополнение к ответу из "My Head Hurts" (это было здорово):

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

Есть 2 проблемы:

  1. При нажатии на выпадающую ссылку откроется выпадающее меню. И он останется открытым, если пользователь не щелкнет где-то еще или не наведет на него курсор назад, создав неудобный пользовательский интерфейс.
  2. Между раскрывающейся ссылкой и выпадающим меню есть отступ в 1 пиксель. Это приводит к тому, что выпадающее меню становится скрытым, если вы медленно перемещаетесь между выпадающим меню и выпадающим меню.

Решением (1) является удаление элементов "class" и "data-toggle" из ссылки nav

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

Это также дает вам возможность создать ссылку на вашу родительскую страницу - что было невозможно при реализации по умолчанию. Вы можете просто заменить "#" на любую страницу, которую вы хотите отправить пользователю.

Решением (2) является удаление поля на верху в селекторе .dropdown-menu

.navbar .dropdown-menu {
    margin-top: 0px;
}

15
Чтобы исправить намеренный щелчок, я просто удалил data-toggle="dropdown"атрибут, который, казалось, работал.
Энтони Бриггс

5
Решение (2) для кнопок таблеток:.nav-pills .dropdown-menu { margin-top: 0px; }
Лорен

1
Чтобы устранить проблему, я отметил выше li.dropdown: hover> ul.dropdown-menu
Архимед Траяно

12
удаление атрибутов «class» и «data-toggle» из навигационных ссылок приводит к тому, что он перестает нормально работать на мобильных устройствах и планшетах :(
Mosijava

1
Если вы удалили атрибут data-toggle = "dropdown", вы не сможете развернуть раскрывающееся меню с помощью клавиатуры. Так что он не будет соответствовать 508. Как вы можете отключить щелчок, но сохранить функциональность клавиатуры?
duyn9uyen

130

Я использовал немного 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();
});

13
Нравится. В любом случае я использую JQuery с Bootstrap и по-прежнему поддерживает функцию «щелчка» по умолчанию на устройствах с сенсорным экраном.
Утка в заварном креме

Использовал это. Мне нравится, что он по-прежнему позволяет использовать функцию щелчка для мобильных телефонов, но для настольных компьютеров зависание идеально.
Стюарт

1
Я использовал это, но также расширил его, чтобы его можно было использовать для выпадающих меню, которых нет в навигации. Я добавил класс dropdown-hover к элементу btn-group и использовал этот jQuery finder $ ('ul.nav li.dropdown, .dropdown-hover'). Hover (function () {. Спасибо!
Брэндон

Использовал этот, красивый и маленький. Версия css не позволяла подменю оставаться отображаемым, и 200 мс было слишком быстрым, поэтому я изменил его на $('ul.nav li.dropdown').hover(function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(); }, function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut().hover(function() { $(this).stop(true, true); }); });: Когда подменю находится при наведении, остановка fadeOut
Damien

похоже, это не работает с jqLite, который включен в anguraljs
nuander

70

Здесь есть много действительно хороших решений. Но я думал, что я пойду вперед и поставлю свою здесь в качестве другой альтернативы. Это просто простой фрагмент jQuery, который делает это так, как при начальной загрузке, если он поддерживает всплывающие окна вместо всплывающих окон. Я только что проверил это с версией 3, поэтому я не знаю, будет ли это работать с версией 2. Сохраните это как фрагмент в вашем редакторе и сделайте это одним нажатием клавиши.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

По сути, он просто говорит, что когда вы наводите курсор на выпадающий класс, он добавляет к нему открытый класс. Тогда это просто работает. Когда вы перестаете зависать на родительском li с выпадающим классом или дочернем ul / li, он удаляет открытый класс. Очевидно, что это только одно из многих решений, и вы можете добавить его, чтобы оно работало только с конкретными экземплярами .dropdown. Или добавьте переход к родительскому или дочернему элементу.


2
Отличное решение! Я также удалил атрибут data-toggle = "dropdown" из ссылки, чтобы сделать верхнюю ссылку кликабельной.
Сергей

Это хороший совет, Сергей. Я всегда проверяю, чтобы верхняя ссылка никуда не делась, чтобы она работала и на планшетах, и на телефонах.
стереонаука

1
@ Сергей, я бы не советовал это делать. Вы бы сломали функциональность для мобильных пользователей. Они не могут использовать функцию наведения, чтобы открыть меню, и должны иметь возможность щелкать по нему.
Пол

2
Это удивительно коротко и легко, но при этом совместимо с сенсорными экранами. Должно быть проголосовано гораздо больше.
Макс

Это выглядит действительно хорошо. Любая идея, как добавить немного анимации с помощью CSS-переходов?
Фред Роча

70

Просто настройте свой стиль CSS в три строки кода

.dropdown:hover .dropdown-menu {
   display: block;
}

22

Если у вас есть элемент с таким 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 , я внес некоторые изменения и добавил некоторые дополнения для правильной работы выпадающего меню.


Отлично. Большое спасибо.
antikbd

20

[Обновление] Плагин на 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, но, надеюсь, поможет кому-то еще в этот поздний час (т.е. это старая ветка).

Если вы хотите, вы можете увидеть различные процессы, которые я прошел (в обсуждении #concrete5IRC), чтобы заставить его работать через различные шаги в этом гисте: https://gist.github.com/3876924

Подход шаблона плагинов намного чище для поддержки отдельных таймеров и т. Д.

Смотрите сообщение в блоге для получения дополнительной информации.



15

Это встроено в Bootstrap 3. Просто добавьте это в свой CSS:

.dropdown:hover .dropdown-menu {
    display: block;
}

10

Еще лучше с 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');
});

3
Я изменил ваш код, чтобы jQuery('ul.nav li.dropdown').hover(function() { jQuery(this).closest('.dropdown-menu').stop(true, true).show(); jQuery(this).addClass('open'); }, function() { jQuery(this).closest('.dropdown-menu').stop(true, true).hide(); jQuery(this).removeClass('open'); });подменю не отображалось при наведении курсора.
Farjam

Этот код больше не будет работать с последними выпусками.
Пол

9

Вы можете использовать $().dropdown('toggle')метод по умолчанию для переключения выпадающего меню при наведении:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

9

Просто хочу добавить, что если у вас есть несколько выпадающих (как я), вы должны написать:

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

И это будет работать правильно.


В моем .dropdown-menu, margin: 2px 0 0;означавшем медленный MouseEnter сверху, скрывалось меню преждевременно. ul.dropdown-menu{ margin-top: 0; }
Аластер

8

На мой взгляд, лучший способ таков:

;(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>

5
Это работа Кэмерона Spear, подумал я бы дал ему Shoutout: cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin
келпи

8

Лучший способ сделать это - просто вызвать событие нажатия Bootstrap при наведении курсора. Таким образом, он должен оставаться сенсорным устройством.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

Нежелательный результат: mousein, click и mouseout оставят меню открытым. Это не то, что я хочу ...
Wietse

Используя это, он запускает функцию начальной загрузки, чтобы открыть раскрывающийся список, эта функция делает много других вещей, например, aria-
extended

7

Мне удалось это следующим образом:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

Я надеюсь, что это помогает кому-то...


5

Также добавлено margin-top: 0, чтобы сбросить поле начальной загрузки css для .dropdown-menu, чтобы список меню не исчезал, когда пользователь медленно перемещается из выпадающего меню в список меню.

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

.nav .dropdown-menu {
    margin-top: 0;
}

2
это правильный ответ, загрузчик готов к зависанию при выпадающем меню, если мышь не выходит за пределы выпадающего меню. Удаление маркер-вершины позволяет переходить от ссылки к меню без перерыва и т. Д. Без автоматического закрытия меню. И это решение позволяет сохранить правильное поведение для сенсорных устройств
Николя Джанел

5

Это, вероятно, глупая идея, но просто убрав стрелку, указывающую вниз, вы можете удалить

<b class="caret"></b>

Это ничего не делает для того, чтобы направить один, хотя ...


5

Я опубликовал соответствующий плагин для всплывающей подсказки 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 отлично работают с этим плагином.


Что вы думаете о github.com/vadikom/smartmenus ? Я не могу решить, обе библиотеки кажутся действительно хорошими.
Чаба Тот

2
Smartmenus выглядит действительно хорошо, может быть, лучше для меню. Мой плагин является лишь небольшим дополнением к раскрывающимся спискам начальной загрузки, он не более чем открывает раскрывающийся список при наведении, в то время как smartmenu также поддерживает подменю и выполняет некоторые другие интересные вещи.
Иштван Уй-Месарош

1
Спасибо. Я вижу, что код smartmenu очень обширный, а также много CSS. До сих пор я пошел bootstrap-dropdown-hover, потому что, кажется, делать работу и более компактно. Я строю посадочную площадку с левой боковой панелью навигации.
Чаба Тот

4

Используйте этот код, чтобы открыть подменю при наведении курсора мыши (только на рабочем столе):

$('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)подменю займет всю ширину экрана на мобильном телефоне.


Я хотел бы использовать ваш код, но у меня возникают проблемы с его корректной работой. Во-первых, как удалить hover () для мобильного телефона и использовать только для рабочего стола? Когда я использую ваш код и изменяю размер окна для мобильных устройств, я получаю функции hover () и click (). Но еще более странно ... что такое поведение остановится, когда я обновлю браузер, ха! Не могли бы вы показать мне, как это исправить? Мне нужно, чтобы подменю рабочего стола отображались в hover () и click (), чтобы отображать подменю на мобильном устройстве, без необходимости обновлять браузер даже при изменении размера окна для правильной работы. Я надеюсь, что это ясно
Chris22

хорошо, это имеет смысл, и я постараюсь запустить ваше решение так, как вы рекомендуете. Спасибо!
Chris22

Используйте этот лучший метод: @falter
Фархад Сахаи


3

Это скроет

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

3

Это должно скрывать выпадающие списки и их каретки, если они меньше планшета.

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

Почему вы хотите это скрыть? Теперь мобильные пользователи не имеют доступа к ссылкам, которые находятся в подменю. Лучше отключить эффект наведения на мобильном устройстве и сохранить раскрывающееся меню без изменений. Таким образом, они могут открыть его, нажав на него.
Пол

3

Решение 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;
    }
}

3

Очень простое решение для версии 2, только CSS. Сохраняет одинаковую дружественную функциональность для мобильных устройств и планшетов.

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}

Это не очень хорошо работает для некоторых тем, где есть разрыв между пунктом меню и выпадающим меню. Меню исчезнет, ​​когда мышь попадет в этот промежуток.
ndbroadbent

2

Перезаписать bootstrap.js этим скриптом.

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

}); 

2

Вот моя техника, которая добавляет небольшую задержку перед закрытием меню после того, как вы перестанете зависать над меню или кнопкой переключения. То, <button>что вы обычно нажимаете для отображения меню навигации #nav_dropdown.

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});

2

Чтобы улучшить ответ Судхаршана , я обертываю его в медиазапрос, чтобы предотвратить зависание при ширине экрана XS ...

@media (min-width:768px)
{
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

Кроме того, каретка в разметке не требуется, просто выпадающий класс для li .


2

Это работает для WordPress Bootstrap:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

2

Итак, у вас есть этот код:

<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 мс. Если вы удивляетесь, почему я это использую, вам нужно время, чтобы перетащить курсор с кнопки над меню. Когда вы находитесь в меню, время сбрасывается, и вы можете оставаться там столько раз, сколько хотите. Когда вы выйдете из меню, мы сразу же скроем меню без перерыва.

Я использовал этот код во многих проектах, если у вас возникнут какие-либо проблемы с его использованием, не стесняйтесь задавать мне вопросы.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.