Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!
Achtung! Dieser Artikel wurde nach dem Relaunch von wpsnippets.de noch nicht überarbeitet und kann fehlerhaft in der Formatierungen sein.

Bootstrap Dropdown bei Hover aktivieren

Bootstrap ist ein mittlerweile sehr beliebtest Framework. Auch Christian und ich setzen immer vermehrt auf Bootstrap, da es von Haus aus mit viele hilfreichen Grundsettings kommt und es einem somit doch einiges an Zeit und dem Kunden letztendlich auch Geld erspart. Ich werde versuchen in der kommenden Zeit immer mal wieder auf kleine Tipps und Tricks für den Umgang mit Bootstrap eingehen und oft gesehene Fragen möglichst einfach zu erläutern.

So auch heute, denn was mir bei Bootstrap nicht so ganze gefällt ist, dass man bei einem Dropdown Menü innerhalb der Navbar zunächst einmal auf das Elternelment klicken muss, damit sich das Dropdown-Menü öffnet. Ganz klar, für mobile Endgeräte (Smartphones und Tablets), bei denen es den typischen Hover-Effekt nicht gibt, ist das durchaus eine sehr hilfreiche Sache. Allerdings sollten die Entwickler bedenken, dass es bei Desktopgeräten, sprich ab dem Media Query @media (max-width: 979px) {... } hierbei keinen Ersatz, aber eine alternative einbauen sollten. Denn jeder Klick den ein Besucher auf einer Webseite mehr machen muss ist verschwendete Zeit.

Nehmen wir zunächst einmal eine minimalistische Version der vorgegebenen Navbar:

<div class="navbar">
	<div class="navbar-inner">
		<div class="container">
			<ul class="nav">
				<li class="dropdown">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

Fügen wir diese nun 1:1 in unser Template oder unsere statische Seite ein, so muss zunächst ein Klick auf den Punkt „Dropdown“ gemacht werden, sodass dieser sich ausfährt.

Wenn wir nun jedoch folgenden CSS-Code hinzufügen…

ul.nav li.dropdown:hover ul.dropdown-menu{
	display: block;
	margin-top:0px
}

…lässt sich das Dropdown-Menü ganz einfach, wie bei den meisten Seiten, mit einem einfach Hovern aktivieren und ausfahren.

Das Ganze gibt es auch nochmal als Live-Demo auf jsFiddle.net

Je nach Bedarf lässt sich das Snippet nun noch durch das oben genannte Media-Query modifizieren, sodass es beispielsweise nur für wirkliche Desktop-Geräte angezeigt wird.

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

15 Kommentare

Avatar von Victoria

Victoria 26. März 2013 um 15:58

Vielen Dank, funktioniert gut, nur leider bleibt der Dropdown-Menü stehen beim Klick auf das Elternelement. Und ich verstehe nicht was hier mit „a.menu:after“ gemeint ist. Wo wird die Klasse .menu verwendet?

Antworten
Avatar von André Köbel

André Köbel 28. März 2013 um 9:53

Hey Victoria,

das mit dem a.menu kannst du ignorieren. War testweise noch drin und ich hab’s nun rausgenommen. Damit lässt sich u.A. oben das Dreieck entfernen. :)

Beim Klicken auf “Dropdown” bleibt bei mir nichts stehen, welchen Browser verwendest du und hast du vllt. noch weitere Klasse innerhalb der Navigation, sodass es neben dem Dropdown wie bei der Normalen BT Funktion funktioniert?

Gruß
André

Antworten
Avatar von Dirk Hermanns

Dirk Hermanns 4. April 2013 um 21:03

Super, vielen Dank für deinen Beitrag.
Eine Frage hab ich allerdings noch, gibt es eine gute Lösung den dropdown-toggle link selbst wieder zu verlinken? Die meisten Beispiele die ich bisher gesehen habe, hatten einen #-Link. Bräuchte aber eine Lösung für einen Klickbaren Link.

Die Lösung, die ich bisher nutze ist, den dropdown-toggle um die Klasse ‚disabled‘ zu ergänzen, damit gehen aber sämtliche Unter-Menü-Positionierungen verloren.

Jemand eine Idee?

Viele Grüße
Dirk

Antworten
Avatar von André Köbel

André Köbel 30. April 2013 um 8:07

Hallo Dirk,

verzeih die späte Antwort. Hoffentlich liest du das noch. ;)

Die # in den <a>-Tags dient natürlich nur zu Demozwecken. Du kannst diese durch eine URL ersetzen, welche letztendlich auch aufgeht, sobald man klickt. Lediglich der Cursor wird als normaler Zeiger angezeigt, was den Besucher verwirren könnte. Hierzu einfach folgendes CSS Snippet einfügen:

.dropdown-toggle {cursor:pointer !important;}

Gruß
André

Antworten
Avatar von maddin

maddin 11. September 2013 um 8:12

Hallo,

ich suche die Möglichkeit, die erste Ebene, die Unterseiten hat, zu verlinken.

Folgendes habe ich. Ich habe die Seite Home (ohne Unterseiten) und die Seite Verein mit Unterseiten. Die Seite Home ist anklickbar.

Die Seite Verein ist nicht anklickbar, nur per MouseOver kommt das DropDown Menü der Unterseiten.

Wie kann ich die Seite Verein auch verlinken?

Antworten
Avatar von André Köbel

André Köbel 11. September 2013 um 20:27

Hey maddin,

wir haben das hier im Beispiel ja auch so. Die Navigation beinhaltet das Dropdown was hier auf # verlinkt ist. Ich hab dir das ganze mal vorbereitet: http://jsfiddle.net/jbxKX/

Anstelle javascript:alert('Test'); dann einfach die entsprechende URL einfügen.

Antworten
Avatar von Stan

Stan 17. Mai 2016 um 20:52

Ja aber es wird dort die bootstrap.js auch nicht geladen in dem Beispiel. Mit der bootstrap.js geht dies dann auch nicht – da dann auch aria-expanded usw. geladen wird. wie kann man genau dieses Problem auch mit der bootstrap.js lösen?

Avatar von Karsten

Karsten 23. November 2013 um 23:45

Hallo Andre,
vielen Dank für den guten Tip.
Das automatische Ausfahren funktioniert!

Liebe Grüße
Karsten

Antworten
Avatar von Mike

Mike 21. Januar 2014 um 20:12

Toller Tip. Danke.
Bei mir funktionierte es mit Bootstrap 3 nur mit der Ergänzung „>“

ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;
margin-top:0px
}

Antworten
Avatar von André Köbel

André Köbel 22. Januar 2014 um 11:40

Bei mir funktioniert es mit Bootstrap 3 wunderbar, aber vielen Dank für den Hinweis. Vielleicht hat jemand ein ähnliches Problem. :)

Antworten
Avatar von Romano

Romano 2. April 2014 um 4:54

Hallo,
es funktioniert auch bei mir, jedoch verstehe ich dies mit dem @media nicht. Denn dies würde ich gerne umsetzen, doch finde ich nicht den Eintrag in bootstrap.css (3,1,1) wo das oben Beschriebene eingefügt werden soll.
Herzlichen Dank für die Hilfe

Gruss Romano

Antworten
Avatar von André Köbel

André Köbel 2. April 2014 um 11:28

Hallo Romano,

du musst das in deine style.css eintragen. Die bootstrap.css solltest du immer im Original lassen. Dadurch, dass die style.css nach der bootstrap.css geladen wird (musst du so in der header.php definieren) überschreibt die style.css bzw. die Eigenschaften darin, die der bootstrap.css.

Die Stellen mit dem @media sind für das responsive Design, hiermit kannst du gewisse CSS Eigenschaften erst ab einer bestimmten Browsergröße aktivieren quasi. Ist ein relativ komplexes Thema, zu dem ich auch schon längst einen Beitrag schreiben wollte, aber bisher kam ich noch nicht dazu. Daher muss ich dich an der Stelle mal auf Google verweisen. :)

Gruß
André

Antworten
Avatar von Peter

Peter 29. Juli 2014 um 9:05

Danke für den CSS-Code! Hat mir mal wieder viel Zeit gespart!

Antworten
Avatar von André

André 29. Juli 2014 um 10:56

Aber gerne doch. :)

Antworten
Avatar von Peter2

Peter2 24. Oktober 2014 um 17:43

Hallo,
bin hier auf den Eintrag gestoßen und habe den Code in die style.css eingesetzt.
Es funktioniert, jedoch mit dem Problem welches Victoria weiter oben beschrieben hat. Nutze Chrome und Firefox. Beim Klick bleibt das Menü weiterhin offen, auch wenn man die Maus wieder woanders hin bewegt.
Gleichzeitig ist das Menü im Responsive-Verhalten nicht mehr optimal. Das Dropdown-Menü wird quasi doppelt geöffnet und ist auf dem Smartphone eher schlechter als besser.
Gibt es einen Lösungsansatz?
Danke!

Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*