In deze tutorial gaan we een moderne navigatie maken die te gebruiken is voor vele soorten websites. Hiervoor maken we gebruik van Photoshop, HTML en CSS. De bronbestanden zijn hieronder te downloaden. Voor de opmaak van het menu is niet meer dan een standaard teksteditor als Kladblok nodig.
Stap 1 – Ontwerp
Ontwerp de twee afbeeldingen (standaard en rollover) die je wilt gaan gebruiken voor het menu. In het voorbeeld is er gebruik gemaakt van afbeeldingen met het formaat 176 pixels bij 41 pixels met een radius van 3 pixels.
Stap 2 – HTML
Maak een html-pagina aan en kopieer de volgende code tussen de body tags:
Nu hebben we een standaard menu, zonder enige opmaak.
Stap 3 – CSS
Open een nieuw document en sla deze op als “opmaak.css”. Kopieer vervolgens de volgende code in het CSS document:
background-color: #373737;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #fffefe;
}
ul {
list-style: none;
width: 176px;
text-indent: 15px;
padding: 12px 0px;
}
ul li{
margin: 2px;
background-image:url(menu.png);
padding: 0px;
height: 41px;
width: 176px;
}
ul li a {
padding: 12px 0px;
display: block;
color: #fffefe;
text-decoration: none;
text-align: center;
}
ul li a:hover {
color: #459dff;
padding: 12px 0px;
background-image: url(menu_over.png);
}
#menu {
float: left;
width: 176px;
margin-left: 3px;
background-color:#373737;
}
Dit was het, je kunt nog spelen met verschillende kleuren, margins en paddings.
3 reacties to “Maak een modern menu voor je website”
Loading ...
Hoi Marc,
ik heb wat geëxperimenteerd met je tutorial.
Ik probeer nu de kleurstelling te wijzigen, maar dan verdwijnt de functionaliteit. Heb je een handige tip om een en ander qua kleurstelling aan te passen.
Groeten,
Rens
Hallo Vincent,
Bedankt voor uw reactie, goed om te horen dat het artikel gewaardeerd wordt.
Mvg,
Marc
Geweldig artikel!
Hier kan ik zeker wat mee!
Groetjes,
Vincent van B-basic.com