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:

• Home
• contact
• feedback
• Twitter
• madebyjohan

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:

#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:

#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:

#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.

#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.

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

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