CSS Vertikale Navigation mit 3 oder mehr Untermenüs

subtractive · 17. März 2014

Hallo liebe CSS.experten!

Wie kann ich mit folgender Beispiel- Htmldatei ein simples, vertikales Navigationsmenü erstellen, bei dem jedes submenü, unter dem jeweiligen Hauptpunkt etwas nach rechts einrückt aber die maximale Breite der gesamten Navigation nicht in die Breite wächst und freisteht sondern sich mit automatischem Zeilenumbruch der Gesamtbreite anpasst. Dabei soll jeder Listenpunkt in einer eigenen "box" dargestellt werden, ,mit etwas Abstand zueinander:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Startseite</title>

<link href="menu-bar.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="nav">
<ul>
<li><a href="thema1.html">Thema 1 </a></li>
<li><a href="thema2.html">Thema 2 </a>
<ul>
<li><a href="thema2-kind.html">Thema 2 Kind </a></li>
<li><a href="thema2-kind_und_freund.html">Thema 2 Kind und Freund </a></li>
<li><a href="thema2-kind_und_freundin.html">Thema 2 Kind und Freundin </a></li>
</ul>
</li>
<li><a href="thema3.html">Thema 3 </a>
<ul>
<li><a href="thema3-kind.html">Thema 3 Kind </a></li>
<li><a href="thema3-kind_und_freund.html">Thema 3 Kind und Freund </a></li>
</ul>
</li>
<li><a href="thema4.html">Thema 4 </a>
<ul>
<li><a href="thema4.-kind.html">Thema 4 Kind</a>
<ul>
<li><a href="thema4-enkel.html">Thema 4 Enkel</a></li>
</ul>
</li>
</ul>
<li><a href="thema5.html">Thema 5 </a></li>
<li><a href="thema6.html">Thema 6 </a></li>
<li><a href="thema7.html">Thema 7 </a></li>
</ul>
</div>
</body>
</html>

Foochan · 18. März 2014

Meinst du so etwa? http://jsfiddle.net/7Uyg5/4/
Hab die Listenbreite Testweise auf 180px beschränkt, um den Zeilenumbruch der einzelnen Listenpunkte zu simulieren.
Die Hintergrundfarben sind einfach mal da, um die Boxen zu simulieren bzw. um deren Grenzen zu erkennen

P.S. ein </li> hat gefehlt; habs nachträglich hinzugefügt

subtractive · 18. März 2014

@gonfle:
Du bist ein Genie!! Genauso hatte ich es mir vorgestellt, vielen vielen Dank

Ist es auch möglich, einen mouse-over effect hinzuzufügen wenn man mit der Maus über die einzelnen Kategorien drüberfährt?
Ich bin leider noch ziemlich am Anfang mit meinen CSS-Kenntnissen, und mit genau solchen Beispielen würde ich viel besser und schneller ins Thema kommen.

Olunixus · 18. März 2014

mit hover kannste in css sowas u.a. realisieren. ansonsten hilft dir der artikel evtl weiter:

http://aktuell.de.selfhtml.org/artikel/css/mouseover/

subtractive · 18. März 2014

@Olunixus:
Vielen Dank für den Link!

@gonfle:
ich habe folgendes Problemchen festgestellt:
wenn ich deine .css auf ein anderes .html Dokument anwende, das ich mir für Übungszwecke erstellt habe, sind sämtliche Listenpunkte präzise untereinander dargestellt. Welche Zeile in deiner .css ist für das Einrücken der Untermenüs zuständig? Ich kriege es leider nicht so hin wie in deinem Beispiel!
Muss ich hier irgendwelche class="id´s" in der .html Datei definieren?

Foochan · 19. März 2014

Folgendes rückt die Listen-punkte um 20 px ein:

Code:

ul
{
    padding-left: 20px;
}

Voraussetzung, damit das CSS funktioniert, ist, dass du die Liste in ein Element mit der ID "nav" reinmachst. (im Beispiel ist es ein div)

Hast du dich mal mit dem CSS-Box Modell beschäftigt? http://de.selfhtml.org/css/formate/box_modell.htm
Daran sollte man erkennen, dass ich mit dem padding die Listenpunkte in der Liste um 20px einrücke.

Nebenbei: Was kennst du bereits über CSS? Ich bin davon ausgegangen, dass du weist, wie man mit CSS Tags, IDs und Klassen selektiert, was der Unterschied zwischen ID und Klasse ist usw. Für einen Schnelleinstieg empfehl ich dir folgendes Tutorial mal durchzugehen: http://www.codecademy.com/de/courses/css-coding-with-style

Ich hab das CSS mal um ein "hover"-Beispiel erweitert, damit du siehst wie das funktioniert. Hier ist das ganze relativ gut erklärt. Ist zwar nicht ganz up-to-date, sollte für den Anfang aber reichen.
Die Unterpunkte bei "Thema 2" sind zunächst unsichtbar und werden erst sichtbar, wenn man mit der Maus über "Thema 2" fährt.

Aktualisiertes CSS: http://jsfiddle.net/7Uyg5/10/

Code:

/* Das Untermenü ausblenden */
.menu-hover > ul
{
    display:none;
}
/* Falls man über das Menü rüberfährt, soll es angezeigt werden. Erkennbar an der Pseudo-klasse ":hover" */
.menu-hover:hover > ul
{
    display: block;
}

Falls du noch fragen hast, einfach her damit

Dann kann ich üben anderen CSS näher zu bringen

subtractive · 20. März 2014

Ich habs nochmal probiert, mit einer neuen .html Datei und jetzt wird alles richtig angezeigt! Ich weiß nicht warum das Einrücken vorher nicht gepasst hat. Div-Tag war jedenfalls definiert.
Also vielen lieben Dank für deine Mühe und die ganzen tollen Links!! Anhand deines Beispiels und mit rumprobieren habe ich mit Sicherheit mehr gelernt als mit Tutorials in einer Woche.. Du bist ein guter Lehrer :-)

Ich habe noch eine Frage: ich habe "text-decoration: none" hinzugefügt um die Unterstreichung der Links zu entfernen, aber das hat keine Auswirkung. Ich habe es direkt unter "list-style-type:none gesetzt

Foochan · 20. März 2014

Das liegt daran, dass text-decoration nicht veerbt wird, d.h. es hat keine Auswirkungen auf die Unterelemente von "ul" wenn du das bei "ul" setzt. Siehe: http://www.css4you.de/Texteigenschaften/text-decoration.html

Du hast zwei Möglichkeiten. Entweder du setzt das explizit für den a-Tag:

Code:

a
{
    text-decoration: none;
}

Oder du sagst im CSS, dass das a-Tag die text-decoration erben soll:

Code:

/* Die Eigenschaft text-decoration erben */
a
{
    text-decoration: inherit
}
/* text-decoration für das Vorfahrenelement setzen */
#nav ul
{
    list-style-type: none;
    padding-left: 20px;
    text-decoration: none
}

Ein weiterer Link zum Thema Vererbung: http://www.css4you.de/wscss/css08.html

subtractive · 20. März 2014

Genial! Ich übe gerade mit einer horizontalen Variante und es funktioniert alles einwandfrei.
Nochmal vielen herzlichen Dank für deine Hilfe!!!

Darf ich Dich fragen wie Du CSS gelernt hast? Ausbildung oder Autodidakt? Ich merke gerade, der beste Weg ist wie so oft üben üben üben.. Fehler machen, Experten fragen und erneut probieren, aus Fehlern lernen!

Foochan · 20. März 2014

Da hast du recht. Programmieren lernt man nur durch Programmieren. (Das selbe gilt für Fahrrad fahren, Klavier spielen, usw.) Ich hab selber vieles dadurch gelernt, dass ich (unabsichtlich) viele Fehler gemacht hab.

Ich hatte zwar sowohl in der Schule als auch jetz im Studium mit Webdesign zu tun gehabt, jedoch hab ich das meiste mir selber beigebracht. Mich einfach mal hingehockt und selber versucht mir meine eigene Webseite von Grund auf zu basteln.

Zunächst wars so: Wenn ich ne horizontale Liste gebraucht hab, dann hab ich nach ner Lösung gegoogelt, den Code eingefügt; hab jedoch nicht wirklich verstanden, warum das ganze so funktioniert wie es funktioniert. Nach und nach hab ich dann die verschiedenen Zusammenhänge erkannt. (D.h. Wie funktionieren die vielen Arten von Selektoren?, Wie funktioniert das mit der Vererbung?, Was ist das CSS Box Modell?, Welche Attribute gibt es bzw. wie kann ich das und jenes mit CSS optisch verändern?, usw.)

Und mittlerweile hab ich viel von der CSS-Thematik durch Erfahrung im Kopf und schau nur noch in Dokus nach, welche Attribute welche Werte annehmene können, wann man was anwenden kann/darf/soll und vor allem bei CSS 3 interessant: Welche Browser unterstützen die neuen CSS Elemente?

Deshalb mein Tipp an dich: Bastel fleißig an der Website weiter, denn nur dann lernt man auch was. Versuch möglichst viel alleine umzusetzen und falls du auch nach langer (Internet-)Recherche nich weiterweist, kannst du dich ja wieder im Forum melden.

Zum Thema Recherche: Ich weiß zwar nicht wie gut dein Englisch ist, aber wenn ich was spezielles Suche, such ich meist auf englisch und lande zu >90% auf Stackoverflow.com, denn dort wurden viele Fragen zu allen möglichen Themen bereits geklärt.

Ich hoff ich konnt dir weiterhelfen

Suche

CSS Vertikale Navigation mit 3 oder mehr Untermenüs

subtractive

Cadet 4th Year

Foochan

Ensign

subtractive

Cadet 4th Year

Olunixus

Commodore

subtractive

Cadet 4th Year

Foochan

Ensign

subtractive

Cadet 4th Year

Foochan

Ensign

subtractive

Cadet 4th Year

Foochan

Ensign

Ähnliche Themen