Frage Wie man das Twitter Bootstrap-Menü-Drop-down-Menü beim Hover statt beim Klicken macht


Ich möchte, dass mein Bootstrap-Menü automatisch auf den Mauszeiger zeigt, anstatt auf den Menütitel klicken zu müssen. Ich möchte auch die kleinen Pfeile neben den Menütiteln verlieren.


1037
2018-01-16 09:36


Ursprung


Antworten:


Ich habe ein reines Hover-Dropdown-Menü erstellt, das auf dem neuesten (v2.0.2) Bootstrap-Framework basiert, das mehrere Untermenüs unterstützt und dachte, ich würde es für zukünftige Benutzer veröffentlichen:

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>

Demo


528
2018-04-13 14:46



Um das Menü beim Hover automatisch zu löschen, kann dies mit CSS erreicht werden. Sie müssen den Selektor zu der ausgeblendeten Menüoption ausarbeiten und dann so einstellen, dass er bei Bedarf als Block angezeigt wird li Das Tag wird überlagert. Nehmen wir das Beispiel von der Twitter-Bootstrap-Seite, wäre der Selektor wie folgt:

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

Wenn Sie jedoch die Responsive-Funktionen von Bootstrap verwenden, möchten Sie diese Funktionalität nicht in einer minimierten Navigationsleiste (auf kleineren Bildschirmen). Um dies zu vermeiden, wickeln Sie den obigen Code in eine Medienabfrage ein:

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

Um den Pfeil (Caret) zu verbergen, wird dies auf verschiedene Arten durchgeführt, je nachdem, ob Sie Twitter Bootstrap Version 2 und niedriger oder Version 3 verwenden:

Bootstrap 3

Um das Caret in Version 3 zu entfernen, müssen Sie nur den HTML-Code entfernen <b class="caret"></b> von dem .dropdown-toggle Ankerelement:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 & niedriger

Um das Caret in Version 2 zu entfernen, benötigen Sie ein wenig mehr Einblick in CSS und ich schlage vor, wie Sie das aussehen :after Pseudo-Element arbeitet genauer. Um Sie auf Ihrem Weg zum Verständnis, zum Zielen und Entfernen der Pfeile im Beispiel für das Bootstrap von Twitter zu unterstützen, verwenden Sie den folgenden CSS-Selektor und -Code:

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

Es wird zu Ihren Gunsten funktionieren, wenn Sie weiter schauen, wie diese funktionieren und nicht nur die Antworten verwenden, die ich Ihnen gegeben habe.

Danke an @CocaAkat für den Hinweis, dass wir den ">" Child-Kombinator vermissen, um zu verhindern, dass Untermenüs auf dem Eltern-Hover angezeigt werden


874
2018-01-16 10:26



Neben der Antwort von "My Head Hurts" (was super war):

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

Es gibt 2 anhaltende Probleme:

  1. Ein Klick auf den Dropdown-Link öffnet das Dropdown-Menü. Und es bleibt geöffnet, es sei denn, der Benutzer klickt woanders hin oder schwebt zurück, wodurch eine unbeholfene Benutzeroberfläche entsteht.
  2. Zwischen dem Dropdown-Link und dem Dropdown-Menü befindet sich ein 1-Pixel-Rand. Dadurch wird das Dropdown-Menü ausgeblendet, wenn Sie sich langsam zwischen dem Dropdown- und dem Dropdown-Menü bewegen.

Die Lösung von (1) besteht darin, die Elemente "Klasse" und "Datenumschalten" aus der Navigationsverknüpfung zu entfernen

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

Auf diese Weise können Sie auch eine Verknüpfung zu Ihrer übergeordneten Seite erstellen, was mit der Standardimplementierung nicht möglich war. Sie können das "#" einfach durch die Seite ersetzen, die Sie dem Benutzer senden möchten.

Die Lösung für (2) ist das Entfernen des Randbereichs im Dropdown-Menü-Selektor

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

221
2018-02-24 18:00



Ich habe ein bisschen jQuery benutzt:

// 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();
});

119
2018-05-22 17:49



Hier gibt es viele wirklich gute Lösungen. Aber ich dachte, ich würde weitermachen und meine hier als eine weitere Alternative einsetzen. Es ist nur ein einfaches jQuery-Snippet, das so funktioniert wie Bootstrap, wenn es Hover für Dropdowns unterstützt, anstatt einfach nur zu klicken. Ich habe das nur mit Version 3 getestet, also weiß ich nicht, ob es mit Version 2 funktionieren würde. Speichern Sie es als Schnipsel in Ihrem Editor und haben Sie es auf Knopfdruck.

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

Im Grunde sagt es nur, wenn Sie den Mauszeiger über die Dropdown-Klasse halten, wird die offene Klasse hinzugefügt. Dann funktioniert es einfach. Wenn Sie den Mauszeiger über den übergeordneten li mit der Dropdown-Klasse oder den untergeordneten Zeilen / Zeilen halten, wird die geöffnete Klasse entfernt. Offensichtlich ist dies nur eine von vielen Lösungen, und Sie können hinzufügen, dass es nur für bestimmte Instanzen von .dropdown funktioniert. Oder fügen Sie einen Übergang zu einem übergeordneten oder untergeordneten Element hinzu.


64
2018-01-31 17:28



Passen Sie Ihren CSS-Stil einfach in drei Zeilen Code an

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

60
2018-04-05 06:24



Wenn Sie ein Element mit einem haben dropdown Klasse wie diese (zum Beispiel):

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

Dann können Sie das Drop-down-Menü automatisch auf den Mauszeiger ziehen lassen, anstatt auf den Titel klicken zu müssen, indem Sie dieses Code-Snippet verwenden:

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

Hier ist eine Demo

Diese Antwort verließ sich darauf @Michael AntwortIch habe einige Änderungen vorgenommen und einige Ergänzungen hinzugefügt, damit das Dropdown-Menü ordnungsgemäß funktioniert


20
2017-09-27 21:13



[Aktualisieren] Das Plugin ist aktiviert GitHub und ich arbeite an einigen Verbesserungen (wie nur mit Daten-Attribute verwenden (keine JS notwendig). Ich habe den Code unten, aber es ist nicht das gleiche wie auf GitHub.

Ich mochte die reine CSS-Version, aber es ist schön, eine Verzögerung zu haben, bevor es schließt, da es normalerweise eine bessere Benutzererfahrung ist (dh nicht für einen Mausklick bestraft, der 1 px außerhalb des Dropdown-Menüs geht) und wie in den Kommentaren erwähnt , es gibt 1px Rand, mit dem Sie zu tun haben, oder manchmal schließt das Nav unerwartet, wenn Sie von der Original-Schaltfläche zum Dropdown-Menü wechseln.

Ich habe ein kleines kleines Plugin erstellt, das ich auf einigen Websites verwendet habe und es hat gut funktioniert. Jeder Nav-Gegenstand wird unabhängig behandelt, also haben sie ihre eigenen Verzögerungszeiten, usw.

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);
        });
    });
};  

Das delay Parameter ist ziemlich selbsterklärend, und die instantlyCloseOthers schließt sofort alle anderen Dropdown-Listen, die geöffnet sind, wenn Sie den Mauszeiger über einen neuen bewegen.

Nicht reines CSS, aber hoffentlich hilft es jemand anderem zu dieser späten Stunde (d. H. Das ist ein alter Thread).

Wenn Sie wollen, können Sie die verschiedenen Prozesse sehen, die ich durchlaufen habe (in einer Diskussion über die #concrete5 IRC), um es über die verschiedenen Schritte in diesem Sinne zum Laufen zu bringen: https://gist.github.com/3876924

Der Plugin-Muster-Ansatz ist viel sauberer, um einzelne Timer usw. zu unterstützen.

Siehe die Blogeintrag für mehr.


19
2017-10-12 03:02



Das hat für mich funktioniert:

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

15
2017-10-06 11:47