Jan
Veckans CSS-meny 2
Kategorier: (X)HTML CSSFörra veckans CSS-meny var en ganska simpel, liggande meny som ändrade bakgrundsfärg när man förde musen över de olika menyvalen. Denna vecka ska vi göra det något mer avancerat genom att göra en stående meny där en ikon dyker upp när man för musen över ett menyval.
Likt förra veckan börjar vi med en enkel lista:
<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 lägger till CSS för att rensa bort det vanliga utseendet på en lista som webbläsaren skapar:
ul#nav {
list-style-type: none;
margin: 0px;
padding: 0px;
}
Vi fortsätter med att ge varje länk i varje listelement en lämplig storlek, padding och margin:
ul#nav li a:link, ul#nav li a:visited {
display: block;
width: 120px;
height: 18px;
padding: 0px 0px 0px 3px;
margin: 0px 0px 0px 0px;
}
Efter detta är det dags att börja få menyn att se ut som vi vill med färger och typsnitt:
ul#nav li a:link, ul#nav li a:visited {
display: block;
width: 120px;
height: 18px;
padding: 0px 0px 0px 3px;
margin: 0px 0px 0px 0px;
background-color: #832020;
border-bottom: 1px solid white;
text-decoration: none;
color: #fdff61;
font-family: "Trebuchet MS",Verdana,Sans-Serif;
font-size: 12px;
}
Nu börjar vår meny se vettig ut. Det som kvarstår är att ändra färgen när man för muspekaren över ett menyval, samt att lägga till en liten ikon som visar vilket val vi är på:
ul#nav li a:hover, ul#nav li a:active {
color: white;
background: #b85656 url('veckansmeny2_menuBg.gif') no-repeat top right;
}
Det färdiga resultatet kan du se här
Förhoppningsvis har denna lilla artikel gett dig en idé om hur man kan göra om en lista till en meny med hjälp av CSS. Möjligheterna är (nästan) oändliga. Om du har önskemål, tips eller frågor om denna artikel, tveka inte att skicka ett mail. Mailadressen finner du på kontaktsidan.
TYCKTE DU OM ARTIKELN?
