41 besökare, 2 medlemmar och 2 Studenter är online nu
Loopia

Webdesign och HTML

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 Öppnas i nytt fönster (Open in new window) 

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 Öppnas i nytt fönster (Open in new window) 

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 Öppnas i nytt fönster (Open in new window) 

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 Öppnas i nytt fönster (Open in new window) 

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 »)

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 Öppnas i nytt fönster (Open in new window) 

 

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!

 

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 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 Öppnas i nytt fönster (Open in new window) 

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 Öppnas i nytt fönster (Open in new window) 

 

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 Öppnas i nytt fönster (Open in new window) 

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 Öppnas i nytt fönster (Open in new window) 

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 Öppnas i nytt fönster (Open in new window) 

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 Öppnas i nytt fönster (Open in new window) 

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 Öppnas i nytt fönster (Open in new window) 

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 Öppnas i nytt fönster (Open in new window) 

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 Öppnas i nytt fönster (Open in new window) 

 

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.