Ich möchte, dass mein Bootstrap-Menü beim Hover automatisch herunterfällt, anstatt auf den Menütitel klicken zu müssen. Ich möchte auch die kleinen Pfeile neben den Menütiteln verlieren.
css
drop-down-menu
twitter-bootstrap
ins Wanken geraten
quelle
quelle
Antworten:
Ich habe ein reines Dropdown-Menü für den Schwebeflug erstellt, das auf dem neuesten (v2.0.2) Bootstrap-Framework basiert und mehrere Untermenüs unterstützt, und dachte, ich würde es für zukünftige Benutzer veröffentlichen:
Demo
quelle
class="dropdown-toggle" data-toggle="dropdown"
damit nur das Schweben, nicht das Klicken das Menü auslöst. Beachten Sie, dass bei Verwendung von Responsive-Stilen die Menüs immer noch in die kleine Schaltfläche oben rechts verschoben werden, die immer noch durch einen Klick ausgelöst wird. Vielen Dank!@media (min-width: 768px) {.dropdown-menu li:hover .sub-menu {visibility: visible;}}
@media (min-width: 768px) {.dropdown:hover .dropdown-menu {display: block;}}
Damit das Menü beim Hover automatisch abfällt, kann dies mit einfachem CSS erreicht werden. Sie müssen den Selektor auf die ausgeblendete Menüoption einstellen und ihn dann so einstellen, dass er als Block angezeigt wird, wenn Sie mit der
li
Maus über das entsprechende Tag fahren. Das Beispiel aus der Twitter-Bootstrap-Seite lautet wie folgt:Wenn Sie jedoch die reaktionsschnellen Funktionen von Bootstrap verwenden, möchten Sie diese Funktionalität nicht in einer reduzierten Navigationsleiste (auf kleineren Bildschirmen). Um dies zu vermeiden, schließen Sie den obigen Code in eine Medienabfrage ein:
Um den Pfeil (Caret) auszublenden, erfolgt dies auf unterschiedliche Weise, 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
<b class="caret"></b>
aus dem.dropdown-toggle
Ankerelement entfernen :Bootstrap 2 & niedriger
Um das Caret in Version 2 zu entfernen, benötigen Sie etwas mehr Einblick in CSS. Ich schlage vor, die Funktionsweise des
:after
Pseudoelements genauer zu untersuchen. Um Ihnen den Weg zum Verständnis zu erleichtern, die Pfeile im Twitter-Bootstrap-Beispiel anzuvisieren und zu entfernen, verwenden Sie den folgenden CSS-Selektor und Code:Es wird zu Ihren Gunsten funktionieren, wenn Sie genauer untersuchen, wie diese funktionieren, und nicht nur die Antworten verwenden, die ich Ihnen gegeben habe.
Vielen Dank an @CocaAkat für den Hinweis, dass wir den untergeordneten Kombinator ">" vermisst haben, um zu verhindern, dass Untermenüs auf dem übergeordneten Hover angezeigt werden
quelle
margin: 0;
Musste auch hinzufügen , sonst verursacht der 1px Rand oben fehlerhaftes.dropdown-menu
Verhalten.data-toggle="dropdown"
Attribut entfernen .Zusätzlich zu der Antwort von "My Head Hurts" (was großartig war):
Es gibt zwei verbleibende Probleme:
Die Lösung für (1) besteht darin, die Elemente "class" und "data-toggle" aus dem Navigationslink zu entfernen
Auf diese Weise können Sie auch einen Link zu Ihrer übergeordneten Seite erstellen - was mit der Standardimplementierung nicht möglich war. Sie können einfach das "#" durch eine beliebige Seite ersetzen, die Sie dem Benutzer senden möchten.
Die Lösung für (2) besteht darin, den oberen Rand der Menüauswahl .dropdown-menu zu entfernen
quelle
data-toggle="dropdown"
Attribut entfernt, das zu funktionieren schien..nav-pills .dropdown-menu { margin-top: 0px; }
Ich habe ein bisschen jQuery verwendet:
quelle
$('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); }); });
: Wenn das Untermenü schwebt, stoppen Sie fadeOutHier gibt es viele wirklich gute Lösungen. Aber ich dachte, ich würde meine hier als weitere Alternative einsetzen. Es ist nur ein einfaches jQuery-Snippet, das es wie Bootstrap macht, wenn es Hover für Dropdowns unterstützt, anstatt nur zu klicken. Ich habe dies nur mit Version 3 getestet, daher weiß ich nicht, ob es mit Version 2 funktionieren würde. Speichern Sie es als Snippet in Ihrem Editor und haben Sie es auf Knopfdruck.
Grundsätzlich heißt es nur, wenn Sie mit der Maus über die Dropdown-Klasse fahren, wird die offene Klasse hinzugefügt. Dann funktioniert es einfach. Wenn Sie aufhören, entweder mit der Dropdown-Klasse über dem übergeordneten Li oder mit dem untergeordneten ul / li zu schweben, wird die offene Klasse entfernt. Offensichtlich ist dies nur eine von vielen Lösungen, und Sie können sie hinzufügen, damit sie nur für bestimmte Instanzen von .dropdown funktioniert. Oder fügen Sie einen Übergang zu einem Elternteil oder einem Kind hinzu.
quelle
Passen Sie einfach Ihren CSS-Stil in drei Codezeilen an
quelle
Wenn Sie ein Element mit einer
dropdown
Klasse wie dieser haben (zum Beispiel):Mithilfe dieses Ausschnitts aus jQuery-Code können Sie das Dropdown-Menü beim Hover-Over automatisch herunterklappen lassen, anstatt auf den Titel klicken zu müssen:
Hier ist eine Demo
Diese Antwort stützte sich auf die Antwort von @Michael . Ich habe einige Änderungen vorgenommen und einige Ergänzungen hinzugefügt, damit das Dropdown-Menü ordnungsgemäß funktioniert
quelle
[Update] Das Plugin ist auf GitHub und ich arbeite an einigen Verbesserungen (wie die Verwendung nur mit Datenattributen (kein JS erforderlich). Ich habe den Code unten belassen, aber er ist nicht derselbe wie der auf GitHub.
Ich mochte die reine CSS-Version, aber es ist schön, eine Verzögerung zu haben, bevor sie geschlossen wird, da dies normalerweise eine bessere Benutzererfahrung ist (dh nicht für einen Mausbeleg bestraft wird, der 1 Pixel außerhalb des Dropdowns liegt usw.), und wie in den Kommentaren erwähnt , gibt es diesen 1px Rand, mit dem Sie sich befassen müssen, oder manchmal wird das Navigationssystem unerwartet geschlossen, wenn Sie von der ursprünglichen Schaltfläche zum Dropdown-Menü wechseln usw.
Ich habe ein schnelles kleines Plugin erstellt, das ich auf einigen Websites verwendet habe, und es hat gut funktioniert. Jedes Navigationselement wird unabhängig behandelt, sodass es über eigene Verzögerungszeitgeber usw. verfügt.
JS
Der
delay
Parameter ist ziemlich selbsterklärend undinstantlyCloseOthers
schließt sofort alle anderen Dropdowns, die geöffnet sind, wenn Sie mit der Maus über einen neuen fahren.Kein reines CSS, aber hoffentlich hilft es jemand anderem zu dieser späten Stunde (dh dies ist ein alter Thread).
Wenn Sie möchten, können Sie die verschiedenen Prozesse sehen, die ich durchlaufen habe (in einer Diskussion im
#concrete5
IRC), damit es über die verschiedenen Schritte in dieser Übersicht funktioniert: https://gist.github.com/3876924Der Plugin-Pattern-Ansatz ist viel sauberer, um einzelne Timer usw. zu unterstützen.
Weitere Informationen finden Sie im Blogbeitrag .
quelle
Das hat bei mir funktioniert:
quelle
Dies ist in Bootstrap 3 integriert. Fügen Sie dies einfach Ihrem CSS hinzu:
quelle
Noch besser mit jQuery:
quelle
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'); });
so geändert, dass das Untermenü beim Hover nicht angezeigt wird.Sie können die Standardmethode
$().dropdown('toggle')
verwenden, um das Dropdown-Menü beim Hover umzuschalten:quelle
Ich möchte nur hinzufügen, dass Sie schreiben sollten, wenn Sie mehrere Dropdowns haben (wie ich):
Und es wird richtig funktionieren.
quelle
margin: 2px 0 0;
was bedeutete, dass ein langsamer MouseEnter von oben das Menü vorzeitig versteckte.ul.dropdown-menu{ margin-top: 0; }
Meiner Meinung nach ist der beste Weg so:
Beispiel-Markup:
quelle
Der beste Weg, dies zu tun, besteht darin, das Klickereignis von Bootstrap einfach mit einem Hover auszulösen. Auf diese Weise sollte es weiterhin berührungsgerätefreundlich bleiben.
quelle
Ich habe es wie folgt geschafft:
Ich hoffe das hilft jemandem ...
quelle
Außerdem wurde Rand oben hinzugefügt: 0, um den Bootstrap-CSS-Rand für das .dropdown-Menü zurückzusetzen, damit die Menüliste nicht verschwindet, wenn der Benutzer langsam vom Dropdown-Menü zur Menüliste schwebt.
quelle
Dies ist wahrscheinlich eine dumme Idee, aber um nur den nach unten zeigenden Pfeil zu entfernen, können Sie den löschen
Dies tut jedoch nichts für den nach oben weisenden ...
quelle
Ich habe ein geeignetes Plugin für die Dropdown-Hover-Funktion von Bootstrap 3 veröffentlicht, in dem Sie sogar definieren können, was beim Klicken auf das
dropdown-toggle
Element passiert (der Klick kann deaktiviert werden):https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
Warum habe ich es geschafft, wenn es bereits viele Lösungen gibt?
Ich hatte Probleme mit allen zuvor vorhandenen Lösungen. Die einfachen CSS verwenden die
.open
Klasse nicht auf der.dropdown
, sodass keine Rückmeldung zum Dropdown-Umschaltelement erfolgt, wenn das Dropdown-Menü sichtbar ist.Die js stören das Klicken auf
.dropdown-toggle
, sodass das Dropdown beim Hover angezeigt wird. Wenn Sie auf ein geöffnetes Dropdown , wird es ausgeblendet. Wenn Sie die Maus das Dropdown-Menü erneut angezeigt. Einige der js-Lösungen beeinträchtigen die iOS-Kompatibilität, andere Plugins funktionieren nicht in modernen Desktop-Browsern, die Touch-Ereignisse unterstützen.Aus diesem Grund habe ich das Bootstrap Dropdown Hover- Plugin erstellt , das all diese Probleme verhindert, indem nur die Standard-Bootstrap-Javascript-API ohne Hack verwendet wird . Sogar die Aria-Attribute funktionieren mit diesem Plugin einwandfrei.
quelle
bootstrap-dropdown-hover
, weil es den Job zu machen scheint und kompakter. Ich baue einen Landeplatz mit linker Navigationsleiste.Verwenden Sie diesen Code, um das Untermenü im Mauszeiger zu öffnen (nur Desktop):
Und wenn Sie möchten, dass das Menü der ersten Ebene auch auf Mobilgeräten anklickbar ist, fügen Sie Folgendes hinzu:
Das Untermenü (Dropdown-Menü) wird mit dem Mauszeiger auf dem Desktop und mit Click / Touch auf dem Handy und Tablet geöffnet. Sobald das Untermenü geöffnet war, können Sie den Link mit einem zweiten Klick öffnen. Dank der
if ($(window).width() > 767)
wird das Untermenü auf dem Handy die volle Bildschirmbreite einnehmen.quelle
quelle
Dadurch werden die oberen ausgeblendet
quelle
Dies sollte die Dropdowns und ihre Carets verbergen, wenn sie kleiner als eine Tablette sind.
quelle
Die jQuery-Lösung ist gut, muss jedoch entweder bei Klickereignissen (für Mobilgeräte oder Tablets) behandelt werden, da der Schwebeflug nicht ordnungsgemäß funktioniert.
Die Antwort von Andres Ilich scheint gut zu funktionieren, sollte aber in eine Medienabfrage eingeschlossen werden:
quelle
Die sehr einfache Lösung für Version 2, nur CSS. Behält die gleiche freundliche Funktionalität für Handy und Tablet.
quelle
Überschreiben Sie bootstrap.js mit diesem Skript.
quelle
Hier ist meine Technik, die eine leichte Verzögerung hinzufügt, bevor das Menü geschlossen wird, nachdem Sie aufgehört haben, über dem Menü oder der Umschalttaste zu schweben. Das
<button>
, auf das Sie normalerweise klicken würden, um das Navigationsmenü anzuzeigen, ist#nav_dropdown
.quelle
Um die Antwort von Sudharshan zu verbessern, füge ich dies in eine Medienabfrage ein, um das Schweben auf XS-Anzeigebreiten zu verhindern ...
Auch das Caret im Markup ist nicht erforderlich, nur die Dropdown- Klasse für das Li .
quelle
Dies funktioniert für WordPress Bootstrap:
quelle
Sie haben also diesen Code:
Normalerweise funktioniert es bei einem Klickereignis, und Sie möchten, dass es bei einem Hover-Ereignis funktioniert. Dies ist sehr einfach. Verwenden Sie einfach diesen JavaScript / jQuery-Code:
Das funktioniert sehr gut und hier ist die Erklärung: Wir haben eine Schaltfläche und ein Menü. Wenn wir mit der Maus über die Schaltfläche fahren, wird das Menü angezeigt, und wenn wir mit der Maus über die Schaltfläche fahren, wird das Menü nach 100 ms ausgeblendet. Wenn Sie sich fragen, warum ich das verwende, brauchen Sie Zeit, um den Cursor von der Schaltfläche über das Menü zu ziehen. Wenn Sie im Menü sind, wird die Zeit zurückgesetzt und Sie können so oft dort bleiben, wie Sie möchten. Wenn Sie das Menü verlassen, wird das Menü sofort ohne Zeitüberschreitung ausgeblendet.
Ich habe diesen Code in vielen Projekten verwendet. Wenn Sie Probleme bei der Verwendung haben, können Sie mir gerne Fragen stellen.
quelle