Tutorial Drop-Down-Navigation mit CSS gestalten

Drop-Down-Navigation mit CSS gestalten

26.05.2010 in HTML/CSS von buhu
- Kategorie: HTML/CSS
- Erstellt mit Programmversion: -
- Dateigröße (PDF): 1.3 MB
- Dateigröße (Arbeitsmaterial): 2 KB
- Bisherige Zugriffe: 3578
In diesem Tutorial zeige ich euch, wie man mithilfe von CSS ein interaktives Dropdown-Menü erstellen und dieses formatieren kann.
Zum Downloadmanager hinzufügen PDF-Datei herunterladen (1.3 MB) Arbeitsmaterialien herunterladen (2 KB)
buhu
- Registriert seit: 13.03.2010
- User-Profil ansehen
- Persönliche Website ansehen
- Weitere Tutorials, Video-Trainings & Downloads von buhu

Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert).

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Webdesign

Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
Umsetzung erstellter Weblayouts in HTML/CSS
Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung

Jetzt informieren Trailer ansehen

Kommentare

Sine_7
19.02.2013 - 15:03
Richtig gut erklärt.. Man versteht es gut.. Danke...
witchi
09.02.2013 - 13:07
Danke für das Tutorial, so einfach kann so etwas sein, mit der richtigen Anleitung :)
bastchen
25.12.2012 - 23:23
Verständlich und nachvollziehbar erklärt. Vielen dank!
Profil20
29.05.2012 - 21:27
einfach gehaltenes Tutorial
spicher
23.05.2012 - 08:31
sehr simpel und klar gehalten. Tolles Tutorial.
Technology
09.05.2012 - 20:57
alles super hat mir gut gefallen weiter so
shader09
08.05.2012 - 14:00
Danke, einfach erklärt und super Ergebnis.
fiesus
13.02.2012 - 11:16
Perfekt, vielen dank!
svenk99
24.09.2011 - 16:15
tolle sache.... ich habs grad runtergeladen und bin sehr dankbar dafür....
Susan99
21.09.2011 - 11:46
Super erklärt! Danke vielmals!
LG Susan
Naye
01.08.2011 - 07:15
super! genau das hab ich gesucht. danke
SunnyLady
30.06.2011 - 15:38
gut verständlich - super erklärt! Danke! =)
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!
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
Sasha
14.05.2011 - 09:08
Gut erklärt, vielen Dank für das Tutorial. LG Sasha
sunchild
05.04.2011 - 19:53
Genau das, was ich gesucht habe und verständlich erklärt. :-)
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
- iuvavum
  06.07.2011 - 10:13
  @ RolfiD
  
  Meines Wissens nach, würden die Subnavigationspunkte hinter dem Content verschwinden, wenn man sie nicht auf relative setzen würde.
  
  z.B. wenn unter der Navigation gleich der Contentbereich anfangen würde, jedoch mehrere Unterpunkte im Menü vorhanden sind, würden diese ohne position: relative hinter dem Content verschwinden und wären nicht mehr sichtbar bzw. anklickbar. Mit realtive wird garantiert, dass die Navigationspunkte über dem Content liegen.
  
  Hoffe, dass die Erklärung verständlich war ;-)
_edewin
10.02.2011 - 00:09
genial,...... einfach genial,,......
Muenchna
05.02.2011 - 19:01
So einfach kanns sein ;-) 1a Tutorial

1
2
3
4
5
... Letzte

Weitere Kommentare

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)

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:

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:
Bilder

Tipp:

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

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:

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:

Bilder

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:
Bilder

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

Drop-Down-Navigation mit CSS gestalten

26.05.2010 in HTML/CSS von buhu

buhu

Lieber Gast …

Vorteile der kostenlosen Mitgliedschaft

Reinschnuppern als Gast

Kommentare

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)

1. HTML-Dokument

2. Formatieren der Navigation mit CSS

Tipp:

3. Untergeordnete Menüpunkte ausblenden

4. Untergeordnete Menüpunkte aufklappen lassen

5. IE7 und IE6 Workarounds

6. Optionale Formatierung

Reklame

Anzeige

Aktuelles Commag

Anzeige

Social Media

Anzeige