Antworten auf deine Fragen:
Neues Thema erstellen

vertikales Menü mit horizontalem Untermenüpunkten

RemoteC

Nicht mehr ganz neu hier

Servus!

Ich hab mal wieder ein Problem und hoffe dass mir jemand weiterhelfen kann :-|

Ich bin dabei eine Website zu erstellen. Hauptmenü ist ein vertikales Menü mit einer <ul> realisiert, soweit nichts neues. Die Untermenüpunkte sollen aber horizontal neben dem Hauptmenüpunkt angezeigt werden sobald darauf geklickt wird.

Ich habe das nach langem probieren geschafft, aber das ganze ist nicht sehr schön und vor allem nicht dynamisch, sprich ich müsste für jeden Menüpunkt eine eigene CSS-Klasse machen. Die Untermenüpunkte sind im DIV #zweite-ebene jeweils in einem <span> Mit einer ul li ul li wie ich es gewohnt bin habe ich es nicht geschafft weil beim float, clear usw. auch immer das Hauptmenü verschoben wird bzw. es plötzlich einen großen Spalt unter dem aktiven Hauptmenüpunkt gibt. Ich habe es nur mit position:absolute; geschafft, dass das Untermenü unabhängig vom Hauptmenü formatiert werden kann. Für einen anderen Menüpunkt stimmt diese Position natürlich nicht mehr.

So sieht es jetzt aus und so soll es auch aussehen:
v2-menulayout.JPG


Das CSS
Code:
#leftmenu a{
display:block;
width:67px;
border:1px solid #4b4b4d;
border-right:none; /* überschneidung mit vertikaler Linie */
padding-right:1px; /* Korrektur weil rechts kein border */
text-transform:uppercase;
font-family:'CabinMedium', HelveticaNeue, Arial, sans-serif;
font-size:8pt;
line-height:10pt;
color:#b1b3b4;
margin-bottom:8px;
text-decoration:none;
}

#leftmenu span.active a{
font-weight:bold;
color:#000000;
border-right:none;
padding-right:1px;
}

#zweite-ebene{
display:block;
position:absolute;
left:70px;
top:82px;
text-transform:none;
width:800px;
}

#zweite-ebene a{
width:auto;
display:inline;
float:left;
margin-right:3px;
padding-left:3px;
border:none;
border-left:1px solid #4b4b4d;
}

#zweite-ebene a:first-child{ /* Sonst grauer Rahmen links, überschneidung mit schwarzer linie */
border:none;
}

#zweite-ebene a.active{
font-weight:bold;
color:#000000;
}

Gibt es hier Lösungen? Bzw. woran liegt es dass ich kein einfaches "display:inline; float:left" machen kann beim Untermenü ohne das Hauptmenü damit zu zerstören?
 

webginga

Nicht mehr ganz neu hier

AW: vertikales Menü mit horizontalem Untermenüpunkten

Hallo RemoteC,

ist es denn überhaupt günstig das so zu lösen?
Geht Dir da nicht das Untermenü über den eigentlichen Content?
Es wirkt auf mich sehr verwirrend.
LG Webginga
 

RemoteC

Nicht mehr ganz neu hier

AW: vertikales Menü mit horizontalem Untermenüpunkten

Leider gibt es (noch) keinen Link da ich die Seite momentan lokal erstelle.

Und nein, das Menü geht dann nicht über den Content, da ist genug Platz bzw. ein whitespace ;-)
 
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

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.461
Mitglieder
67.558
Neuestes Mitglied
StarsMan
Oben