CSS (Cascading Style Sheets)
TIPS! Läs guiden Responsiv meny » för anpassning till mobila enheter och smartphones.
Meny med CSS - grunderna
CSS kan användas till menyer och är då i grunden vanliga listor <LI>
som i kombination med positionerade DIV-boxar, bakgrundsbilder
och andra egenskaper bygger en meny.
I exemplen nedan visas hur du utformar
en vanlig punktlista till en meny och det är en fördel
att du har grundkunskaper
i CSS » och då framförallt i CSS
positionering » innan du följer guiden.
Meny med punktlista
klicka
här för att se exemplet 
I exemplet ä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.
Så här kan HTML-koden se ut:
<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>
Punktlistan kan ha olika typer av punkter som tex 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 pseudo-classerna:
a:link
a:visited
a:hover
a:active
Så här kan CSS-koden se ut:
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #999;
}
a:active {
text-decoration: underline;
}
#meny li {
list-style: square;
}
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
Så här kan CSS-koden se ut:
#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 margin 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.
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.
Så här kan CSS-koden se ut:
#meny {
margin: 30px;
padding: 0;
list-style: none;
}
#meny li {
padding: 0 0 0 25px;
background: url("menyexempel1/symbol.gif") no-repeat left center;
}
Bakgrundsbild med rollover-effekt
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 hover-läget. I exemplet används
dessutom en tredje bild för att visa aktiv sida:
klicka
här för att se exemplet
Använd dina egna bilder eller spara bilderna som används i
exemplet:
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 »)
Mallen med namnet #meny
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.
Notera att textfärgen anges med RGBa istället för Hex-värde. Läs mer om RGBa här »
Så här kan HTML-koden se ut:
<body>
<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>
</body>
Så här kan CSS-koden se ut:
/* Listan <UL> med knapparna */
ul {
margin: 30px;
padding: 0;
}
/* Listelementen <LI> med knapparna */
#meny li {
list-style: none;
margin: 5px 0 10px 0;
}
#meny li a {
margin: 0;
padding: 5px 10px 5px 25px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 20px;
color: rgba(66,48,1,1);
background: transparent url("symbol.gif") left center no-repeat;
}
#meny a:hover {
cursor: pointer;
background: transparent url("symbol-over.gif") left center no-repeat;
}
#meny a:link, #meny a:visited {
color: rgba(0,0,0,1);
text-decoration: none;
}
#meny a#current {
background: transparent url("symbol-active.gif") left center no-repeat;
}
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":
<div id="menycontainer">
<ul id="meny">
<li><a href="#">Meny
1</a></li>
<li><a href="#" id="current">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>
OBS! Du måste ändra koden i varje sida som använder menyn!
Bakgrundsfärg och kantlinje
Förutsättningen för att använda en bakgrundsfärg och
en eventuell hover-färg är att listelementen konverteras till block
med 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 ett hover-läge (a:hover) och
bakgrundsfärg för länk till aktiv sida:
klicka
här för att se exemplet
Så här kan HTML-koden se ut:
<ul id="meny">
<li><a href="sida1.php" id="current">Första menyvalet</a></li>
<li><a href="sida2.php">Andra menyvalet</a></li>
<li><a href="sida3.php">Tredje menyvalet</a></li>
<li><a href="sida4.php">Fjärde näst sista menyvalet</a></li>
<li><a href="sida5.php">Femte och sista menyvalet</a></li>
</ul>
Elementet #meny li a används för att ange bakgrundsfärg, bredd, kantlinje med runda hörn och skugga.
Runda hörn (border-radius) och skugga (box-shadow) är CSS3. Läs mer om detta i guiden CSS effekter »
Notera att färger anges med RGBa istället för Hex-värde. Läs mer om RGBa här »
Så här kan CSS-koden se ut:
/* Listan <UL> med knapparna */
ul {
margin: 0;
padding: 0;
}
/* Listelementen <LI> med knapparna */
#meny li {
list-style: none;
margin: 5px 0 10px 0;
}
#meny li a {
display: block;
width: 250px;
margin: 0;
padding: 5px 10px 5px 10px;
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 20px;
color: rgba(66,48,1,1);
border-radius: 5px;
border: 1px solid rgba(105,181,50,1);
background: rgba(122,199,67,1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 3px rgba(0,0,0,0.70);
}
#meny li a:hover {
cursor: pointer;
background: rgba(178,232,139,1);
color: rgba(0,0,0,1);
}
#meny a:link, #meny a:visited {
color: rgba(255,255,255,1);
text-decoration: none;
}
#meny a:active {
color: rgba(250,191,12,1);
}
#meny a#current {
background: rgba(85,137,48,1);
}
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 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
Punkterna i listan tas bort med list-style-type:
none
Så här kan CSS-koden se ut:
a:link {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #999;
}
a:active {
text-decoration: underline;
}
#meny {
margin: 30px;
padding: 0;
list-style: none;
}
#meny li {
display: inline;
list-style-type: none;
padding: 0 20px 0 0;
}
Så här kan HTML-koden se ut:
<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ärg, Exempel 1
Bakgrundsfärg anges för listelementen
på samma sätt som i en vanlig vertikal punktlista ovan.
klicka här
för att se exemplet
Marginal i förhållande till sidans kanter och andra objekt samt
font-egenskaper anges i elementet UL
Elementet #meny li a används för att ange bakgrundsfärg, bredd, kantlinje med runda hörn och skugga.
Runda hörn (border-radius) och skugga (box-shadow) kan du läsa mer om i guiden CSS effekter »
Notera att textfärgen anges med RGBa istället för Hex-värde. Läs mer om RGBa här »
Så här kan CSS-koden se ut:
/* Listan <UL> med knapparna */
ul {
margin: 30px 0 30px 0;
padding: 0;
}
/* Listelementen <LI> med knapparna */
#meny li {
display: inline;
list-style: none;
}
#meny li a {
margin: 0 5px 0 0;
padding: 5px 20px 5px 20px;
text-align: center;
white-space: nowrap;
line-height: 50px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 20px;
color: rgba(66,48,1,1);
border-radius: 5px;
border: 1px solid rgba(105,181,50,1);
background: rgba(122,199,67,1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 3px rgba(0,0,0,0.70);
}
#meny li a:hover {
cursor: pointer;
background: rgba(178,232,139,1);
color: rgba(0,0,0,1);
}
#meny a:link, #meny a:visited {
color: rgba(255,255,255,1);
text-decoration: none;
}
#meny a:active {
color: rgba(250,191,12,1);
}
#meny a#current {
background: rgba(85,137,48,1);
}
klicka
här för att se CSS-mallen
Så här kan HTML-koden se ut:
<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ärg, Exempel 2
klicka
här för att se exemplet
Notera att bakgrundsfärgen som gäller alla menyval
nu är angiven i elementet UL och avståndet mellan menyvalen kan anges med padding.
CSS-koden:
/* Listan <UL> med knapparna */
ul {
width: 650px;
text-align: center;
margin: 30px 0 30px 10px;
padding: 10px 0 10px 0;
border-radius: 5px;
border: 1px solid rgba(105,181,50,1);
background: rgba(122,199,67,1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 3px rgba(0,0,0,0.50);
}
/* Listelementen <LI> med knapparna */
#meny li {
display: inline;
list-style: none;
}
#meny li a {
margin: 0 5px 0 0;
padding: 5px 20px 5px 20px;
text-align: center;
white-space: nowrap;
line-height: 50px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 20px;
color: rgba(66,48,1,1);
border-radius: 5px;
}
#meny li a:hover {
cursor: pointer;
background: rgba(178,232,139,1);
color: rgba(0,0,0,1);
}
#meny a:link, #meny a:visited {
color: rgba(255,255,255,1);
text-decoration: none;
}
#meny a:active {
color: rgba(250,191,12,1);
}
#meny a#current {
background: rgba(85,137,48,1);
}
klicka
här för att se CSS-mallen
Så här kan HTML-koden se ut:
<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>
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:
Så här kan HTML-koden se ut:
<ul>
<li><a href="sida1.php">Meny 1 </a></li>
<li><a href="sida2.php">Meny2</a>
<ul>
<li><a href="sida2a.php">Meny 2a</a></li>
<li><a href="sida2b.php">Meny 2b</a></li>
<li><a href="sida2c.php">Meny 2c</a></li>
</ul>
</li>
<li><a href="sida3.php">Meny 3 </a></li>
<li><a href="sida4.php">Meny4</a></li>
<li><a href="sida5.php">Meny 5 </a></li>
</ul>
När listan kopplas till mallen "meny.css" blir den en meny:
klicka här
för att se exemplet
Om du vill ange egenskaper för aktiv länk använder
du elementet #meny a#current till huvudmenyer och #meny a#subcurrent
till undermenyer. Tilldela den aktuella sidans länk ett ID med de namnen i listan.
Så här kan HTML-koden se ut:
<div id="menycontainer">
<ul id="meny">
<li><a href="sida1.php">Meny 1 </a></li>
<li><a href="sida2.php" id="current">Meny
2</a>
<ul>
<li><a
href="sida2a.php" id="subcurrent">Meny
2a</a></li>
<li><a href="sida2b.php">Meny
2b</a></li>
<li><a href="sida2c.php">Meny
2c</a></li>
</ul>
</li>
<li><a href="sida3.php">Meny 3 </a></li>
<li><a href="sida4.php">Meny4</a></li>
<li><a href="sida5.php">Meny 5 </a></li>
</ul>
</div>
OBS! Du måste ändra koden för aktiv sida i varje sida som använder menyn!
Formateringen är likadan som i tidigare menyexempel men undermenyn har mallnamnet #meny li li a där li avser en undernivå i listan.
Har du flera undernivåer används mallnamn som tex #meny li li li a.
Notera att margin kan anges med olika värden för att styra hur knapparna i undermenyn ska placeras.
Så här kan CSS-koden se ut:
/* Listan <UL> med knapparna */
ul {
margin: 0;
padding: 0;
}
/* Listelementen <LI> med knapparna */
#meny li {
list-style: none;
}
/* HUVUDMENY */
#meny li a {
display: block;
width: 250px;
margin: 10px 0 10px 0;
padding: 5px 10px 5px 10px;
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 20px;
color: rgba(66,48,1,1);
border-radius: 5px;
border: 1px solid rgba(105,181,50,1);
background: rgba(122,199,67,1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 3px rgba(0,0,0,0.50);
}
/* UNDERMENY */
#meny li li a {
margin: 5px 0 0 10px;
padding: 5px 10px 5px 0;
border: 1px solid rgba(0,0,0,1);
background: rgba(138,198,94,1);
}
#meny li a:hover {
cursor: pointer;
background: rgba(178,232,139,1);
color: rgba(0,0,0,1);
}
#meny a:link, #meny a:visited {
color: rgba(255,255,255,1);
text-decoration: none;
}
#meny a:active {
color: rgba(250,191,12,1);
}
#meny a#current {
margin: 5px 0 0 0;
background: rgba(85,137,48,1);
}
klicka
här för att se CSS-mallen
Relativa eller absoluta sökvägar i länkar?
När du inkluderar samma meny på alla sidor i din webbplats 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 samma mapp som tex rotmappen (root folder) på din webbserver men inte om du har dina sidor i olika 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":
<ul id="meny">
<li><a href="
../index.php">Meny 1</a></li>
<li><a href="
../undermapp2/sida2.php">Meny 2</a></li>
<li><a href="
../undermapp3/sida3.php">Meny 3</a></li>
<li><a href="
../undermapp4/sida4.php">Meny 4</a></li>
<li><a href="
../undermapp5/sida5.php">Meny 5</a></li>
<li><a href="sida6.php">Meny 6</a></li>
</ul>
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 webbplats fungerar inte detta. I exemplet ovan är den absoluta sökvägen till "sida6.php":
https://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
www.webdesignskolan.nu
Sökvägar relativa till dokumentroten (site root)
En bra lösning ä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 webbplats oavsett vilket domännamn som används.
Menyn kan då se ut så här:
<ul id="meny">
<li><a href="
/index.php">Meny 1</a></li>
<li><a href="
/mapp/undermapp2/sida2.php">Meny 2</a></li>
<li><a href="
/mapp/undermapp3/sida3.php">Meny 3</a></li>
<li><a href="
/mapp/undermapp4/sida4.php">Meny 4</a></li>
<li><a href="
/mapp/undermapp5/sida5.php">Meny 5</a></li>
<li><a href="
/mapp/undermapp6/sida6.php">Meny 6</a></li>
</ul>
Gå vidare: CSS-meny med PHP include »
TIPS! Läs guiden Responsiv meny » för anpassning till mobila enheter och smartphones.
Logga in
skriv ut »