Het menu (deel 1)
Hoe maak ik een menu..
Iedereen die wel eens ingelogd is in een Website Baker website weet dat het is heel simpel om nieuwe pagina's te maken.
Maar hoe krijg je van die pagina's nu eigenlijk een mooi menu?
Dat gaan we proberen hier eens duidelijk uit te leggen.
Hoe werkt een menu op een webpagina?
Standaard wordt een menu gemaakt door een "Unordered List" te gebruiken, met daarbij een aantal CSS regels die moeten bepalen hoe een menu eruit ziet.
Zo'n lijst ziet er dan zo uit:
<ul>
<li><a href="pagina1.php">Pagina 1</a></li>
<li><a href="pagina2.php">Pagina 2</a></li>
<li><a href="pagina3.php">Pagina 3</a></li>
<li><a href="pagina4.php">Pagina 4</a></li>
</ul>
Zonder CSS opmaak ziet dat er uit als volgt:
Prima bruikbaar als menu natuurlijk, maar meestal willen we toch wel iets leukers.
Aangezien we dit met CSS moeten doen, en we niet ieder lijstje in de website er willen laten uitzien als een menu, moeten we daar wat aparte CSS regels voor gaan opzetten.
De eenvoudigste manier is om het komplete <ul><li></li></ul> blok binnen een CSS class te plaatsen.
Binnen die CSS class kunnen we dan bepalen hoe iedere <li> regel eruit komt te zien.
Het menu bouwen we dan als volgt op:
<div class="menu">
<ul>
<li><a href="pagina1.php">Pagina 1</a></li>
<li><a href="pagina2.php">Pagina 2</a></li>
<li><a href="pagina3.php">Pagina 3</a></li>
<li><a href="pagina4.php">Pagina 4</a></li>
</ul>
</div>
Daarbij een paar CSS regels:
.menu {
width:170px;
}
.menu li {
list-style-type:none;
}
.menu a {
display:block;
background-color:#003366;
color:#FFFFFF;
padding:4px 10px;
text-decoration:none;
}
.menu a:hover {
background-color:#FFFFFF;
color:#003366;
}
Met als resultaat iets wat meer lijkt op een menu zoals we hem zouden willen zien:
Wat gebeurt er hier nu eigenlijk?
De eerste "regel" (.menu) in de CSS zorgt voor de breedte van het menu blokje.
In dit geval is dat dus 170 pixels.
De tweede regel (.menu li) is alleen van toepassing op de <li> elementen binnen het "menu" blok.
We zeggen daar tegen de browser dat we geen punten, blokjes, rondjes en dergelijke op iedere regel willen zien.
De derde regel (.menu a) gaat vervolgens alle links binnen het menu blok bewerken.
* Als eerste maken we er een display-mode -> block van. Hierdoor wordt straks het hele gebied om een link heen (niet alleen de tekst) klikbaar.
* Vervolgens zetten we met twee regeltjes de achtergrond (blauw) ende voorgrond (wit) van het blokje.
* Met de padding regel zorgen we voor wat ruimte om de link heen (4px links en rechts, 10px boven en beneden)
* De laatste regel zorgt ervoor dat er geen lijntje onder de link komt te staan.
Met dit stukje CSS hebben we dus een menu gemaakt. Een blauwe achtergrond, witte letters, en het zijn een soort knoppen geworden.
De laatste CSS regel (.menu a:hover) is alleen van toepassing als je met de muis over een link heen gaat (in het engels: hoveren).
Hier draaien we simpelweg de voorgrondkleur en de achtergrondkleur om. De bezoeker krijgt dan een duidelijk beeld dat hij kan klikken op dat stukje scherm.
In deel 2 ga ik proberen te laten zien hoe je het bovenstaande in Website Baker kan toepassen.
Submenu
Meest gelezen
Laatste tips
Problemen met FCK editor en IE9De FCK Editor die standaard in WebsiteBaker wordt meegeleverd heeft problemen met Internet Explorer 9.
De oplossing is simpel.
lees verder..Limiteren hoeveel pagina's er gemaakt kunnen worden in WebsiteBaker
Als je websites "verkoopt" en je wilt zorgen dat je klant maar 10 pagina's kan aanmaken.. Hoe doe je dat??
lees verder..Wrapper module
Al je de wrapper module gebruikt om bijvoorbeeld een catalogus van een externe website te laten zien dan wil je graag dat een nieuwe pagina ook weer naar boven springt wanneer er op een link wordt geklikt.
lees verder..