Ausklappbare Navigation (nur CSS)

[Agent7]

Hallo!

Ich habe eine kleine Frage.
Weißt jemand von euch wie man ein ausklappbares Menü erstellt?

Ich habe schon eine horizontale Navigation mit Punkten (Erstellt mit

<ul> und dann <li>

) Aber weiter weiß ich nicht. Ich habe schon Google befragt, und einige Seiten gefunden, in denen steht, das in der Liste nocheine Liste sein soll.

Das habe ich dann gemacht, aber wie geht's weiter? Wie ist es möglich, nur durch CSS das ausklappen zu erreichen?

Vielleicht zum besseren Verständnis was ich meine:
http://www.adobe.com/de/
Bei Produkte & Lösungen.

Vielen Dank für eure Hilfe im Voraus!

Grüße,
Agent7

 

[simonpicos]

AW: Ausklappbare Navigation (nur CSS)

Das ist eigentlich relativ einfach. Du erstellst eine Liste mit Listenpunkten. In einen (oder auch mehrere <li>s setzt du noch eine weitere Liste (mit display:none; ), die du per hover aktivierst (display: block

Ich hab dir mal ein kleines Beispiel gemacht: http://dabblet.com/gist/1578515

Oben im Reiter kannst du zwischen HTML&CSS wechseln

 

[Agent7]

AW: Ausklappbare Navigation (nur CSS)

Hallo!

Zunächst danke für die schnelle Antwort! Aber ich bekomme das irgendwie nicht hin.

<div id="navbar">
<ul id="hauptmenue">    
 <li>Punkt 1</li>     
<li>Punkt 2         
<ul id="untermenue">            
 <li>Punkt 2.1</li>             
<li>Punkt 2.2</li>             
<li>Punkt 2.3</li>         
</ul>     
</li>     
<li>Punkt 3</li> </ul>
</div>

und als CSS:

#navbar #hauptmenue {
    background-color: ;
    margin: 0;
    padding: 10px;
    text-align: center;
}
#navbar #hauptmenue li {
    display: inline;
}
#navbar #hauptmenue li a {
    background-color:;
    padding: 10px 14px;
    text-decoration: none;
    color: ;
}
#navbar #hauptmenue li a:hover {
    color: ;
    background-color: ;
}
#navbar ul#untermenue {
    display: none;
}
#navbar ul#hauptmenue li:hover ul#untermenue {
    display: block;
}

Danke für deine Hilfe.

Grüße

 

[simonpicos]

AW: Ausklappbare Navigation (nur CSS)

Wenn du es so machst we bei mir im Beispiel funktioniert es eigentlich. Deine Styles kannst du ja einfach ergänzen.

Ich denke mal dich irritiert, dass die Punkte im Untermenü auch nebeneinander angeordnet sind. Der Fehler liegt an dieser Stelle:

#navbar #hauptmenue[COLOR="Red"]>[/COLOR]li {
    display: inline;}

Das > Zeichen wählt nur die li aus, die ein direktes "Kind" von der ul#hauptmenue ist.

Bei deiner Version wurden alle li's ausgewählt, die der ul#hauptmenue irgendwie untergeordnet sind.

Sorry, wenn ich falsch liege. Dann beschreibe dein Problem am besten ein bisschen besser

 

[Agent7]

AW: Ausklappbare Navigation (nur CSS)

Hallo

Ok, deinen Code kopiert. Das Ausklappen funktioniert, verschiebt mir aber den Content nach rechts.

Mal sehen was ich da tun kann...


Grüße

 

[Lona]

AW: Ausklappbare Navigation (nur CSS)

Guck mal hier da habe ich meines her ist ne Schritt für Schritt anleitung

 

[piepel]

AW: Ausklappbare Navigation (nur CSS)

Bei dem Typ gibt es ein Haufen CSS-Menüs (nicht alle kostenlos!) und viel mehr interessantes über CSS.

 

[Agent7]

AW: Ausklappbare Navigation (nur CSS)

Guck mal hier da habe ich meines her ist ne Schritt für Schritt anleitung

Hallo, ich habe das nun versucht nach dieser Anleitung, funktioniert aber nochnicht ganz...
Das Problem ist, dass ich rechts etwa 200px Platz habe, den aber nicht füllen kann. Der Text davor wird einfach nur zusammengedrückt, zb. so:

Statt DAS HIER IST EIN TEXT

DAS HIER
IST
TEXT

Weiß jedman wie man das beheben könnte?

Grüße