En simpel vertikal meny

I denna guiden får du lära dig hur man gör en meny med hjälp av <ul>-taggen.

GUIDEN ÄR UNDER UTVECKLING!

Menyn vi är ute efter är följande:

Menyn har följande regler:

  • Den ska ha en fast bredd.
  • Man ska inte behöva trycka på länktexten, utan det ska räcka med att trycka på raden som länken står på.

En meny bygger man lämpligast upp med <ul>-taggen, så vår HTML-kod ser ut såhär:

HTML - HyperText Markup Language
<div id="meny"> <ul> <li><a href="sida1.html">Sida 1</a></li> <li><a href="sida2.html">Sida 2</a></li> <li><a href="sida3.html">Sida 3</a></li> <li><a href="sida4.html">Sida 4</a></li> </ul> </div>

Vi börjar med att ge menyn en fast bredd och en röd bakgrundsfärg.

CSS - Cascading Style Sheets
#meny{ background-color: red; /* Röd bakgrund */ width: 200px; /* 200 pixlar bred */ }

Sedan tar vi bort listpunkten, marginalerna och paddingen som webbläsarna visar som standard för <ul>-taggen.

CSS - Cascading Style Sheets
#meny{ background-color: red; width: 200px; } #meny ul{ list-style-type: none; /* Ingen listpunkt */ margin: 0; /* Inga marginaler */ padding: 0; /* Ingen padding */ }

Nu går vi på länkarna och gör så att de visas som block (så att de blir 100% breda), tar bort deras understrykning och gör så att de alltid är blåa.

CSS - Cascading Style Sheets
#meny{ background-color: red; width: 200px; } #meny ul{ list-style-type: none; margin: 0; padding: 0; } #meny ul li a{ color: blue; /* Var blå */ display: block; /* Visas som block-element */ text-decoration: none; /* Ingen understrykning */ } /* Se till så att länkarna är blåa även då man (1) har besökt dem, (2) för musen över dem och (3) trycker på dem */ #meny ul li a:visited, #meny ul li a:hover, #meny ul li a:active{ color: blue; /* Var blå */ }

Nu lägger vi på lite padding på diven, så att menyn åker in från kanterna. Sedan lägger vi även till 1 svart streck under varje <li>-tagg.

CSS - Cascading Style Sheets
#meny{ background-color: red; width: 200px; padding: 10px; /* Innehållet i elementet ska ligga 10 pixlar från kanten */ } #meny ul{ list-style-type: none; margin: 0; padding: 0; } #meny ul li{ border-bottom: 2px solid black; /* Svart underkant */ } #meny ul li a{ color: blue; display: block; text-decoration: none; } #meny ul li a:visited, #meny ul li a:hover, #meny ul li a:active{ color: blue; }

Nu behöver vi bara skjuta in länktexten lite och lägga till en svart kant på <ul>-taggen (dock inte på undersidan av den).

CSS - Cascading Style Sheets
#meny{ background-color: red; width: 200px; padding: 10px; } #meny ul{ list-style-type: none; margin: 0; padding: 0; border-left: 2px solid black; /* Svart kant på vänstersidan */ border-top: 2px solid black; /* Svart kant på ovansidan */ border-right: 2px solid black; /* Svart kant på högersidan */ } #meny ul li{ border-bottom: 2px solid black; } #meny ul li a{ color: blue; display: block; text-decoration: none; padding-left: 10px; /* Var indenterad 10 pixlar */ } #meny ul li a:visited, #meny ul li a:hover, #meny ul li a:active{ color: blue; }

Svårare än såhär är det inte att fixa till en enkel vertikal meny i CSS.