Dus laten we beginnen met het menu dat in het bovenste venstergebied wordt weergegeven.
Voor dit menu heb je al veel voorwerk gedaan. Jullie herinneren je vast het mooie kleurverloop dat als een één-pixel-afbeelding is opgeslagen. Precies dat wordt nu gebruikt. Echter moet eerst de juiste HTML-structuur voor het menugebied worden aangemaakt. Dit zou er als volgt uit kunnen zien:
<div class="header"> <div class="header-top"> <h1>Jouw Belastingadviseur</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Startpagina</a></li> <li><a href="#">Over ons</a></li> <li><a href="#">Hoe we werken</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Colofon</a></li> </ul> </div> <div class="header-img"> </div> </div>
Voor het ontwerp van de achtergrond wordt de één-pixel-afbeelding ingevoegd en verticaal herhaald totdat het hele element is gevuld.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Vervolgens kan het menu opgemaakt worden. Hier zijn in principe geen bijzonderheden. Belangrijk zijn bij dergelijke menu's eigenlijk altijd alleen de volgende aspecten:
• Verberg de opsommingstekens met list-style-type: none;.
• Zorg ervoor dat de lijstitems naast elkaar worden weergegeven.
Ik werk op dit punt - zoals jullie al lang weten - met een kleurverloop dat via een afbeelding wordt gerealiseerd. Inmiddels zijn er natuurlijk tal van andere opties beschikbaar voor menu's. Denk bijvoorbeeld aan JavaScript-frameworks zoals jQuery. Het zou natuurlijk te ver gaan om al deze mogelijkheden hier te bespreken. Er zijn echter tal van online generators die het mogelijk maken om met slechts een paar klikken menu's te maken. Eén daarvan - zonder te oordelen of het nu de beste in zijn soort is - vind je op http://www.cssmenubuilder.com/.
In ieder geval heb ik gekozen voor de volgende variant:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Belangrijk is eigenlijk alleen de hover-status. Wanneer dit gebeurt, wordt een andere achtergrondafbeelding weergegeven.
Het rechtermenu
De website heeft niet alleen bovenaan een menu, maar ook in het rechter venstergebied wordt er een weergegeven.
Dit menu behoort tot het div-gebied met de klasse content-right. Voor de ontwikkelingsfase van de pagina heb ik daar slechts dummy-inhoud geplaatst.
<div class="content-right"> <h2>Hoofdmenu</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul>
Het gebied wordt eerst op de juiste plek en met de gewenste grootte gepositioneerd.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Vervolgens gaan we verder met het definiëren van het eigenlijke menu. Deze keer staan de items echter onder elkaar. Je moet dus alleen letten op het verbergen van de opsommingstekens. De rest van het menu-ontwerp ligt uiteindelijk in jouw handen.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}In de browser zou je nu het volgende beeld moeten zien:
De onderste menubalk
In de voettekst van de website zal er een ander menu zijn. Hier op PSD-Tutorials.de wordt ook zo'n menu gebruikt om links naar algemene informatie te bieden.
Op onze website is er ook een copyrightvermelding. Beide dingen zijn eigenlijk vrij typisch voor websites. Laten we eerst naar de HTML-structuur kijken.
<div class="bottom"> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Over ons</a></li> <li><a href="#">Nieuws</a></li> <li><a href="#">Controlecentrum</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Colofon</a></li> <li><a href="#">Sitemap</a></li> </ul> <p>© Auteursrecht 2014 bij PSD-Tutorials.de</p> </div>
Het is een eenvoudige ul-lijst. Elk lijstitem bevat een menu-item. Onder de ul-lijst bevindt zich een p-element waarin de copyrightvermelding staat. Wat nu nog ontbreekt, is natuurlijk weer de CSS-syntax.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Hoe je de voettekst vormgeeft, is uiteindelijk aan jou. Ik gebruik opnieuw een kleurverloop. Je kunt echter bijvoorbeeld ook een eenvoudige achtergrondkleur gebruiken of meteen CSS3-syntax inzetten. In het geval van mijn grafiekvariant is het echter belangrijk dat door background-repeat: no-repeat; herhaling wordt voorkomen.
Kijk eerst naar het resultaat:
Wat hier opvalt, zijn de witte strepen naast de afzonderlijke menu-items. Deze worden gedefinieerd met behulp van verschillende border-left-aanduidingen, wat uiteindelijk niets anders betekent dan dat de aanduidingen telkens betrekking hebben op de linkerrand van het element.
De algehele syntax voor het onderste menu ziet er dan als volgt uit:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Een bijzonderheid ten opzichte van het bovenste menu is hier. In feite wordt er geen extra afbeelding geladen bij hover. Om bezoekers echter te laten begrijpen dat ze met de muisaanwijzer over een link bewegen, worden de afzonderlijke links onderstreept wanneer het hover-event plaatsvindt.
Aan het einde van deze tutorial zijn de basisstappen naar de website voltooid. Wat nu nog ontbreekt, is het opvrolijken van de pagina. Meer hierover in de volgende tutorials.
