Meny med listor i css

[Senare har jag gjort en video på ungefär samma material.]

Nedan följer en lista som vi ska jobba med för att göra en meny med hjälp av css. Koden är hämtad från listamatic. Där kan man nämligen hämta hem grunden till mängder av olika menyer. Alla är utformade från samma html-kod. Det är bara css som skiljer. Ett utmärkt sätt att fördjupa sina kunskaper i css.

Nedan ser du html-koden.

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

Jag ändrar inte de engelska beteckningarna, eftersom de används på listamatic, och det är smidigt att jobba med samma. Det underlättar när ni använder färdiga menyer därifrån, som ni själva vill justera.

Upplägget bygger på att man gör en divtagg med hela navigeringen. Den sker i en oordnad lista, ul. Den får en id="navlist" för att man ska kunna ställa egenskaper via css.

I menyn utgörs varje länk av en listpunkt, li. Den aktiva länken får två extra attribut. Det ena är ett id=" active" i li och sen även ett id="current" i a-taggen. På detta sätt har man möjlighet att påverka utseendet av den aktiva länken, dvs. markera den sida man befinner sig på.

Baksidan av detta är att man då behöver flytta värdet för den aktiva länken på de olika sidorna. Men så länge vi jobbar med få sidor är det inga problem. Det uppvägs väl av att vi har möjlighet att se på vilken sida vi befinner oss.

Arbetsflöde för att skapa en meny med bild som symbol

  1. Ta bort margin och padding från ul, som har ett standardvärde i webbläsarna (Internet Explorer och Opera skapar "luft" med margin, medan Safari och Firefox gör det med padding.)
  2. Ta bort list-style-type från ul
    Man kan visserligen använda de vanliga "prickarna" för en lista, men för att utveckla en meny, vill man kunna göra sin egen design, t.ex. med egna symboler. Därför tar vi bort dem.
  3. Gör en bild som passar att ha före i lagom storlek (15 x 15px i exemplet nedan).
  4. Ge plats för bilden i li-taggen, med padding left satt till lagom avstånd, ange länk till bilden och placering av bilden på 50% höjd.
  5. Justera stilen på länkarna som det passar.

I exempelt nedan ligger det en bakgrundsbild, första länken är "current" (den sida man står på). Där har jag även ändrat utseendet på musen, för att "fejka" att det inte är någon länk (hos Sitepoint kan du se hur du ändrar utseendet på musen. Du kan även enkelt testa de olika värdena för cursor) och även tagit bort understrykningen för att betona detta.

Använd en bild för olika menybakgrunder

Man kan även jobba med bilder som bakgrund till hela menyn och skapa tydliga effekter för hover-läget. I Demo 2 har jag använt en längre bakgrundsbild, där första delen syns i normalläget, och där den andra delen syns när musen förs över. Effekten kan fås genom att ändra värdet för background-position. I normalläget är det left och middle, men när man för musen över är det right och middle.

Titta i sidkoden för att se css.