CSS-meny

CSS för IE och quirks
Meny med CSS - grunderna
Egen bild i punktlista
Bakgrundsbild i punktlista
Bakgrundsfärg och kantlinje
Bakgrundsbild och kantlinje
Bakgrundsbild med OnMouseOver
Horisontella menyer
Huvudmeny och undermenyer
Relativa eller absoluta sökvägar i länkar?
Gå vidare: CSS-meny med PHP include »
Gå vidare: CSS-menyer, färdiga mallar »

OBS! Innan du börjar använda de menyer som finns i denna guide är det viktigt att du har grundkunskaper i CSS » och då framförallt i CSS positionering » . Att bara använda menymallarna som de är ger ingen egen och unik layout och det är ju ganska meningslöst eller hur? Utgå ifrån mallarna och anpassa dem efter dina egna behov så får du din egen personliga design.

Vad är CSS och varför ska du använda det?

Innehåll och struktur
CSS - (Cascading Style Sheets) är stilmallar som tillåter både den som skapar dokument och den som läser dem att använda sin egen stilmall. I praktiken har CSS använts till att formge dokument när det gäller färg, teckensnitt, justering av text och objekt mm. En enda CSS-mall kan styra tusentals dokument och det är då enkelt att ändra formateringen genom att det bara i CSS-mallen. CSS har tagit HTML ett steg längre och möjliggjort formateringar och effekter som inte fanns i HTML standarden. En av fördelarna med CSS är att flera mallar kan användas och de har då företräde inbördes så att en "huvudmall" med de övergripande formateringarna kan ersättas på en lägre nivå av en "lokal mall" som då gäller före huvudmallen. CSS är liksom XML/XHTML ett steg mot att separera innehåll och struktur i dokument. All formatering bör ske i externa mallar vilket gör att mängden kod i själva dokumentet minskar avsevärt och gör att sidorna laddas snabbare i webläsaren. Då samma mall används för varje dokument behöver inte webläsaren läsa in formateringsanvisningar på nytt varje gång en ny sida anropas.

Tillgänglighet
En målsättning med CSS är att läsaren ska kunna påverka utseendet av dokumentet när sidorna läses i webläsaren vilket inte alltid har varit populärt bland författarna av dokumenten då förändringar kan påverka webplatsens layout. Detta har i praktiken inneburit att vissa grupper har utestängts från att använda många platser på Internet. Syn- och hörselskadade och andra har haft svårigheter att ta del av innehåll på sidorna trots att det finns programvaror för tolkning av innehåll på websidor. Tillgänglighet är ett av ledorden när framtidens webplatser ska utformas och då gäller detta inte bara de som har svårt att läsa dokumenten på en PC. Ett av målen för W3C är att göra webbaserat innehåll tillgängligt på fler plattformar än PC. Det kan vara för PDA (handdator), mobiltelefoner, enheter för talsyntes och punktskrift (Braille). Genom att strukturera dokumenten på rätt sätt ska alltså både synskadade och hörselskadade kunna ta del av innehållet. Det innebär att många webplatser som byggts med layout som första prioritet inte fungerar om de använder tex Frames, Iframes, Imagemaps, java, javascript, nästlade tabeller, bilder utan ALT-text, GIF-animationer, Flash, Shockwave, PDF-dokument osv. Många funktioner som används idag går då¨alltså bort helt... (läs mer om W3C och webstandards »)

CSS levels
CSS finns specificerat i olika "nivåer" där CSS1 (1996) innehåller information om relativt enkel formatering som bakgrundsfärger, bakgrundsbilder, teckensnitt och justering av text. CSS2 (1998) går ett steg längre och ger möjlighet att formge hela dokument med positionerade rektangulära områden (boxar) som tidigare bara varit möjligt med tabeller (tables). CSS2 har förbättrats och finns i version CSS21 men kommer att ersättas av CSS3 som idag inte är helt färdig. Håll dig uppdaterad om alla specifikationer i CSS genom att besöka W3C för mer information: CSS1 » - CSS2 » - CSS3 »

TIPS! CSS har begränsat stöd i framförallt äldre webläsare men även i IE6. Den webläsare som bäst följer specifikationerna från W3C är Firefox - detta gäller framförallt CSS2- positionering ». Använd i första hand Firefox när du testar dina CSS-layoter för att se det korrekta resultatet och anpassa sedan koden till IE vid behov. Läs mer om Firefox och andra webläsare här »

Läs mer om: grunderna i CSS » - CSS-effekter » - CSS-positionering » - CSS-layout »

CSS för IE och quirks

CSS ska fungera fullt ut i en perfekt värld men webläsarnas värld är inte perfekt. Internet Explorer visar inte CSS korrekt enligt W3C (läs mer om W3C och docstandards ») och detta gäller även IE6. Tidigare versioner av IE är ännu sämre och om du tänker ta hänsyn till alla användare av IE<6 så måste du använda dig av korrekt doctype men även olika "hack" för att få det att fungera. I denna guide visas inte hur du anpassar CSS till IE<6 eller andra webläsare och vi hänvisar istället till resurser som visar metoderna:

Meny med CSS - grunderna

CSS kan användas till menyer och är då i grunden vanliga listor <LI> som i kombination med positionerade boxar, bakgrundsbilder och andra egenskaper bygger en meny.

I exemplen nedan visas hur du utformar en vanlig punktlista till en menylayout och detta förutsätter att du har grundkunskaper i CSS » och då framförallt i CSS positionering » innan du följer guiden.

CSS-menyn utgår från en vanlig punktlista som kan ha de olika punkttyperna nedan:

klicka här för att se exemplet »

En vanlig punktlista behöver ingen CSS-formatering. I exemplet nedan är listan förberedd för länkning med en "dummylänk" i form av tecknet "#" som senare kan bytas ut till den riktiga sökvägen för länken:

<ul>
<li><a href="#">Meny 1</a></li>
<li><a href="#">Meny 2</a></li>
<li><a href="#">Meny 3</a></li>
<li><a href="#">Meny 4</a></li>
<li><a href="#">Meny 5</a></li>
</ul>

Punktlistan kan ha punkttypen "circle", "square" eller "none" och anges med CSS-kod. I exemplet nedan används punkttypen square och dessutom har egenskaper för länkarna angivits med
a:link - a:visited - a:hover - a:active

a:link{color: #000000; text-decoration: none;}
a:visited{color: #000000; text-decoration: none;}
a:hover{color: #999999;}
a:active{text-decoration: underline;}

#meny li{list-style: square;}

<body>
<ul id="meny">
<li><a href="#">Meny 1</a></li>
<li><a href="#">Meny 2</a></li>
<li><a href="#">Meny 3</a></li>
<li><a href="#">Meny 4</a></li>
<li><a href="#">Meny 5</a></li>
</ul>
</body>

klicka här för att se exemplet »

Egen bild i punktlista

Ett alternativ till att använda de punkttyper som finns är att skapa egna punkter i form av bilder. I exemplet nedan används bilden "symbol.gif":

klicka här för att se exemplet »

#meny li{list-style-image: url(symbol.gif);}

Bakgrundsbild i punktlista

Nästa steg i användningen av bilder är att använda en bakgrundsbild. Fördelen är att du kan ange egna värden för placering av listans innehåll i förhållande till punkten (bakgrundsbilden).

klicka här för att se exemplet »

Här används två CSS-mallar där "#meny" används till att ange att ingen "standardpunkt" ska användas. Dessutom anges marginal och padding till "0" vilket förbereder listan för att senare placeras i en positionerad box (där andra värden för marginal och padding kommer att anges). Mallen "#meny li" innehåller formatering av bakgrundsbilden som används som punkt i listan. I exemplet nedan är bakgrundsbilden 9 pixlar bred och genom att ange "padding 10px" placeras textinnehållet i listan intill listpunkten. Justeringen "left" och "center" gör att bakgrundsbilden placeras rätt vertikalt och horisontellt i förhållande till listans innehåll. Viktigt är också att ange "no-repeat" för att inte bakgrundsbilden ska upprepas vertikalt och horisontellt.

#meny{margin-left: 0; padding-left: 0; list-style: none;}
#meny li {padding-left: 10px; background: url(symbol.gif) no-repeat left center;}

OBS! I menyexemplen används i första hand relativa enheter vid måttsättningen för att göra menyerna skalbara och tillgängliga på flera plattformar än PC - läs mer om enheter här »

Med bakgrundsbilder i kombination med läget "hover" kan du skapa en rollover-effekt i menyn. Det krävs minst två bilder - en för normalt läge och en för "onMouseOver-läget". I exemplet används dessutom en tredje bild för att visa aktiv sida då menyvalet är nedtonat.

klicka här för att se exemplet »

Använd dina egna bilder eller spara bilderna som används i exemplet:

symbol.gif

symbol-over.gif

symbol-active.gif

Om du använder samma menyer på flera sidor bör CSS-koden placeras i en extern mall (läs mer om tillämpning i grunderna i CSS »)

Bakgrundsbilderna och övriga egenskaper kan naturligtvis tillämpas direkt på märket <UL> och <LI> men genom att istället låta en container få formateringen så gäller den endast för menyn och du kan då ha flera andra listor och/eller menyer i samma dokument. Mallen med namnet "#menycontainer" används tillsammans med elementen <a> - <ul> - <li>. Dessutom används den anpassade mallen "a#current" som anger bakgrundsbild och textfärg för länk på aktiv sida.

#menycontainer ul{list-style-type: none;}

#menycontainer ul li a{background: transparent url("symbol.gif") left center no-repeat; padding-left: 15px; font-size: 80%; text-decoration: none; color: #000000;}

#menycontainer ul li a:hover{background: transparent url("symbol-over.gif") left center no-repeat;}

#menycontainer ul li a#current{background: transparent url("symbol-active.gif") left center no-repeat; color: #cccccc;}

<body>
<div id="menycontainer">
<ul id="meny">
<li><a href="#" id="current">Meny 1</a></li>
<li><a href="#">Meny 2</a></li>
<li><a href="#">Meny 3</a></li>
<li><a href="#">Meny 4</a></li>
<li><a href="#">Meny 5</a></li>
</ul>
</div>
</body>

klicka här för att se CSS-mallen »

Använda "current" för aktiv sida

När du använder selektoren "a#current" för att ange egenskaper för aktiv sida måste du ange den i nytt listelement för varje ny sida som använder menyn.

I exemplet nedan är Sidan 2 den aktiva sidan och id="current" är nu flyttat till meyvalet "Meny 2":

TIPS! Läs mer i guiden CSS-meny med PHP include » om hur du kan använda PHP för att ange aktiv sida.

Bakgrundsfärg och kantlinje

Förutsättningen för att använda en bakgrundsfärg och en eventuell rollover-färg är att listelementen konverteras till block med koden "display:block". Längden på blocken bör anges men inte höjden om menyhöjden ska förändras i förhållande till textinnehållet. Exemplet nedan använder rollover-läge (a:hover) och bakgrundsfärg för länk till aktiv sida:

klicka här för att se exemplet »

Mallen #meny används för att ange bakgrundsfärg, bredd och nedre kantlinje. De övriga kantlinjerna anges för varje länkat listelement #meny a som också innehåller information om avstånd mellan kanter och textinnehåll (padding):

#meny{margin: 0; padding: 0; width: 18em; list-style-type: none; font-size: 70%; background: #CC9999; border-bottom: 1px solid #996666;}

#meny a{ display: block; width: auto; height: 100%; padding-left: 0.25em; padding-top: 0.25em; padding-bottom: 0.25em; text-decoration: none;
border-top: 1px solid #996666; border-right: 1px solid #996666; border-left: 1px solid #996666;}

#meny a:link{color: #ffffff;}
#meny a:visited{color: #ffffff;}
#meny a:hover{background: #996666;}
#meny a#current{background: #FFCC66; color: #000000;}

klicka här för att se CSS-mallen »

Ett avstånd mellan menyvalen (listelementen) så att de liknar fristående "knappar" skapas med en bottenmarginal:

klicka här för att se exemplet »

Mallen #meny li har som enda uppgift att ange bottenmarginalen. Hela kantlinjen anges nu endast i mallen #meny a då varje menyval ska ha en ram.

#meny{margin: 0; padding: 0; width: 18em; list-style-type: none; font-size: 70%;}

#meny li{margin-bottom: 0.25em;}

#meny a{display: block; width: auto; height: 100%; background: #CC9999; padding: 0.25em; text-decoration: none; border: 1px solid #996666;}

#meny a:link{color: #ffffff;}
#meny a:visited{color: #ffffff;}
#meny a:hover{background: #996666;}
#meny a#current{background: #FFCC66; color: #000000;}

klicka här för att se CSS-mallen »

Bakgrundsbild och kantlinje

En bakgrundsbild i form av mönster eller toning som i exemplet kräver inte att bilden är exakt lika stor som blocket med textinnehållet. Det är ändå en bra idé att göra den större så att bilden inte upprepas ( om det inte är ett mönster som ju ska upprepas). Den tonade bilden i exemplet nedan är något högre än menyinnehållet och upprepas åt höger:

klicka här för att se exemplet »

Använd dina egna bilder eller spara bilderna som används i exemplet:

bg-toning.gif

bg-toning_over.gif

Mallarna är lika som i tidigare exempel men viktigt är att bakgrundsfärgen anges till "transparent" för att bakgrundsbilden ska synas.

#meny{ width: 18em; margin: 0; padding: 0; list-style-type: none; font-size: 70%;}

#meny li{margin-bottom: 0.25em;}

#meny a{display: block; width: auto; height: 100%;
background: transparent url(bg-toning.gif);
padding: 0.25em; text-decoration: none; border: 1px solid #996666;}

#meny a:link{color: #333333;}
#meny a:visited{color: #333333;}
#meny a:hover{background: transparent url(bg-toning_over.gif);}
#meny a#current{background: #FFCC66; color: #000000;}

klicka här för att se CSS-mallen »

Bakgrundsbild med OnMouseOver

En "rollover-knapp" som byts ut vid OnMouseOver visas vid läget a:hover och det behövs då bara en bild som ersätter originalbilden när muspekaren förs över menyvalet. Detta kan vara ett alternativ till att använda javascript » med OnMouseOver-funktion. OBS! Bilderna som används i rollover-läget förladdas inte med CSS ("preload" i javascript) och det kan innebära en fördröjning innan bilden visas. Om du använder många bilder eller bilder med stor filstorlek kan det vara ett bättre alternativ att använda javascript. Den stora fördelen med CSS är att CSS-koden är betydlig kortare än javascriptkoden.

klicka här för att se exemplet »

Använd dina egna bilder eller spara bilderna som används i exemplet:

knapp.gif	knapp_over.gif

Menyn i exemplet är inte skalbar som i tidigare exempel. Det krävs exakta mått för att menyblockens mått ska stämma med bildens storlek och därför används enheten pixlar i exemplet.

#meny{width: 192px; margin: 0px; padding: 0; list-style-type: none; font-size: 11px;}

#meny a{display: block; width: auto; height: 25px; background: transparent url(knapp.gif) no-repeat; text-decoration: none; padding: 5px 0 5px 10px;}

#meny a:link{color: #663333;}
#meny a:visited{color: #663333;}
#meny a:hover{background: transparent url(knapp_over.gif) no-repeat;}
#meny a#current{color: #E6CCCC;}

klicka här för att se CSS-mallen »

Horisontella menyer

Den horisontella CSS-menyn är precis som den vertikala CSS-menyn i grunden en punktlista (se ovan ») där punkterna ligger i linje horisontellt.

klicka här för att se exemplet »

Punktlistans element placeras i horisontell linje genom att ange display: inline och standardpunkterna tas bort med list-style-type: none i mallen "#meny".

a:link{color: #000000; text-decoration: none;}
a:visited{color: #000000; text-decoration: none;}
a:hover{color: #999999;}
a:active{text-decoration: underline;}

#meny li{display: inline; list-style-type: none;}

<body>
<ul id="meny">
<li><a href="#">Meny 1</a></li>
<li><a href="#">Meny 2</a></li>
<li><a href="#">Meny 3</a></li>
<li><a href="#">Meny 4</a></li>
<li><a href="#">Meny 5</a></li>
</ul>
</body>

Bakgrundsfärger anges för listelementen på samma sätt som i en vanlig vertikal punktlista (avståndet mellan listelementen är standard och inte angivet i mallen).

klicka här för att se exemplet »

Marginal i förhållande till sidans kanter och andra objekt samt font-egenskaper anges i mallen #meny. Avstånd mellan menytexten och bakgrundsfärgens ytterkant anges i mallen #meny a som "padding". Övriga egenskaper för länkarna har angivits med a:link - a:visited - a:hover - a:active.

#meny{margin-left: 0; padding-left: 0; font-size: 70%;}
#meny li{display: inline; list-style-type: none;}
#meny a{padding: 0.25em 1em; text-decoration: none;}

#meny a:link{color: #ffffff; background: #CC9999;}
#meny a:visited{color: #ffffff; background: #CC9999;}
#meny a:hover{background: #996666;}
#meny a#current{background: #FFCC66; color: #000000;}

<body>
<ul id="meny">
<li><a href="#">Meny 1</a></li>
<li><a href="#">Meny 2</a></li>
<li><a href="#">Meny 3</a></li>
<li><a href="#">Meny 4</a></li>
<li><a href="#">Meny 5</a></li>
</ul>
</body>

klicka här för att se CSS-mallen »

För mer avancerade meny-layouter används containers (boxar) för bättre kontroll och boxarna kan dessutom placeras positionerade i förhållande till varandra - läs mer om CSS positionering »

klicka här för att se exemplet »

Mallnamnet som används är här #menycontainer och omsluter hela listan med <div> till skillnad från tidigare exempel där mallen #meny var tillämpad på själva listan <UL>. Här används "float" för att placera listelementen över bakgrundsfärgerna. Notera att bakgrundsfärgen som gäller alla menyval nu är angiven i mallen #menycontainer ul a istället för som tidigare i varje status för länk; a:link och a:visited. Avståndet mellan menyvalen kan nu anges med "margin-right" istället för den standardavstånd som gällde i det föregående exemplet.

#menycontainer ul{float: left; margin-left: 0; padding-left: 0; font-size: 70%;}
#menycontainer li{display: inline;}
#menycontainer ul a{float: left; text-decoration: none; background: #CC9999; margin-right: 0.5em; padding: 0.3em 2em;}

#menycontainer a:link{color: #ffffff;}
#menycontainer a:visited{color: #ffffff;}
#menycontainer a:hover{background: #996666;}
#menycontainer a#current{background: #FFCC66; color: #000000;}

<body>
<div id="menycontainer">
<ul>
<li><a href="#" id="current">Meny 1</a></li>
<li><a href="#">Meny 2</a></li>
<li><a href="#">Meny 3</a></li>
<li><a href="#">Meny 4</a></li>
<li><a href="#">Meny 5</a></li>
</ul>
</div>
</body>

klicka här för att se CSS-mallen »

Containern som ju inte har något innehåll (förutom menyn) kan även fungera som menylist som sträcker sig över hela sidan eller har en angiven bredd.

klicka här för att se exemplet »

Notera att bakgrundsfärgen som gäller alla menyval nu är angiven i mallen #menycontainer ul för att gälla för menylisten som sträcker sig bakom menyn. Inget avstånd mellan menyvalen finns i exemplet men kan naturligtvis anges om du har olika färger på menylisten och menyvalen.

#menycontainer ul{ float: left; margin-left: 0; padding-left: 0; width: 100%; background: #CC9999; font-size: 70%;}
#menycontainer li{display: inline;}
#menycontainer ul a{float: left; text-decoration: none; padding: 0.3em 2em;}

#menycontainer a:link{color: #ffffff;}
#menycontainer a:visited{color: #ffffff;}
#menycontainer a:hover{background: #996666;}
#menycontainer a#current{background: #FFCC66; color: #000000;}

klicka här för att se CSS-mallen »

Huvudmeny och undermenyer

Undermenyer skapas i en punktlista med flera nivåer. Varje nivå inleds med <UL> och olika mallar kan tillämpas för de olika nivåerna i listan. Exemplet nedan är en vanlig oformaterad lista som innehåller länkade listelement:

När listan kopplas till mallen "meny.css" blir den en meny:

klicka här för att se exemplet »

Formateringen är likadan som i tidigare menyexempel men undermenyn har mallnamnet "#meny ul a" där ul avser en undernivå i listan. Har du flera undernivåer används mallnamn som tex "#meny ul ul a". Om du vill ange egenskaper för aktiv länk använder du mallen "#meny a#current" till huvudmenyer och #meny a#subcurrent" till undermenyer.

<body>
<div id="menycontainer">
<ul id="meny">
<li><a href="sida1.htm">Meny 1 </a></li>
<li><a href="sida2.htm" id="current">Meny 2</a>
     <ul>
     <li id="subactive"><a href="sida2a.htm" id="subcurrent">Meny 2a</a></li>
     <li><a href="sida2b.htm">Meny 2b</a></li>
     <li><a href="sida2c.htm">Meny 2c</a></li>
     </ul>
</li>
<li><a href="sida3.htm">Meny 3 </a></li>
<li><a href="sida4.htm">Meny4</a></li>
<li><a href="sida5.htm">Meny 5 </a></li>
</ul>
</div>
</body>

#menycontainer{margin-left: 2em; width: 18em; font-size: 70%; border-top: 1px solid #cccccc; border-left: 1px solid #CCCCCC; border-right: 1px solid #cccccc;}

#meny{margin: 0; padding: 0; list-style-type: none;}
#meny a{display: block; margin: 0; padding: 0.3em; background: #006699; padding: 0.3em; text-decoration: none; height: 100%; border-bottom: 1px solid #cccccc;}
#meny ul{list-style-type: none;}
#meny ul a{margin: 0; padding: 0.3em; background: #3399cc;}

#meny a:link{color: #ffffff;}
#meny a:visited{color: #ffffff;}
#meny a:hover{background: #999999;}
#meny a#current{font-weight: bold;}
#meny a#subcurrent{font-weight: bold;}

Relativa eller absoluta sökvägar i länkar?

När du inkluderar samma meny på alla sidor i din webplats kan du använda länkar med sökvägar som är relativa till dokumentet som i exemplet ovan. Det fungerar om alla sidor som använder menyn ligger i rotmappen (root folder) på din webserver men inte om du har dina sidor i undermappar.

Sökvägar relativa till dokumentet

Om sidorna ligger i undermappar och länkarna har sökvägar som är relativa till dokumentet kan menyn se ut så här i "sida6.php". (fungerar inte om du använder den i "sida5.php" eller någon av de övriga sidorna eftersom sökvägen då blir fel):

Absoluta sökvägar

Du kan använda absoluta sökvägar som innehåller domännamnet men om du har flera domännamn som pekar till samma webplats fungerar inte detta. I exemplet ovan är den absoluta sökvägen till "sida6.php":

http://www.webdesignskolan.se/mapp/undermapp6/sida6.php

Den absoluta sökvägen fungerar inte om besökaren använder ett annat av våra domännamn som tex:
www.webdesignskolan.com eller www.webdesignskolan.nu

Sökvägar relativa till dokumentroten (site root)

Lösningen är att använda sökvägar som är relativa till dokumentroten (site root) för att vara säker på att den inkluderade menyn fungerar i alla sidor i din webplats oavsett vilket domännamn som används.

Menyn kan då se ut så här:

Gå vidare: CSS-meny med PHP include »

TIPS! Använd gärna våra färdiga mallar som du hittar i guiden CSS-layout och CSS-meny »