Aufklappbare Navigation vertikal

**mypixel** · 21.03.2013, 17:37

Hallo zusammen

Bin gerade an einer vertikalen Navigation mit Unterseiten!
Die Navigation sieht jetzt so aus:
http://www.vättnerberg.ch/index.php/galerie.html
Die Dynamik fehlt noch!
Mein Ziel das die Navi so aussieht:
http://little-boxes.de/buecher-und-v...tle-boxes.html

Ich wäre Euch Dankbar wen ihr mir helfen könnt, wie ich das bewerkstelligen kann.

Grüsse Euch
mypixel

**Messa** · 21.03.2013, 21:47

Leider geht dein Link nicht.
Wenn es darum geht nur bei klick die nächste Ebene anzuzeigen ist das nicht so schwierig.
Weil eine Dynamic sehe ich nicht

Zuerst die Unterpunkte ausblenden

Code:

.submenu ul {
    display: none;
}

dann sagen wenn der Menüpukt die classe .acitve hat das nächste Level anzeigen.

Code:

.active ul {
    display: block;
}

Denn Rest wie Farbe und Hover-Effekt auch im CSS definieren.

Für Hover:

Code:

.active ul li:hover {
    die Änderungen
}

lg Matthias

**mypixel** · 21.03.2013, 21:55

Hallo Messa
Der link müsste morgen wieder laufen, wir sind diese züglen die Domain auf einen neuen Server! Sorry!

Danke für deinen hinweis.

Grüsse Dich
mypixel

**mypixel** · 22.03.2013, 11:27

Link geht wieder
http://www.vättnerberg.ch/index.php/galerie.html

gruss mypixel

**Messa** · 22.03.2013, 15:34

Ja jetzt machs so wie ich es Oben beschrieben habe

lg

**mypixel** · 23.03.2013, 21:44

Hallo Messa

Irgendwie wil bei mir das CSS nicht richtig anspringen oder ich stehe voll auf dem Schlauch, dafür poste ich hier mein CSS:
Würde mich freuen wen Ihr mir weiterhelfen könnt. Danke

HTML-Code:

#subnav ul .active {
    display: block;
}
#subnav {
    float: left;
    height: auto;
    margin: 0 0 0 20px;
    padding-bottom: 30px;
    position: relative;
    top: 105px;
    width: 200px;
}
#subnav a trail {
    color: #BA0519 !important;
}
#subnav ul {
    display: block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#subnav li {
    border-top: 1px solid #DBDBDB;
    font-size: 12px;
    font-weight: bold;
    line-height: 29px;
    padding-left: 12px;
    text-transform: uppercase;
}
#subnav li.active {
    color: #BA0519;
}
#subnav li a, #subnav li a:visited {
    color: #BA0519;
    font-weight: bold;
    text-decoration: none;
}
#subnav li a:hover {
    text-decoration: underline;
}
#subnav li ul {
    display: none;
    margin-bottom: 7px;
    overflow: hidden;
}
#subnav li ul .active {
    display: block;
    margin-bottom: 7px;
}
#subnav li ul li {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom: medium none;
    border-image: none;
    border-top: medium none;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    padding-left: 10px;
    text-transform: none;
}

lg mypixel

**Messa** · 25.03.2013, 07:56

.active ul {
display: block;
}

.submenu ul {
display: none;
}

**mypixel** · 25.03.2013, 20:25

Danke erstmals...
verstecken funktioniert leider geht das aufklappen nicht, wo könnte jetzt noch das problem sein!

gruss mypixel

**mypixel** · 01.04.2013, 19:35

Hallo zusammen

Das CSS funktioniert soweit! Danke Matthias!
Ausser das die Unternavigation gleich nach jedem klick wieder zugeht!
Und die Navi oberhalb der unternavi im nachhinein leer ist!
siehe http://www.vättnerberg.ch/index.php/bergertag.html

Würde mich nochmals sehr gerne um Eure hilfe zählen

LG mypixel