Wir haben das Twitter-Bootstrap-Dropdown so eingerichtet, dass es beim Hover funktioniert (im Gegensatz zum Klicken [Ja, wir kennen das No-Hover auf Touch-Geräten]). Wir möchten jedoch, dass der Hauptlink funktioniert, wenn wir darauf klicken.
Standardmäßig blockiert Twitter Bootstrap es. Wie können wir es also wieder aktivieren?
drop-down-menu
hyperlink
twitter-bootstrap
Hagelholz
quelle
quelle
<nav class="nav-main mega-menu"> <ul id="topMain" class="nav nav-pills nav-main scroll-menu"> <li id="dropdown-menu-home"> <li id="about" class="dropdown active"> <a class="dropdown-toggle disabled" href="https://stackoverflow.com/about/"> <ul class="dropdown-menu"> </li>
Sie bleibt inaktiv und kann nicht angeklickt werden. Ich verwende Bootstrap 3 und ein darauf basierendes Thema.Für diejenigen unter Ihnen, die sich über "Die Untermenüs fallen nicht herunter" beschweren, habe ich es so gelöst, was für mich sauber aussieht:
1) Neben deinem
<a class="dropdown-toggle disabled" href="http://google.com"> Dropdown <b class="caret"></b> </a>
ein neues setzen
<a class="dropdown-toggle"><b class="caret"></b></a>
und entfernen Sie das
<b class="caret"></b>
Tag, damit es so aussieht<a class="dropdown-toggle disabled" href="http://google.com"> Dropdown</a><a class="dropdown-toggle"><b class="caret"></b></a>
2) Gestalte sie mit den folgenden CSS-Regeln:
.caret1 { position: absolute !important; top: 0; right: 0; } .dropdown-toggle.disabled { padding-right: 40px; }
Der Stil in der .caret1-Klasse dient dazu, ihn absolut in Ihrem zu positionieren
li
rechten Ecke .Der zweite Stil dient zum Hinzufügen von Auffüllungen rechts neben dem Dropdown-Menü, um das Caret zu platzieren und zu verhindern, dass sich der Text des Menüelements überlappt.
Jetzt haben Sie einen ansprechenden Menüpunkt, der sowohl in Desktop- als auch in Mobilversionen gut aussieht und der sowohl anklickbar als auch dropdown-fähig ist, je nachdem, ob Sie auf den Text oder auf das Caret klicken.
quelle
Da es keine wirklich funktionierende Antwort gibt (ausgewählte Antwort deaktiviert das Dropdown-Menü) oder die Verwendung von Javascript überschreibt, geht es weiter.
Dies ist alles HTML- und CSS-Fix (verwendet zwei
<a>
Tags):<ul class="nav"> <li class="dropdown dropdown-li"> <a class="dropdown-link" href="http://google.com">Dropdown</a> <a class="dropdown-caret dropdown-toggle"><b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> </ul>
Hier ist das CSS, das Sie benötigen.
.dropdown-li { display:inline-block !important; } .dropdown-link { display:inline-block !important; padding-right:4px !important; } .dropdown-caret { display:inline-block !important; padding-left:4px !important; }
Angenommen, Sie möchten, dass beide
<a>
Tags beim Schweben eines der beiden Tags hervorgehoben werden, müssen Sie auch den Bootstrap überschreiben. Möglicherweise spielen Sie mit den folgenden Optionen herum:.nav > li:hover { background-color: #f67a47; /*hover background color*/ } .nav > li:hover > a { color: white; /*hover text color*/ } .nav > li:hover > ul > a { color: black; /*dropdown item text color*/ }
quelle
Ich bin mir nicht sicher, ob das Ankerelement der obersten Ebene ein anklickbarer Anker sein soll, aber hier ist die einfachste Lösung, um Desktop-Ansichten mit dem Hover-Effekt zu versehen, und mobile Ansichten behalten ihre Klickfähigkeit bei.
// Medium screens and up only @media only screen and (min-width: $screen-md-min) { // Enable menu hover for bootstrap // dropdown menus .dropdown:hover .dropdown-menu { display: block; } }
Auf diese Weise verhält sich das mobile Menü weiterhin so, wie es sollte, während das Desktop-Menü beim Hover anstatt bei einem Klick erweitert wird.
quelle
Eine alternative Lösung besteht darin, die Dropdown-Umschaltklasse aus dem Anker zu entfernen. Nach diesem Klick wird die Datei dropwon.js nicht mehr ausgelöst. Daher möchten Sie möglicherweise, dass das Untermenü beim Hover angezeigt wird.
quelle
Sie könnten ein Javascript-Snippit verwenden
$(function() { // Enable drop menu clicks $(".nav li > a").off(); });
Dadurch wird das Klickereignis aufgehoben und eine Änderung der URL verhindert.
quelle
Hier ist ein kleiner Hack, der je nach Bildschirmbreite von Daten-Hover zu Daten-Toggle gewechselt hat:
/** * Bootstrap nav menu hack */ $(window).on('load', function () { // On page load if ($(window).width() < 768) { $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown'); } // On window resize $(window).resize(function () { if ($(window).width() < 768) { $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown'); } else { $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-toggle').attr('data-hover', 'dropdown'); } }); });
quelle
Dies kann einfacher erfolgen, indem zwei Links hinzugefügt werden, einer mit Text und href und einer mit Dropdown und Caret:
<a href="{{route('posts.index')}}">Posts</a> <a href="{{route('posts.index')}}" class="dropdown-toggle" data-toggle="dropdown" role="link" aria-haspopup="true" aria- expanded="false"></a> <ul class="dropdown-menu navbar-inverse bg-inverse"> <li><a href="{{route('posts.create')}}">Create</a></li> </ul>
Jetzt klicken Sie auf das Caret für Dropdown und den Link als Link. Kein CSS oder JS benötigt. Ich benutze Bootstrap 4 4.0.0-alpha.6 , das Caret zu definieren ist nicht notwendig, es erscheint ohne HTML.
quelle