Knappmeny #1

I denna artikel kommer jag att förklara hur du med hjälp av en lista och lite CSS kunskaper kan skapa en snygg knappmeny.

Förkunskaper?

Du bör kunna grundläggande HTML och CSS. Du bör veta vad en CSS-klass är och hur man använder sig av den.

Du kör vi!

Först och främst skapar vi menyn som vi vill jobba med. Vi skapar en lista i en div som vi kallar för navigation:

<div id="navigation">

<ul>

<li><a title="Länk 1" href="#">Länk 1</a></li>

<li><a title="Länk 2" href="#">Länk 2</a></li>

<li><a title="Länk 3" href="#">Länk 3</a></li>

<li><a title="Länk 4" href="#">Länk 4</a></li>

</ul>

</div>

Konfigurera listan

Men hjälp av koden nedan så ändrar vi listans utseende:

#navigation ul {

margin: 0; 

width: 150px;

font: bold 10px Verdana;

list-style: none;

} 


#navigation ul li {

margin: 0; 

padding: 0; 

text-align: right;

}

Vi tog bort punkterna, nollställde marginalerna och gav en bredd samt textegenskaper.

Style länkarna

Denna kod ändrar utseendet för länkarna. Eftersom det är en stor area vi vill göra klickbar och inte bara självaste länken så gör vi om länken till block så när man pekar på li så pekar man på hela länken.

#navigation ul li a {

display: block; 

width: 150px; 

height: 25px;

line-height: 25px;

}

Dags att färga

Nu när vi gjort om menyn så är det dags att snygga till den, eller hur? Nedan ser du ett exempel på hur vi kan göra för att göra menyn lite snyggare.

#navigation ul li a {

display: block; 

width: 150px; 

height: 25px;

line-height: 25px;

color: #fff; 

font-weight: bold;

}



#navigation a:link, #navigation a:visited {

background-color: #DC234D;

}



#navigation a:hover, #navigation a:active {

background-color: #FF597F;

}

Det sista kvar

Nu ska vi bara snygga till menyn lite till genom att lägga till en nedre ram på länkarna. Sen är det klart!

#navigation ul li a {

display: block; 

width: 150px; 

height: 25px;

line-height: 25px;

color: #fff; 

font-weight: bold;

border-bottom: solid 1px #000;

}

Slutord

I denna artikel har vi gjort om en enkel <ul> lista till en snygg knappmeny. Det finns många olika sätt att göra detta på, så testa dig fram, använd andra färger också!

Skapades: 2007-07-31 12:59:30
Skribent: Shadi
Lästs 1656 gånger
Betyg: 0 (artikeln har endast 4 röster, det krävs minst 5 för ett betyg)

Kommentarer