05. CSS

Flik meny med "animation"

2010-04-21 17:44 #0 av: johan-ahlback

Ibland kan man tröttna på vanliga menyer och då vill man göra något som ser animerat ut. Men ofta krävs det javascript för det ändamålet. Men jag kom på en meny som går att göra i vanlig css kod.

Allla vet hur en vanlig meny med flikar ser ut. Om du inte vet så kan du kolla på de tre flikarna högst upp till vänster. Det ger en känsla av att en sida består av flera sammansatta sidor iställer för olika dokument. Men Jag ville förstärka det lite till genom att få flikarna att ligga ovanpå varandra och hoppa längst fram när man hovrar över den. Det var lite pill men det är enkelt att återskapa. så här gjorde jag:

Första skapade jag en grund för menyn i html koden som ser ut så här:

flik meny steg1

<div id="menu">
<ul>
<li class="t1"><a href="#">Home</a></li>
<li class="t2"><a href="#">contact</a></li>
<li class="t3"><a href="#">feedback</a></li>
<li class="t4"><a href="#">Twitter</a></li>
<li class="t5"><a href="#">madebyjohan</a></li>
</ul>
</div>

Jag har en div tagg som omsluter menyn. sen har jag en oordnad lista med listelement. Dessa element gav jag ett unikt klassnamn. Detta är för att alla de olika elementen ska ha ett eget z-index värde (återkommer till vad det är senare). Sen har jag länkarna i list elementen.

Sen skrev jag css kod för att få bort indentering och punkterna:

flik meny steg2

#menu ul{
list-style:none;
padding:0px;
}

Sen kom jag till själva grund utseendet på flikarna. Jag har använt lite css3 här för att få runda kanter men det fungerar utan också. Så om du inte vill ha rundade kanter så struntar du i de raderna med webkit och moz:

flik meny steg3

#menu ul li{
text-align:center; /* centrerar texten */
position:relative; /* positionerar elementen utanför den vanliga ordningen */
display: inline-block; /* Gör det till ett inline-bloc elemtnt för att få dem att ligga på rad */
width:80px; /* ställer in en fast bredd på dem. men jag har en padding på dem så bredden blir 90px*/
padding:20px 5px 5px 5px; /* storlek på flikarna */
background:#333; /* Bakgrundsfärg */
-moz-border-radius-bottomleft: 10px; /* rundade kanter */
-webkit-border-bottom-left-radius:10px; /* rundade kanter */
-moz-border-radius-bottomright: 10px; /* rundade kanter */
-webkit-border-bottom-right-radius:10px; /* rundade kanter */
margin-right: -10px; /* överlappningen */
border:1px #FFF solid; /* kanter */
}

Som du kanske ser är flikarna ordnade i fel ordning. jag vill att den första ska ligga högst upp. det gör jag med z-index. först ska jag förklara lite vad z-index innebär.

Ett html sida kan faktiskt ses som ett 3D rum. Du har tre axlar att placera ut saker. horisontellt = X, vertikalt = Y och djup = Z. Så ett z-index bestämmer hur långt bak respektive fram ett objekt ska ligga. Ett högt värde hamnar långt fram.

Det är just därför jag använt klasser på list elementen. För då kan jag skriva såhär:

flik meny steg4

#menu ul li.t1{
z-index:600;
}
#menu ul li.t2{
z-index:500;
}
#menu ul li.t3{
z-index:400;
}
#menu ul li.t4{
z-index:300;
}
#menu ul li.t5{
z-index:200;
}

Nu ligger de i rätt ordning.

Nu ska hover effekten fixas och den ska göra så att fliken hamnar högst upp och byter färg.

flik meny steg5

#menu ul li:hover{
background:#bed73e;
z-index:800;
}

Nu lägger sig den överst och ändrar färg.

Nu är menyn i princip klar men jag vill ändra färger på länkarna och ta bort linjen under länkarna.

flik meny steg6

#menu ul li a{
color:#FFF;
text-decoration:none;
}

Nu är allt klart. Testa att göra dina egna menyer.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-04-21 20:57 #1 av: johan-ahlback

Har ändrat min meny på min hemsida till det här nu. kolla på madebyjohan.se

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-04-21 21:11 #2 av: IdaL

#1 Snyggt! Skrattande och bra artikel!

Anmäl
2010-04-28 00:55 #3 av: MichaelE

Är det css2 eller css3? För mig känner jag inte igen moz eller webkit. Samt stöder alla webbläsare denna css-kodning?

Anmäl
2010-04-28 12:48 #4 av: johan-ahlback

"Jag har använt lite css3 här för att få runda kanter men det fungerar utan också. Så om du inte vill ha rundade kanter så struntar du i de raderna med webkit och moz:"

står det i artikeln. så det är lite css3. och det är bara IE som är lite efter med css3 men det kommer med ie9.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.