Anzeige
Tutorialbeschreibung

Drop-Down-Navigation mit CSS gestalten

Drop-Down-Navigation mit CSS gestalten

In diesem Tutorial zeige ich euch, wie man mithilfe von CSS ein interaktives Dropdown-Menü erstellen und dieses formatieren kann.


1. HTML-Dokument

Zuerst erstellen wir eine Datei "dropdown.htm". Unser Menü soll folgende Navigationsstruktur bekommen:

Page 1
    Page 1.1
    Page 1.2
    Page 1.3
Page 2
    Page 2.1
    Page 2.2
    Page 2.3

Hierzu verwenden wir eine ungeordnete Liste und vergeben die id "navi":
<ul id="navi">

<li><a href="#">Page 1</a>
	<ul>
		<li><a href="#">Page 1.1</a></li>
		<li><a href="#">Page 1.2</a></li>
		<li><a href="#">Page 1.3</a></li>
	</ul>
</li>

<li><a href="#">Page 2</a>
	<ul>
		<li><a href="#">Page 2.1</a></li>
		<li><a href="#">Page 2.2</a></li>
		<li><a href="#">Page 2.3</a></li>
	</ul>
</li>

</ul>

 
Ergebnis:
Schritt 1Bilder

2. Formatieren der Navigation mit CSS

Als Nächstes wollen wir, dass die beiden Hauptmenüpunkte ("Page 1" und "Page 2") nebeneinander dargestellt werden:
#navi, #navi ul {
	padding: 0;
	margin: 0;
}

#navi li {
	float: left;
	width: 9em;
	position: relative;
	list-style-type: none;
}

#navi li ul a {
	margin-left: 1em;
}

 
Erklärung CSS:
- margin und padding wird von der ungeordneten Liste entfernt.
- margin wird der verschachtelten ungeordneten Liste (Kind-Elemente) hinzugefügt, um diese einzurücken.
- die Hauptmenüpunkte bekommen eine Breite von 9em und werden links ausgerichtet (float), um diese nebeneinander darzustellen.
- Die "position" der Hauptmenüpunkte wird auf "relative" gesetzt.
- Aufzählungspunkte werden deaktiviert.


Ergebnis:
Schritt 2Bilder

 

Tipp:

Mithilfe der "Web-Developer"-Toolbar (Addon für Firefox --> Link zum Addon) sieht man, wie die Listen verschachtelt und ausgerichtet sind.
Ansicht mit der Webdeveloper ToolbarBilder
 

3. Untergeordnete Menüpunkte ausblenden

Mithilfe von left: -9999px wird das Submenü weit nach links verschoeben. Dies hat im Gegensatz zu anderen Methoden (z.B.: visibility: hidden) den Vorteil dass die Menüpunkte auch von Screenreadern wahrgenommen werden.
Damit das Menü wirklich nur aufklappt, wenn der Mauszeiger über einen Hauptmenüpunkt bewegt wird (und nicht etwa unterhalb davon), muss die untergeordnete Liste absolute positioniert werden (position: absolute;)
#navi li ul {
	left: -9999px;
	position: absolute;
}

Ergebnis:
Schritt 3Bilder
 

4. Untergeordnete Menüpunkte aufklappen lassen

Jetzt kommt Action in unseren Code! =D
#navi li:hover ul {
	left: auto;
}
Das war auch schon der letzte CSS-Parameter. Wenn der Mauszeiger jetzt über einen Hauptmenüpunkt bewegt wird, wird der Parameter "visibility" für die untergeordneten Menüpunkte wieder auf "visible" gesetzt und der Menüpunkt wird somit sichtbar.


Ergebnis:

Schritt 4Bilder

 

5. IE7 und IE6 Workarounds

Damit wir den Whitespace-Bug sowie den Popup-Bug für den Internet Explorer 7 entschärfen,
fügen wir in den Head-bereich folgendes Workaround ein:
 

<!-- Popup & Whitespace Bugfix für IE7 -->
<!--[if lte IE 7]><style type="text/css">
		
#navi a {
	min-height: 0;
}

* html #navi a {
	height: 1px;
}

#navi li:hover {
	text-indent: 0;
}

</style><![endif]-->

Und falls es tatsächlich noch Menschen gibt welche einen Internetexplorer <= 6.0 nutzen,
gibt es auch hierzu ein Workaround. Da die Pseudoklasse :hover für den IE6 nur für Links
zulässig ist müssen wir auf ein Javascript zurückgreifen welche den Browser um diese
Funktion erweitert. Dieser Part kommt ebenfalls in den Head-Bereich der Seite.
Ich nutze hierzu das Suckerfish Script von Patrick Griffiths (www.htmldog.com).
 

<script type="text/javascript">
	
sfHover = function() {
var sfEls = document.getElementById("navi").
getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new
RegExp(" sfhover\b"), "");
}
}
}

if (window.attachEvent) window.attachEvent("onload",
sfHover);

</script>
 

6. Optionale Formatierung

Hier noch ein Vorschlag, wie das CSS-Dropdown-Menü formatiert werden könnte:
/* Optionale Formatierung */

#navi {
	font-family: Verdana;
}

/* Hauptmenüpunkte formatieren */
#navi li a,
#navi li a:link,
#navi li a:active,
#navi li a:visited {
	display: block;
	padding: 5px 10px;
	color: #000;
	background-color: #ccc;
	text-decoration: none;
}

#navi li a:hover {
	color: #fff;
	background-color: #000;			
}

/* untergeordnete Menüpunkte formatieren */
#navi li ul a,
#navi li ul a:link,
#navi li ul a:active,
#navi li ul a:visited {
	display: block;
	margin-left: 1em;
	padding: 5px 10px;
	color: #000;
	background-color: #ddd;
	text-decoration: none;
}

#navi li ul a:hover {
	color: #fff;
	background-color: #000;				
}

 
Ergebnis nach optionaler Formatierung:
Formatiertes menüBilder


Dann wünsch' ich allen viel Spaß beim Nachbauen =)

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von misssaxonia
  • 18.01.2014 - 22:14

genau das hab ich gesucht. danke für die anleitung

Portrait von skulli66
  • 01.09.2013 - 14:34

Danke für dieses Tutorial. Alles ist so einfach und gut erklärt, daß mein kein Profi sein miuß um alles zu verstehen und "nachzubauen".

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 24.07.2013 - 15:24

PERFEKT! DANACH HAB ICH GESUCHT :-) VIELEN DANK!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 19.02.2013 - 15:03

Richtig gut erklärt.. Man versteht es gut.. Danke...

Portrait von witchi
  • 09.02.2013 - 13:07

Danke für das Tutorial, so einfach kann so etwas sein, mit der richtigen Anleitung :)

Portrait von bastchen
  • 25.12.2012 - 23:23

Verständlich und nachvollziehbar erklärt. Vielen dank!

Portrait von Profil20
  • 29.05.2012 - 21:27

einfach gehaltenes Tutorial

Portrait von spicher
  • 23.05.2012 - 08:31

sehr simpel und klar gehalten. Tolles Tutorial.

Portrait von Technology
  • 09.05.2012 - 20:57

alles super hat mir gut gefallen weiter so

Portrait von shader09
  • 08.05.2012 - 14:00

Danke, einfach erklärt und super Ergebnis.

Portrait von fiesus
  • 13.02.2012 - 11:16

Perfekt, vielen dank!

Portrait von svenk99
  • 24.09.2011 - 16:15

tolle sache.... ich habs grad runtergeladen und bin sehr dankbar dafür....

Portrait von Susan99
  • 21.09.2011 - 11:46

Super erklärt! Danke vielmals!
LG Susan

Portrait von Naye
  • 01.08.2011 - 07:15

super! genau das hab ich gesucht. danke

Portrait von SunnyLady
  • 30.06.2011 - 15:38

gut verständlich - super erklärt! Danke! =)

Portrait von Essendra
  • 08.06.2011 - 08:41

Vielen Dank für das Tutorial. Es ist sehr verständlich erklärt und uneingeschränkt nachvollziehbar. Hat mir sehr geholfen. Danke nochmal dafür!

Portrait von penguinpower
  • 21.05.2011 - 11:51

Schön geschrieben, leicht nachvollziehbar. Meine Frage wäre, ob man das mit dem Tutorial "Navigation mit Grafiken" (http://www.psd-tutorials.de/tutorials/web/html-css/-/view/1805--navigation-mit-grafiken) kombinieren könnte. Wäre nämlich super, eine Navi mit Hover- und Dropdowneffekt zu haben :)

LG
~ pengu

Portrait von Sasha
  • 14.05.2011 - 09:08

Gut erklärt, vielen Dank für das Tutorial. LG Sasha

Portrait von sunchild
  • 05.04.2011 - 19:53

Genau das, was ich gesucht habe und verständlich erklärt. :-)

Portrait von RolfiD
  • 31.03.2011 - 12:18

Ist sehr ansprechend übersichtlich gestaltet und insgesamt gut erklärt.

Eines ist mir nicht klar: Da heisst es unter "3. Menüpunkte ausblenden", dass das Verschieben aus dem Bild besser sei als sowas wie Visibility:hidden. Das habe ich auch in anderen Arbeiten schon gelesen und gesehen und es leuchtet ein.

Aber schon in Punkt 4 wird festgestellt:

"...der Parameter visibility wiederhergestellt..."
Ich denke, wir wollten diesen Weg gar nicht beschreiten?

Das ist eine Stelle, die Leser mit wenig Übung verwirren, mich auch.

Ein weiterer Verwirrungspunkt: warum wird die Position der Unterpunkte in "2." auf "relative" gesetzt? Ich vermute, wegen der Hirarchie oder Vererbung von den Hauptpunkten - das wird aber leider nicht erklärt.

Ich habe es noch nicht nachgebaut und ausprobiert, werde das aber noch tun. Es sieht ja schon optisch sehr schön aus, Farben etc. kann man ja angemessen verändern.

Vielen Dank für die Anleitung

Rolf

x
×
×