Antworten auf deine Fragen:
Neues Thema erstellen

Ausklappbare Navigation (nur CSS)

Agent7

Noch nicht viel geschrieben

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

Mod | Forum

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

Noch nicht viel geschrieben

AW: Ausklappbare Navigation (nur CSS)

Hallo!

Zunächst danke für die schnelle Antwort! Aber ich bekomme das irgendwie nicht hin.
HTML:
<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:
Code:
#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

Mod | Forum

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:

PHP:
#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

Noch nicht viel geschrieben

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
 
Zuletzt bearbeitet:

piepel

LocalDurst

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

Noch nicht viel geschrieben

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:
Code:
Statt DAS HIER IST EIN TEXT
Code:
DAS HIER
IST
TEXT

Weiß jedman wie man das beheben könnte?

Grüße
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.477
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben