Snygga menyer med CSS

Det finns hundratals guider på nätet för hur man gör snygga menyer med CSS. Du kan pröva googla t.ex. ”menu css”.

Nästan alla exempel baserar sig på icke-numrerade listor, dvs. <ul>- och <li>-elementen.
HTML-koden ser ungefär ut såhär:

<div id="menu">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</div>

Det är alltså en icke-numrerad lista, där varje element av listan (<li>) innehåller en länk (<a>) till en sida (byt ut # mot url-adressen).

Det är viktigt att åtminstone <div> eller <ul> elementet har en id, så att man kan referera till den i CSS. Då kan du i din CSS-kod styla precis vilka delar av koden du vill.

Här kommer ett par enkla exempel på saker som du kan börja med att pröva i CSS.

Ta bort kulorna (bullets) som finns framför varje listelement.

div#menu ul {
    list-style-type: none;
}

Notera speciellt hur du väljer listelementet: div#menu ul refererar till alla <ul>-element som finns inne i <div> elementet med id=menu.

Gör så att alla listelementen visas horisontellt (på en rad):

div#menu li {
    display:inline;
}

Ta bort understreckningen och ändra färg på alla länkar.

div#menu a {
    text-decoration:none;
    color: black;
}

Och sist men inte minst:

Effekter då du rör dig över länkarna (hover)


div#menu a:hover {
    background-color: #ccccff;
}

Nu ändrade vi bara bakgrundsfärgen.

Det finns otaliga andra effekter du kan använda dig av! Experimentera!
Du kan t.ex. ändra bredden och höjden på länkarna och lägga till ramar (border), så att de blir mer som knappar.

Men kom ihåg att enkelt ofta är snyggare…

This entry was posted in Allmän. Bookmark the permalink.

Comments are closed.