Skip to main content

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.


Ähnliche Beiträge


Keine Kommentare vorhanden


Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

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

*
*

Choose your currency:

Close
Converted prices are for reference only - all orders are charged in € Euro (€) EUR.
  • USDUS Dollar ($)
  • EUREuro (€)
  • GBPPfund Sterling (£)
  • AUDAustralische Dollar ($)
  • BRLBrasilianischer Real (R$)
  • CADKanadischer Dollar ($)
  • CZKTschechische Krone
  • DKKDänische Krone
  • HKDHongkong Dollar ($)
  • HUFUngarischer Forint
  • ILSIsraelischer Schekel (₪)
  • JPYJapanischer Yen (¥)
  • MYRMalaysischer Ringgits
  • MXNMexikanischer Peso ($)
  • NZDNeuseeland Dollar ($)
  • NOKNorwegische Krone
  • PHPPhilipinischer Pesos
  • PLNPolnischer Zloty
  • SGDSingapur Dollar ($)
  • SEKSchwedische Krone
  • CHFSchweizer Franken
  • TWDTaiwan New Dollar
  • THBThai Baht (฿)
  • INRIndische Rupie (₹)
  • TRYTürkische Lira (₺)
  • RUBRussischer Rubel