Een menu heeft een duidelijke functie op een web-pagina. Zonder dat een bezoeker "hard" moet zoeken waar hij zijn keuze(s) kan maken, moet er, op een logische plaats, een menu staan wat duidelijk leesbaar is en wat echt in alle browsers werkt. Zelfs als een browser niet in staat is om CSS of Javascript te "verwerken", moet nog steeds duidelijk zijn waar en waarom de bezoeker moet "klikken". En wat nóg belangrijker is, is de snelheid waarmee het menu op de pagina "gezet" wordt. Als je een javascript menu op jouw pagina gebruikt (die misschien wel "terugschakelt" middels graceful degradation) die er drie seconden over doet om eens wat op het scherm te laten zien, is dat volkomen "uit den boze". Bovenstaand menu voldoet aan alle eisen. Plaats de stylesheet in de head-sectie van de pagina en de html-code voor het menu in de body-sectie. Wijzig de stylesheet voor wat betreft de kleurstelling, afmeting en eigenschappen naar jouw eigen inzicht.
<style type="text/css">
.basis-menu{
margin:0 0 0 10px;
width:200px;
border:8px solid #030;
overflow:hidden;
background:#891D00;
padding:20px}
.basis-menu ul{
margin:0;
color:#0ff;
font-family:"Comic Sans MS",Arial,helvetica,sans-serif }
.basis-menu li a{
color:#afa;
background:inherit;
padding-right:300px;
text-decoration:none;
font-weight:normal}
.basis-menu li a:hover{
color:#000;
background:#1a1;
font-weight:bold}
.basis-menu li{
white-space:nowrap;
list-style:square inside;
color:#4F0F00;
font-weight:bold}
.basis-menu li:hover{
color:#D82700}
</style>
<div class="basis-menu">
<ul>
<li><a href="http://kompoos.nl/css/text-effects/basis-menu.html">home</a></li>
<li><a href="http://kompoos.nl/css/text-effects/basis-menu.html">menu</a></li>
<li><a href="http://kompoos.nl/css/text-effects/basis-menu.html">help</a></li>
</ul>
</div>