Verschiedene CSS für erste Naviebene und zweite Ebene

[sepp_a_u]

Hallo zusammen,

habe jetzt mal die Grundlagen für meine Navi geschaffen:

www.drinkinggames.de/test/

jetzt will ich folgendes realisieren:

• wenn man mit der maus auf einen Hauptmenüpunkt fährt, dann will ich, dass die Liste darunter aufklappt, der Hintergrund weiß wird wie oben,die Schrift rot und wenn man dann mit der Maus nach unten fährt, dann soll der Menüpunkt mit nem grau hinterlegt werden

soll dann so gehen wie bei den menüpunkten von www.bpong.com

wie mache ich das? wie muss ich meinen code ändern bzw. welche klassen/id's muss ich ansprechen?

bin über jede hilfe dankbar!

[Juke]

Die Menüpunkte der ausklappbaren Liste stecken in ul.level_2.
Du musst den Listenpunkten die Hintergrundfarbe #fff geben. Bisher steht da noch rot (#ED1B24) drin.

#header li:hover .level_2 {
background-color: #fff;
border: none;
display: block;
height: auto;
left: auto;
overflow: auto;
top: auto;
width: auto;
}


Dann musst du den Links in den li die Schriftfarbe rot geben:
#header ul.level_2 li a {
color: #ED1B24;
}

und dem hover bzw. focus Zustand die Hintergrundfarbe grau (z.B. #f4f4f4)
#header ul.level_2 a:hover, #header ul.level_2 a:focus {
background-color: #f4f4f4;
}

Dann musst du noch definieren wie es aussehen soll, wenn ein Link angeklickt ist. Dann ist zwischen <li> und </li> nämlich kein a drin, nur ein span.active .

#header ul.level_2 span.active {
background-color: #ddd;
}

[sepp_a_u]

danke hier für klappt bisher gut.
doch dazu noch eine frage: wie schaffe ich es, dass auch der hauptmenüpunkt weiß bleibt?

also so z.B.

ich bin auf Home, will aber auf beer pong und dort dann auf einen untermenüpunkt. dann soll der hauptmenüpunkt weiß bleiben, auch wenn man noch nicht geklickt hat. wisst ihr, wie ich meine?

wie schaffe ich es dann noch, dass die schwarze linie bei den untermenüpunkten rechts weggeht?
dazu noch, dass die rote linie von level_2 schön unter der schwarzen linie zw. den hauptmenüpunkten anfängt? es ist immer irgendwie ein wenig versetzt.

außerdem sind auch die untermenüpunkte ein wenig nach oben versetzt oder meine ich das nur?

[sepp_a_u]

kann mir hier keiner helfen? bekomme einfach die schwarze linie rechts bei level_2 nicht weg. was muss ich denn ändern?

und wie kann ich den ersten menüpunkt weiß hinterlegt lassen, wenn ich mit der maus auf einem untermenüpunkt bin?

[wotank]

kann mir hier keiner helfen? bekomme einfach die schwarze linie rechts bei level_2 nicht weg. was muss ich denn ändern?

du gibst per css allen li's die sich im div.mod_navigation befinden einen rechten border.
Den mußt du halt für die li's des submenüs explizit wieder ausschalten.

Du solltest dir vielleicht mal ein paar CSS-Grundlagenkenntnisse aneignen.

[sepp_a_u]

die little boxes serie hab ich zuhause und arbeite auch damit

nur wie schalte ich das wieder aus? hab schon alles gesucht und versucht. über nen css-tip/klasse/id wäre ich dankbar

[bizon]

Musst doch nur im navigation.css nach border-Anweisungen suchen und ausprobieren.

Such auch mal im Forum nach Firebug (Entwicklertool für Firefox). Der Firebug wird im Forum eigentlich täglich zum Untersuchen der Webseite empfohlen.

[sepp_a_u]

habe ich alles schon gemacht. doch hat nicht geklappt. ich muss wohl ne extra klasse ansprechen, aber komme nicht drauf, welche!

[sepp_a_u]

habe es jetzt mit folgendem css-code geschafft:

#header .submenu li {
	border: none; /*Entfernt die schwarzen Rahmenlinien in den Untermenüs*/
}

hatte immer noch das .mod_navigation davor. ohne das gings

jetzt eben nur noch das "problem", dass der hauptmenüpunkt weiß bleibt, wenn man mit der Maus auf einem Untermenüpunkt fährt. Kann mir da auch jemand weiterhelfen bzw. tipp geben?

[bizon]

Glückwunsch bis dahin.

Aber was ist mit dem Firebug? Mit dem hättest du gesehen, dass es beim Elternelement eine Klasse .trail gibt.

Selbst den Dingen mit Firebug auf den Grund gehen, trainiert unglaublich. Versuchs doch mal.

[sepp_a_u]

ich arbeite mit dem firebug. nur die frage: was genau ist die klasse .trail? und wie hängt das mit der letzten fragen zusammen?

[pmmueller]

Die Klasse trail sorgt dafür, dass auch der übergeordnete Menüpunkt hervorgehoben wird, wenn ein Unterpunkt aktiv ist. Und das hängt durchaus mit deinem Problem zusammen

Deinen Menü-Wunsch hattest du doch schon in 2. ebene hauptnavi horizontal + vertikal kombiniert gepostet. Ist doch auf den ersten Blick das alte Problem hier in diesem Thread: Wenn du sowas willst wie bei bpong.com dann ist das Stichwort Megamenü.

[sepp_a_u]

danke für die antwort.

dann müsste ich quasi irgendwie ein ".trail" einbauen. vermutlich bei der regel, in welcher ich den weißen hintergrund für das untermenü übergebe oder?

habe es mal so versucht:

#header li:hover .level_2, #header li:hover .level_2 .trail

aber klappt leider nicht. muss ich es woanders einbinden, oder ist die regel falsch?

viele grüße u danke

[bizon]

Guten Morgen,

schau mal hier:

#header .mod_navigation .trail { ... }

[sepp_a_u]

das habe ich ja eigentlich schon:

[code]
#header .mod_navigation .active, #header .mod_navigation .trail {
background-color: #FFFFFF;
color: #ED1B24;
}[code]

ist es das was du meinst? denn damit geht es leider irgendwie nicht. dabei ist es ja so angegeben wie es sein soll.

auch wenn ich es den anderen code darunter so erweitere:

#header .mod_navigation a:hover, #header .mod_navigation a:focus, #header .mod_navigation .trail

klappt es leider nicht

[wotank]

div.mod_navigation li ul.level_2 li {
    border:none;
} 

oder auch noch genauer

#header .inside div.mod_navigation li ul.level_2 li {
    border:none;
} 

oder ausufernd:

[PHP]body#top #wrapper #header .inside div.mod_navigation li ul.level_2 li {
    border:none;
} 

[/PHP]

Lesestoff Little Boxes Nachfahrenselektoren oder auch Selektoren verschachteln

Little Boxes sollte man nicht nur im Schrank haben sondern auch durcharbeiten.

Die Reihe könntest du noch gegen das Allinone-Exemplar sozusagen Einer für Alles austauschen.

[sepp_a_u]

hey wotank,

danke. aber das bezieht sich ja auf das problem mit dem rahmen in den untermenüs, was ich ja bereits gelöst habe mit folgendem code:

#header .submenu li {
    border: medium none;
}

das letzte problem im moment ist eben das, dass ich mit der .trail-klasse hinbekomme, dass der erste navipunkt auch weiß bleibt, wenn ich mit mouse-over über einem untermenüpunkt bin.

[wotank]

hey wotank,

danke. aber das bezieht sich ja auf das problem mit dem rahmen in den untermenüs, was ich ja bereits gelöst habe mit folgendem code:

#header .submenu li {
    border: medium none;
}

Wer richtig lesen kann ist klar im Vorteil!

[bizon]

In Post #15 schreibst du, dass es nicht klappt, wobei vorher von .trail die Rede war.

PMueller hat dir zu .trail folgendes geschrieben:

Die Klasse trail sorgt dafür, dass auch der übergeordnete Menüpunkt hervorgehoben wird, wenn ein Unterpunkt aktiv ist.

Und genauso funktioniert es doch auf deiner Seite.

Falls mit es aber das gemeint ist:
Link der 1.Ebene weiß, wenn Maus im Submenu ist

#header .mod_navigation li:hover {
	background-color: #fff;
}
#header .mod_navigation li:hover a {
	color: #ed1b24;
}

Nicht in den IEs gesehen, sondern nur live mit Firefox/Firebug probiert.
Und damit ist es jetzt an dir, die Navi fertig zu stellen.

Eben noch gesehen:
In der navigation.css sind jede Menge Kommentare drin, die nicht utf-8 kodierte Zeichen enthalten. Wenn du einen externen Editor verwendest, dańn stell dort die Kodierung auf utf-8.

[sepp_a_u]

danke für die hilfe. jetzt klappt es. muss es nur noch in die datei einbauen. habe es grad nur mit firebug getestet
die frage, die ich mir stelle ist jetzt aber: warum brauche ich die .trail-klasse nicht dazu?

das mit den kommentaren werde ich ebenfalls ändern - danke.

dann die generelle frage: wie findet ihr das menü und den code? ist das ok und konform?

[sepp_a_u]

jetzt habe ich ein weiteres problem/frage:

wie bekomme ich beim hover auf einem untermenüpunkt den roten rahmen von .mod_navigation weiß?

[bizon]

Indem du die Border-Anweisungen nicht dem .mod_navigation, sondern den Links gibst.
Beim hover stellst di die Border-Anweisung auf weiß.