Doordruppelen van bovenuit de waterval: de C van Cascade !
Hoi damnsharp,
Algemene zaken!
- Tip 1: Probeer met zo min mogelijk classes en id's te werken, dat geeft heldere html en css.
- Tip 2: Zorg in de html-code voor goed inspring-werk, dan is simpel te zien op welk niveau een bepaald element zich in de cascade bevindt.
- Tip 3: Elementen op hetzelfde niveau die allemaal dezelfde opmaak moeten krijgen, hebben geen class of id nodig: die zijn allemaal tegelijk te benaderen. Classes of id's zijn alleen nodig als er onderlinge verschillen moeten optreden (of soms als aangrijpingspunt voor javascript-bewerkingen).
Nu staat er dit:
HTML:
...
<div id ="navigation">
<ul class="top-level">
<li ><a href="#">Home</a> </li>
<li ><a href="#">Over</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
<li ><a href="#">Contact</a></li>
<li ><a href="#">FAQ</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
...enz.
</ul>
</div>
Wat hetzelfde is als dit:
HTML:
<div id ="navigation">
<ul class="top-level">
<li><a href="#">Home</a></li>
<li><a href="#">Over</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
...enz.
</ul>
</div>
Waarin je meteen kunt zien (a) dat sommige submenu-items verkeerde namen hebben, en (b) waar zich elementen op gelijk niveau bevinden, die geen class nodig hebben.
Zodat het kan worden:
HTML:
<div id ="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Over</a>
<ul>
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 4</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a>
<ul>
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
</ul>
</li>
...enz.
</ul>
</div>
De css-benadering is nu als volgt:
De hele box van het menu is aan te vatten met:
#navigation {...}
De <ul> van het hoofdmenu is te bereiken met:
#navigation ul {...}
- NB: zonder tegenbericht gelden deze styles ook voor de <ul>'s van de submenu's, want dat zijn ook <ul>'s die nat worden onder de waterval van de #navigation.
Alle list-items van het hoofdmenu:
#navigation li {...}
- Dat is hetzelfde als: #navigation ul li {...}
- Maar de <ul> heeft geen onderscheidend vermogen voor wat er onder die waterval zit, en kan weggelaten worden.
- NB: zonder tegenbericht gelden deze styles ook voor de <li>'s in de submenu's.
Alle links van het hoofdmenu:
#navigation a {...}
- Is hetzelfde als #navigation ul a {...} of #navigation li a {...} of #navigation ul li a {...}
- Omdat dit de enige eerstvolgende <a>'s in de #navigation zijn, kan de ul en/of li gevoeglijk weggelaten worden.
- NB: zonder tegenbericht gelden deze styles ook voor de <a>'s in de submenu's.
Alle hover-toestanden van de hoofdmenu-<li>'s:
#navigation li:hover {...}
- NB: zonder tegenbericht ook voor de hovers over de <li>'s in de submenu's.
Alle hover-toestanden van de hoofdmenu-links:
#navigation a:hover {...}
- NB: zonder tegenbericht ook voor de link-hovers in de submenu's.
De <ul>'s van de submenu's:
#navigation li ul {...}
- Is hetzelfde als #navigation ul ul {...} of #navigation ul li ul {...}
- Hier kunnen de tegenberichten komen: een paraplu tegen de waterval van boven!
- De hier opgegeven styles tasten niet die van de <ul> van het hoofdmenu aan, want de hoofdmenu-<ul> heeft geen <li> en/of <ul> boven zich in de waterval vanaf de #navigation.
Op dezelfde manier voor de tegenberichten:
De <li>'s van de submenu's:
#navigation li li {...}
De links van de submenu's:
#navigation li li a {...}
De hovers van de submenu's:
#navigation li li a:hover {...}
Attentie:
Er is een aanzienlijk verschil tussen
#navigation a:hover {...} en
#navigation li:hover {...}.
- Dat gaat bv. spelen bij het optoveren van de submenu's.
- Met #navigation a:hover ul {display:block} wordt het submenu niet meer getoond als je vanaf de link het submenu binnen hovert: op het submenu ben je van de link zelf af, dus van de hoverstaat weg; en dan klapt het submenu weer dicht.
- Met #navigation li:hover ul {display:block} blijft het submenu openstaan zo lang je binnen het bereik van het list-item van het hoofdmenu zit. Dwz inclusief al zijn afstammelingen; ook als je over een submenu-link hovert, zit je nog steeds onder de <li>-druppels van het hoofdmenu, en blijft het submenu dus overeind.
Tot zover!
Op deze manier moet het ook niet moeilijk zijn om de tekst van de submenu-links wit te krijgen.
*)
Met vriendelijke groet,
CSShunter
______________
*)
Waarom het bij jou niet lukt:
Je hebt weliswaar:
ul.sub-level li a {color: #FFFFFF;}
... maar je hebt ook:
#navigation a { color: #666666;}
De eerste geldt voor
alle links in een lijst met de class="sub-level": waar ze ook op de pagina zitten.
De tweede geldt
alleen voor links die binnen de #navigation zitten, dwz dat is specifieker dan de links in het algemeen.
De tweede wint dan volgens
de css-voorrangsregels (hoe specifieker, hoe meer voorrang), en de links blijven dan grijs.
Als je de eerste laat voorafgaan door
#navigation, dan is de eerste specifieker, en worden ze wel wit.
Maar het kan dus ook als boven, met weglating van de class.
<edit>
O ja,
Tip 4: Begin pas aan de submenu's als alles in het hoofdmenu goed geregeld is.
Als je alvast aan het submenu begint zonder dat het hoofdmenu in orde is, en dan later iets in de hoofdmenu-styles gaat aanpassen, kan dat via de waterval ernstige gevolgen hebben voor de submenu-styles!
</edit>
)
dus haal hem weg.