Jan
Veckans CSS-meny 1
Kategorier: (X)HTML CSSTemat, förhoppningsvis återkommande, i denna artikel är att ge tips på hur man enkelt kan styla en lista med hjälp av CSS så att den ser ut som en meny. Navigeringsmenyer i dagens läge bör göras med hjälp av list-element och sedan stylas med CSS.
Vi börjar med HTML-koden för själva listan:
<ul id="nav">
<li><a href="index.html">Hem</a></li>
<li><a href="index.html">Information</a></li>
<li><a href="index.html">Kontakt</a></li>
</ul>
Vi börjar med att rensa bort de standardinställningar som finns för utseendet på listor i olika browsers. Detta gör vi såklart med hjälp av CSS i en separat fil eller i head-elementet eftersom vi inte vill ha någon presentationskod i HTML-koden:
#nav {
list-style-type: none;
margin: 0px;
padding: 0px;
}
Om man nu tittar på sidan ser listan ut som en helt vanlig lista utan några radmarkörer eller marginaler. För att få de olika menyknapparna att hamna bredvid varandra sätter vi de olika list-elementen till inline:
#nav li {
display: inline;
}
Vips så ligger de fint på rad! Nu är det dags att börja finslipa länkarna. Vi börjar med att sätta dem till block för att kunna ge dem en storlek. Vi behöver även göra dem flytande med hjälp av float. Detta för att undvika att de skapar en radbrytning som i sin tur skulle orsaka att knapparna hamnade under varandra igen. Vi sätter även en passande margin och padding för att få det lite luftigare och ett litet mellanrum mellan varje knapp:
ul#nav li a:link, ul#nav li a:visited {
display: block;
width: 120px;
height: 18px;
float: left;
padding: 0px 0px 0px 3px;
margin: 0px 1px 0px 0px;
}
Nu börjar vi få till placeringen på knapparna, men de ser på tok för anonyma ut. Därför börjar vi koncentrera oss på färger och typsnitt. Vi börjar med att sätta en trevlig bakgrundsfärg. Efter detta tar vi bort det streck som finns under länkar som standard i många webbläsare. Till slut ser vi till att ändra typsnitt, textfärg och textstorlek:
ul#nav li a:link, ul#nav li a:visited {
display: block;
width: 120px;
height: 18px;
float: left;
padding: 0px 0px 0px 3px;
margin: 0px 1px 0px 0px;
background-color: #7281a1;
text-decoration: none;
color: white;
font-family: "Trebuchet MS",Verdana,Sans-Serif;
font-size: 12px;
}
Nu börjar det likna något!
Det sista vi vill göra är att ändra utseendet när man för musen över och klickar på länkarna. En enkel förändring av bakgrundsfärgen räcker gott:
ul#nav li a:hover, ul#nav li a:active {
background-color: #3b4e75;
}
Sådär! Nu är veckans meny färdig. Här kan du se det färdiga resultatet. Lek gärna med koden och prova att ändra saker för att se vad som händer!
Om man skulle bryta ut CSS:en och lägga i en egen fil skulle man få en väldigt ren och fin HTML-sida utan någon onödig CSS-kod mitt i menyn. Trevligt!
TYCKTE DU OM ARTIKELN?
KOMMENTARER
- #1. Skriven av Erik den 20 Oct 2008
-
Hej, bra skrivet men jag får 2 problem.
Det första är att menyn hoppar in under varandra om man krymper sidan.
Det andra är att när jag lägger till float: left så hoppar menyn ut ur sin föregående ram.
(Hade tänkt att ha knappar med en bakgrund.) - #2. Skriven av Stefan den 25 Nov 2008
-
Hej!
Det första problemet löser du genom att sätta en fast bredd på "ul#nav". T.ex. width: 400px;
Det andra problemet löser du genom att sätta overflow: auto; på ul#nav (obs, fungerar ej i IE6).
- #3. Skriven av molly den 20 Jun 2009
-
http://mrodin.webs.com/drop.htm så ser det ut för mig... :/
- #4. Skriven av Caroline den 16 Mar 2011
-
Det fungerar inte att sätta en fast vidd, jag har satt width:100%;. Jag behöver hjälp! vill att headern till höger och menyn ska vara fasta men jag har försökt i evigheter att koda med position:relative och float åt alla håll samt margin men ingenting fungerar! Rullgardinen ska bara synas längst ner (eller som vanligt till höger)på sidan om man nu använder en 10-tums laptop, jag vill inte ha någon som syns i menyn! Kika gärna på min sida, behöver alla tips jag kan få!
