Dropdown menu - Pseudo class
1. Inleiding
2. :hover pseudo class
3. Ongeordende Lijst
4. De CSS
5. Voorbeeld
6. Slotwoord & referentielijst
1. Inleiding
Dropdown menuutjes zijn heel populair. Maar nodeloos ingewikkeld. Dropdown menuutjes worden opgebouwd uit een exotische combinatie van HTML en JavaScript, die men DHTML noemt. En werken met DHTML is niet logisch en niet makkelijk. Op het net zijn een aantal 'DHTML Generatoren' te vinden, maar hier wil je echt niet aan beginnen. Dropdown menuutjes kunnen namelijk ook gemaakt worden met correct HTML en CSS, volgens de standaarden!
Bij dit systeem wordt gebruik gemaakt van de :hover pseudo class. Dit wordt door bijna alle moderne browsers ondersteund. Inderdaad, bijna. Internet Explorer werkt weer eens niet mee. Gelukkig is dit op te lossen met JavaScript, in de vorm van een .htc bestand (html component). Maar daar kom ik later op.
 top
2. :hover pseudo class
De werking van de :hover pseudo class zal jullie niet onbekend zijn. De :hover pseudo class wordt voornamelijk gebruikt voor het element a. Hyperlinks dus. En hoewel de :hover pseudo class is ingevoerd door Microsoft, in Internet Explorer is a het enige element wat de :hover pseudo class ondersteund. In andere browsers kunnen ook andere elementen gebruik maken van de :hover pseudo class. Voor dit menuutje gebruiken we een ongeordende lijst. De :hover pseudo class verbinden we aan een List Item (<li>)
top
3. Ongeordende Lijst
Eerst maken we een Ongeordende Lijst. Voor deze tutorial gebruik ik de volgende. Hier kan je trouwens de structuur van mijn dropdown menuutje al zien. De 'List Item 1' links zijn straks zichtbaar, en als je er met de muis overheen gaan worden de onderstaande list items getoond.
Voorbeeld code |
Output zonder het gebruik van CSS |
<ul>
<li>List Item 1</li>
<li>List Item 1
<ul>
<li>List Item 2</li>
<li>List Item 2
<ul>
<li>List Item 3</li>
<li>List Item 3</li>
<li>List Item 3</li>
<li>List Item 3</li>
</ul>
</li>
<li>List Item 2
<ul>
<li>List Item 3</li>
</ul>
</li>
</ul>
</li>
<li>List Item 1</li>
<li>List Item 1</li>
<li>List Item 1
<ul>
<li>List Item 2</li>
<li>List Item 2
<ul>
<li>List Item 3</li>
</ul>
</li>
</ul>
</li>
</ul>
|
- List Item 1
- List Item 1
- List Item 2
- List Item 2
- List Item 3
- List Item 3
- List Item 3
- List Item 3
- List Item 2
- List Item 1
- List Item 1
- List Item 1
|
Maak de lijst zoals jij het wilt, met een nieuwe <ul> voor elk lijstje dat bij het hoveren zichtbaar moet worden. Vergeet niet te indenten voor het overzicht.
top
4. De CSS
Vervolgens moet die lijst opgemaakt worden tot een werkend dropdown menu. Hiernaast staat de CSS code die ik gebruik voor deze tutorial.
Bij body staat maar één CSS element; behavior. Deze kan vreemd voor je zijn, het is namelijk eigenlijk geen CSS element. De enige browser die er naar luistert is Internet Explorer, en dat is nu ook precies waarom hij hier staat. Aangezien de :hover pseudo class in Internet Explorer alleen werkt bij een a tag , en wij hem hier toepassen op een li tag, werkt ons systeempje bij de meest gebruikte webbrowser niet. Internet Explorer laadt een 'behavior' bestand en voert het uit. Andere browsers negeren de behavior.
Door middel van de behavior laden we een HTML Component; een .htc bestand. Dit .htc bestand is eigenlijk gewoon een javascript, maar we roepen het aan via CSS. Het is voor deze tutorial niet van belang om dit script te begrijpen (om eerlijk te zijn begrijp ik het zelf niet, het is geschreven door peterned en daarvoor dank).
Downloaden: csshover.htc
We kunnen er nu vanuit gaan dat de :hover class op alle CSS elementen werkt, in elke browser. Nu de rest van de CSS nog. Eerst geef je de ul list-style: none; mee. Dit voorkomt bolletjes voor je list items (zoals het geval is bij het voorbeeld zonder CSS) want dat willen we niet.
De li:hover krijgt een speciaal element mee. De zogenaamde z-index. Mensen die wel eens met een 3D programma hebben gewerkt zullen dit wel snappen. Behalve de x-as (horizontaal) en de y-as (verticaal) heb je ook de z-as. Die stelt de 3e dimensie voor. Nu zijn websites eigenlijk 2D, maar met de z-index kan je toch de 'hoogte' van een element aangeven. Door li:hover z-index: 1; mee te geven, wordt de gehoverde li bovenop de anderen geplaatst. Ze overlappen daardoor op de juiste manier.
Verder geef je de 'ul ul' (dus de lijst in de lijst, de eigenlijke 'dropdowns') een display en een positie mee. Ik gebruik position: absolute; en left: 140px;. De breedte van het eerste menuutje is 150px, dus overlappen ze 10 pixels. Leuk effect, en lang leve de z-index. Door display: none; te gebruiken worden ze niet afgebeeld. Totdat je de muis erover hovert! Dan wordt namelijk li:hover ul, li:hover li:hover ul geactiveerd. En die zegt display: block;. Verder zegt li:hover ul ul nog dat als je over de eerste li hovert, de tweede 'dropdown' nog niet te zien is (display: none;).
Zo in tekst is het misschien wat warrig en lastig te begrijpen, maar als je de code hiernaast overneemt en wat speelt met de waarden kom je er zeker uit.
De overige CSS is gewoon opmaak en spreekt denk ik voor zich. |
|
CSS |
body
{
behavior: url("csshover.htc");
}
*
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
ul
{
list-style: none;
width: 150px;
border: 1px solid gray;
margin: 0;
padding: 0;
}
li
{
position: relative;
background: #ffffff;
border: 1px solid #ffffff;
margin: 0;
padding: 0;
}
li:hover
{
background-color: #99ccff;
z-index: 1;
cursor: pointer;
}
ul ul
{
position: absolute;
display: none;
left: 140px;
top: 4px;
}
li:hover ul ul
{
display: none;
}
li:hover ul, li:hover li:hover ul
{
display: block;
}
|
top
5. Voorbeeld
En tenslotte een werkend voorbeeld. Dit menuutje gebruikt de HTML en CSS code van de tutorial.
top
6. Slotwoord & referentielijst
Dit was dan mijn eerste tutorial voor sitemasters.be. Ik hoop dat hij te volgen is en dat jullie er iets aan hebben. Voor vragen mag je mij pm'en, op/aanmerkingen op de tutorial horen bij de Nota's thuis. Hieronder staan drie links, die ik gebruikt heb bij het schrijven van deze tutorial. Gebruik ze voor toelichting en extra informatie:
http://www.xs4all.nl/~peterned/
http://www.w3.org/TR/REC-CSS2/selector.html#q15
http://www.alistapart.com/articles/dropdowns/
top
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.4) 