Menyer - inledning
Om man vill hålla sig till vad som är korrekt enligt standard ska man använda sig av punktlistor när man skapar menyer i HTML och CSS. Därför kan det vara bra om du först läst in dig lite på hur såna fungerar...
HTML - Listor CSS - Listor
Att känna till det mest grundläggande för länkar är också bra!
HTML - Länkar
Observera också att du måste ha en korrekt DOCTYPE på din sida om du vill skapa en lite mer avancerad meny med CSS.
Läs mer om det här: Doctype & Validering
Varför ska man då använda en lista? Därför att det är ganska listigt! En meny är ju faktiskt en lista av länkar och taggen <ul> är ett block-element - vilket kan vara bra när man positionerar sin meny. I länkarna ska man också absolut ta med attributet "title".
Om man bygger sina sidor korrekt underlättar man för dem som surfar med andra plattformar än datorn. Numera kan man ju till exempel surfa med mobiltelefonen eller en handdator. Dessutom fungerar det mycket bättre för dem som har någon form av handikapp t.ex synskadade. Koden blir helt enkelt mer semantisk ( logisk ) - mer användarvänlig, helt enkelt.
Så småningom kommer man att kunna använda <nl> ( Navigation List ) till sina menyer. Då kommer man att kunna placera länken till sidan direkt i taggen <li>. Men det ligger i framtiden - tills vidare är det punktlistor som gäller!
OBS!
Menyerna är testade i och fungerar på samma sätt i Internet Explorer, Mozilla Firefox, Netscape och Opera - de inte alltför ålderdomliga versionerna. Koderna är standard och fungerar säkert utmärkt i de flesta andra webläsare också - men observera att det inte är testat.
Grunden - En Punktlista
En lista med punkter skrivs mellan <ul> och </ul>. Det som ska listas skrivs mellan <li> och </li>.
Här är koden till en vanlig punktlista:
<ul>
<li>Sida 1</li>
<li>Sida 2</li>
<li>Sida 3</li>
<li>Sida 4</li>
<li>Sida 5</li>
</ul>
|
Och så här ser koden ut med länkar i listan.
<ul>
<li><a href="#" title="Beskrivning 1">Sida 1</a></li>
<li><a href="#" title="Beskrivning 2">Sida 2</a></li>
<li><a href="#" title="Beskrivning 3">Sida 3</a></li>
<li><a href="#" title="Beskrivning 4">Sida 4</a></li>
<li><a href="#" title="Beskrivning 5">Sida 5</a></li>
</ul>
|
• Du ska förstås skriva in sökvägen till de sidor du vill länka till i taggen <a> ovan
- href="#" är bara en tom länk!
Läs mer om hur länkar fungerar här: HTML - Länkar
På sidan skulle koden - utan css - kunna se ut ungefär så här:
Hur man infogar CSS
Fortsättningsvis tänkte jag visa hur man kan skapa en lite mer avancerad meny bit för bit. CSS-koden i exemplen bör du infoga i en extern stilmall eftersom vitsen med en meny är att den ska förekomma på ett antal sidor.
Själva css-koden som förekommer i exemplen nedan skrivs in i en vanlig textfil som ska ha filändelsen: .css.
Du skriver alltså in CSS-koden i ett vanligt textprogram och sparar sidan som t.ex: stilmall.css.
Länken till den externa stilmallen skrivs sedan in mellan <head> och </head> på de sidor du vill ska omfattas av mallen. Det kan alltså vara hur många sidor som helst.
Så här:
<head>
<link rel="stylesheet" href="stilmall.css" type="text/css">
</head>
|
Läs mer om hur det går till att infoga CSS här: Hur infogas CSS?.
Skapa en första Meny steg för steg
Här skapas en enkel meny med endast CSS - inga bilder! Menyn har s.k "hover" eller "mouse-over" effekt - det vill säga att länkarna förändrar utseende när mus-pekaren förs över dem.
Det går såklart bra att ändra färger, teckensnitt o.s.v. i menyn. Men var försiktig med att ändra menyns grundläggande funktioner. Det kanske ser bra ut i den webläsare du har, men i andra kan hela menyn "falla ihop" totalt...
HTML - koden
Till att börja med måste man skapa HTML-koden för Menyn - koden som skrivs in på alla de sidor man vill att Menyn ska förekomma.
För att det ska gå smidigt att stajla menyn med CSS har meny-listan omslutits av en box som också tilldelats ett id som fått namnet: menybox.
I en meny går det bra att använda id - eftersom man kan förutsätta att det bara kommer att förekomma EN meny på varje sida.
Så här:
<div id="menybox">
<ul>
<li><a href="#" title="Beskrivning 1">Sida 1</a></li>
<li><a href="#" title="Beskrivning 2">Sida 2</a></li>
<li><a href="#" title="Beskrivning 3">Sida 3</a></li>
<li><a href="#" title="Beskrivning 4">Sida 4</a></li>
<li><a href="#" title="Beskrivning 5">Sida 5</a></li>
</ul>
</div>
|
På den aktuella sidan behövs ju egentligen ingen länk som pekar på den sidan - eftersom det ju faktiskt är på just den sidan man befinner sig! Den länken kan man då i stället skriva in mellan span-taggar.
På så sätt kan man på ett smidigt sätt ge den aktuella sidans "länk" ett speciellt utseende - vilket gör menyn tydligare för alla.
Dessutom gör man det enklare för många med funktionshinder - eftersom man gör klart att den här listpunkten faktiskt inte innehåller någon länk!
Så här kan "länken" till Sida 1 se ut på just sida1.html:
<div id="menybox">
<ul>
<li><span id="aktuell" title="Denna sida">Sida 1</span></li>
<li><a href="#" title="Beskrivning 2">Sida 2</a></li>
<li><a href="#" title="Beskrivning 3">Sida 3</a></li>
<li><a href="#" title="Beskrivning 4">Sida 4</a></li>
<li><a href="#" title="Beskrivning 5">Sida 5</a></li>
</ul>
</div>
|
Och så här kan länken till Sida 2 se ut på just sida2.html:
<div id="menybox">
<ul>
<li><a href="#" title="Beskrivning 1">Sida 1</a></li>
<li><span id="aktuell" title="Denna sida">Sida 2</span></li>
<li><a href="#" title="Beskrivning 3">Sida 3</a></li>
<li><a href="#" title="Beskrivning 4">Sida 4</a></li>
<li><a href="#" title="Beskrivning 5">Sida 5</a></li>
</ul>
</div>
|
...och så vidare! Du fattar principen, va?
CSS - bit för bit
Nu ska CSS-koden som stajlar menyn infogas. Vi tar det lite bit för bit. HTML-koden till själva menyn ser alltså ut så här (på Sida 1):
| HTML |
<div id="menybox">
<ul>
<li><span id="aktuell" title="Denna sida">Sida 1</span></li>
<li><a href="#" title="Beskrivning 2">Sida 2</a></li>
<li><a href="#" title="Beskrivning 3">Sida 3</a></li>
<li><a href="#" title="Beskrivning 4">Sida 4</a></li>
<li><a href="#" title="Beskrivning 5">Sida 5</a></li>
</ul>
</div>
|
Steg 1Till att börja med ska själva boxen som omsluter menyn få några egenskaper.
| CSS |
#menybox
{
width: 160px;
border: 1px solid;
border-color: #aaab9c #333333 #333333 #aaab9c;
margin: 0;
padding: 0;
font: 12px Tahoma, Arial, Helvetica, sans-serif;
font-weight: bold;
}
|
| Förklaring: |
#menybox
• Bredden på boxen blir 160px.
• Med "border" anges kantlinjer åt alla fyra hållen
- olika färg på kantlinjerna ger en "3D-effekt".
• Ingen marginal runt boxen.
• Ingen padding i boxen.
• Teckensnittet blir: Tahoma, storlek 12 pixlar - i fetstil. |
Så här skulle det se ut på sidan:
Vill man slopa 3D-efftekten kan man ange en färg på kanten t.ex:
border-color: #aaab9c;
Steg 2Nu ska "punkterna" i listan fixas till:
| CSS |
#menybox ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
|
| Förklaring: |
#menybox ul
• Listan ska inte ha några list-punkter: list-style-type: none.
• Ingen marginal runt själva listan.
• Ingen padding i själva listan. |
Så här skulle det se ut på sidan:
Steg 3Till sist ska länkarnas utseende fixas till. För att det ska fungera att byta bakgrundsfärg när man för mus-pekaren över länkarna måste man ange att innehållet i listelementet ska visas som "block". Egenskaperna för "hover-effekten" och för hur länkarna på "aktuell sida" ser ut är likadana.
Så här:
| CSS |
#menybox a, #menybox span
{
display: block;
height: 100%;
padding: 5px 10px;
border-right: 1px solid #aaab9c;
border-bottom: 1px solid #aaab9c;
background-color: #ffffff;
color: #777777;
text-decoration: none;
}
#menybox a:hover, #menybox span#aktuell
{
background-color: #e8e8e8;
color: #333333;
}
|
| Förklaring: |
#menybox a, #menybox span - gäller alla länkar i menyn.
• Alla länkar i listan ska visas som block: display: block.
• height: 100% - behövs för att det ska funka i IE.
• Padding runtom länkarna: top & bottom, right & left.
• Länkarna ska ha en linje i ljusgrått - till höger och under.
• Bakgrundsfärg: Vit, Textfärg: Ljusgrå.
• Ingen understrykning på länkarna.
#menybox a:hover, #menybox span#aktuell - gäller vid "hover" och på "aktuell sida".
• De här länkarna får automatiskt samma egenskaper som ovan. Med några förändringar:
• Bakgrundsfärg: Ljusgrå, Textfärg: Mörkgrå. |
Så här skulle det se ut på sidan:
Håll pekaren över länkarna för att se "hover-effekten"!
Och så här ser hela CSS-koden ut. (Skrivs in i din stilmall t.ex: stilmall.css)
| CSS |
#menybox
{
width: 160px;
border: 1px solid;
border-color: #aaab9c #333333 #333333 #aaab9c;
margin: 0;
padding: 0;
font: 12px Tahoma, Arial, Helvetica, sans-serif;
font-weight: bold;
}
#menybox ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#menybox a, #menybox span
{
display: block;
height: 100%;
padding: 5px 10px;
border-right: 1px solid #aaab9c;
border-bottom: 1px solid #aaab9c;
background-color: #ffffff;
color: #777777;
text-decoration: none;
}
#menybox a:hover, #menybox span#aktuell
{
background-color: #e8e8e8;
color: #333333;
}
|
Enkel Meny med Rubriker
Genom att utgå från menyn ovan och utöka HTML-koden lite och lägga till en klass i CSS-koden som man knyter till en rubrik-tagg - kan man skapa en meny med rubriker.
OBS!
Här används taggen <h6> för att skapa rubrikerna - eftersom det är viktigt att märka upp HTML-koden på ett korrekt sätt. Men! Det är också viktigt att rubriker struktureras på ett logiskt sätt. Välj den rubriknivå som passar bäst på din sida!
| HTML |
<div id="menybox">
<h6 class="menyrubrik" title="menyrubrik">RUBRIK</h6>
<ul>
<li><span id="aktuell" title="Denna sida">Sida 1</span></li>
<li><a href="#" title="Beskrivning 2">Sida 2</a></li>
<li><a href="#" title="Beskrivning 3">Sida 3</a></li>
<li><a href="#" title="Beskrivning 4">Sida 4</a></li>
<li><a href="#" title="Beskrivning 5">Sida 5</a></li>
</ul>
<h6 class="menyrubrik" title="menyrubrik">RUBRIK</h6>
<ul>
<li><a href="#" title="Beskrivning 6">Sida 6</a></li>
<li><a href="#" title="Beskrivning 7">Sida 7</a></li>
<li><a href="#" title="Beskrivning 8">Sida 8</a></li>
<li><a href="#" title="Beskrivning 9">Sida 9</a></li>
<li><a href="#" title="Beskrivning 10">Sida 10</a></li>
</ul>
</div>
|
Så här ser menyn ut:
CSS-koden är densamma som i den förra menyn - med undantag för:
#menybox h6.menyrubrik:
| CSS |
#menybox
{
width: 160px;
border: 1px solid;
border-color: #aaab9c #333333 #333333 #aaab9c;
margin: 0;
padding: 0;
font: 12px Tahoma, Arial, Helvetica, sans-serif;
font-weight: bold;
}
#menybox ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#menybox a, #menybox span
{
display: block;
height: 100%;
padding: 5px 10px;
border-right: 1px solid #aaab9c;
border-bottom: 1px solid #aaab9c;
background-color: #ffffff;
color: #777777;
text-decoration: none;
}
#menybox a:hover, #menybox span#aktuell
{
background-color: #e8e8e8;
color: #333333;
}
#menybox h6.menyrubrik
{
margin: 0;
padding: 5px 10px;
border-right: 1px solid #aaab9c;
border-bottom: 1px solid #aaab9c;
background-color: #006699;
font-size: 12px;
color: #ffffff;
}
|
| Förklaring: |
#menybox h6.menyrubrik
• Formateringen är samma som i #menybox a, #menybox span
- men rubrik-blocket får en annan bakgrunds och textfärg.
Eftersom det är en rubrik måste man ange textens egenskaper och ta bort marginalerna. |
Enkel horisontell Meny
En horisontell Meny fungerar precis som en vanlig vertikal meny. Men list-punkterna placeras horisontellt med: display: inline.
För att den här menyn ska fungera på samma sätt i flertalet webläsare måste man också ange float: left på länkarna.
HTML-koden till själva menyn är i stort sett densamma som tidigare.
Så här skulle koden på "Sida 3" se ut:
| HTML |
<div id="menybox">
<ul>
<li><a href="#" title="Beskrivning 1">Sida 1</a></li>
<li><a href="#" title="Beskrivning 2">Sida 2</a></li>
<li><span id="aktuell" title="Denna sida">Sida 3</span></li>
<li><a href="#" title="Beskrivning 4">Sida 4</a></li>
<li><a href="#" title="Beskrivning 5">Sida 5</a></li>
</ul>
</div>
|
Så här ser menyn ut:
Och så här ser CSS-koden ut:
| CSS |
#menybox ul
{
list-style-type: none;
float: left;
width: 100%;
padding: 0;
margin: 0;
border: 1px solid #000000;
background-color: #006699;
font: 12px Tahoma, Arial, Helvetica, sans-serif;
font-weight: bold;
}
#menybox li { display: inline; }
#menybox a, #menybox span
{
float: left;
padding: 5px 10px;
border-right: 1px solid #ffffff;
background-color: #006699;
color: #ffffff;
text-decoration: none;
}
#menybox a:hover, #menybox span#aktuell
{
background-color: #e8e8e8;
color: #777777;
}
|
| Förklaring: |
#menybox ul - egenskaper för hela listan.
• list-style-type: none - inga listprickar!
• float: left - behövs för att det ska funka i flertalet webläsare.
• border: 1px solid #000000 - ger den svarta linjen över och under.
#menybox li
• display: inline - anger att listan ska vara horisontell.
#menybox a, #menybox span - gäller alla länkar i menyn.
• float: left - behövs för att det ska funka i flertalet webläsare.
• border-right: 1px solid #ffffff - ger den en vit linje som delar meny-knapparna.
#menybox a:hover, #menybox span#aktuell - gäller vid "hover" och på "aktuell sida".
• Får samma egenskaper som alla länkar - men andra färger. |
Horisontell Meny med flikar
CSS-meny med flikar? Japp! Endast CSS! Inga bilder!
Så här ser menyn ut:
Orginalkoden till den här otroligt finurliga menyn är skapad av Eric Meyer och finns publicerad hos Listamatic - själv har jag har bara ändrat lite här och där.
HTML-koden till själva menyn är som i den tidigare horisontella menyn.
Så här skulle koden på "Sida 4" se ut:
| HTML |
<div id="menybox">
<ul>
<li><a href="#" title="Beskrivning 1">Sida 1</a></li>
<li><a href="#" title="Beskrivning 2">Sida 2</a></li>
<li><a href="#" title="Beskrivning 3">Sida 3</a></li>
<li><span id="aktuell" title="Denna sida">Sida 4</span></li>
<li><a href="#" title="Beskrivning 5">Sida 5</a></li>
</ul>
</div>
|
Och så här ser CSS-koden ut:
| CSS |
#menybox
{
margin: 0;
padding: 15px 0 0 0;
border-bottom: 1px solid #000000;
background-color: #e8e8e8;
font: 12px Tahoma, Arial, Helvetica, sans-serif;
font-weight: bold;
}
#menybox ul
{
list-style-type: none;
margin: 0;
padding: 5px 0;
}
#menybox li { display: inline; }
#menybox a, #menybox span
{
text-decoration: none;
margin-left: 5px;
padding: 5px 10px;
border: 1px solid #000000;
border-bottom: none;
background-color: #006699;
color: #ffffff;
}
#menybox a:hover, #menybox span#aktuell
{
border-bottom: 1px solid #ffffff;
background-color: #ffffff;
color: #777777;
}
|
| Förklaring: |
#menybox
• Ingen marginal. Padding 15px ÖVER. Kantlinje UNDER. Bakgrundsfärg. Textegenskaper.
• #menybox ul - egenskaper för hela listan.
• list-style-type: none - inga listpunkter.
• Ingen marginal runt. Padding över och under 5px.
#menybox li
• display: inline - anger att listan ska vara horisontell.
#menybox a, #menybox span - gäller alla länkar i menyn.
• Marginal åt vänster 5px. Padding över och under 5px. Padding åt sidorna 10px.
Kantlinje. Men inte i botten: border-bottom: none. Text och bakgrundsfärg.
#menybox a:hover, #menybox span#aktuell - gäller vid "hover" och på "aktuell sida".
• Får samma egenskaper som alla länkar - men andra färger.
• border-bottom och background-color ska ha samma färg för att skapa själva fliken.
• color: #777777 - grå textfärg
OBS!
• Padding över och under 5px måste vara samma i: ul och a. |
Meny med bakgrundsbilder
Här följer koden till en meny med tre bakgrundsbilder. Genom att man byter bakgrundsbild skapas en en hover-effekt. Bakgrundsbilden fungerar här som en vanlig bakgrundsbild och påverka alltså inte hur man vill att själva länk-blocket ska visas. HTML-koden är densamma som menyn med rubriker tidigare.
| HTML |
<div id="menybox">
<h6 class="menyrubrik" title="menyrubrik">RUBRIK</h6>
<ul>
<li><span id="aktuell" title="Denna sida">Sida 1</span></li>
<li><a href="#" title="Beskrivning 2">Sida 2</a></li>
<li><a href="#" title="Beskrivning 3">Sida 3</a></li>
<li><a href="#" title="Beskrivning 4">Sida 4</a></li>
<li><a href="#" title="Beskrivning 5">Sida 5</a></li>
</ul>
<h6 class="menyrubrik" title="menyrubrik">RUBRIK</h6>
<ul>
<li><a href="#" title="Beskrivning 6">Sida 6</a></li>
<li><a href="#" title="Beskrivning 7">Sida 7</a></li>
<li><a href="#" title="Beskrivning 8">Sida 8</a></li>
<li><a href="#" title="Beskrivning 9">Sida 9</a></li>
<li><a href="#" title="Beskrivning 10">Sida 10</a></li>
</ul>
</div>
|
Så här ser menyn ut: | Så här ser bilderna ut (i förstoring): |
|
|
meny_rubrik.gif - eg. 8 x 50px
meny_bg.gif - eg. 8 x 6px
meny_over.gif - eg. 8 x 6px |
Och så här ser CSS-koden ut:
| CSS |
#menybox
{
width: 150px;
margin: 0;
padding: 0;
font: 11px Verdana, Arial, Helvetica, sans-serif;
}
#menybox ul
{
list-style-type: none;
margin: 0 0 7px 0;
padding: 0;
}
#menybox a, #menybox span
{
display: block;
height: 100%;
padding: 5px 10px;
border-right: 1px solid #aaab9c;
border-bottom: 1px solid #aaab9c;
border-left: 1px solid #aaab9c;
background-image: url(meny_bg.gif);
color: #000000;
text-decoration: none;
}
#menybox a:hover
{
background-image: url(meny_over.gif);
color: #333333;
}
#menybox span#aktuell { font-weight: bold; color: #333333; }
#menybox h6.menyrubrik
{
margin: 0;
padding: 5px 5px 5px 12px;
background-image: url(meny_rubrik.gif);
font-size: 12px;
color: #ffffff;
font-weight: normal;
border-right: 1px solid #aaab9c;
border-bottom: 1px solid #aaab9c;
border-left: 1px solid #aaab9c;
}
|
| Förklaring: |
#menybox
• Bredden på menyn blir 150px.
• Ingen marginal runt boxen.
• Ingen padding i boxen.
• Teckensnittet blir: Verdana, storlek 11 pixlar.
#menybox ul
• Listan ska inte ha några list-punkter: list-style-type: none.
• 7px marginal UNDER listan (skapar mellanrum till nästa rubrik)
• Ingen padding i själva listan.
#menybox a, #menybox span - gäller alla länkar.
• Alla länkar i listan ska visas som block: display: block.
• height: 100% - behövs för att det ska funka i IE.
• Padding runtom länktexten: top & bottom, right & left.
• Länkarna ska ha en linje i ljusgrått - till vänster, under och till höger.
• Bakgrundsbild: meny_bg.gif. Textfärg: Svart.
• Ingen understrykning på länkarna.
#menybox a:hover - gäller vid "hover".
• Får samma egenskaper som alla länkar. Förutom:
• Bakgrundsbild: meny_over.gif. Textfärg: Mörkgrå.
#menybox span#aktuell - gäller endast "aktuell sida".
• Texten ska visas i fetstil och med samma färg som i "hover".
#menybox h6.menyrubrik
• Ingen marginal!
• Padding runtom texten i rubriken: över, höger, under: 5px. Åt vänster: 7px.
• Bakgrundsbild: meny_rubrik.gif.
• Textstorlek: 12 pixlar. Textfärg: Vit.
• font-weight: normal - ingen fetstil!
• Dessutom samma kanter som: #menybox a, span |
Meny med Bilder
Här följer koden till en meny med bilder som egentligen är bakgrundsbilder. De fungerar som "bakgrundsbilder" - men de har fast bredd och höjd. Bilderna ska ha samma storlek och för att de ska ge intrycket av "bilder" måste man också ange höjd på länkblocken. Genom att byta bakgrundsbild kan man även här skapa en hover-effekt.
| HTML |
<div id="menybox">
<ul>
<li><span id="aktuell" title="Denna sida">Sida 1</span></li>
<li><a href="#" title="Beskrivning 2">Sida 2</a></li>
<li><a href="#" title="Beskrivning 3">Sida 3</a></li>
<li><a href="#" title="Beskrivning 4">Sida 4</a></li>
<li><a href="#" title="Beskrivning 5">Sida 5</a></li>
<li><a href="#" title="Beskrivning 6">Sida 6</a></li>
<li><a href="#" title="Beskrivning 7">Sida 7</a></li>
</ul>
</div>
|
Så här ser menyn ut: | Så här ser bilderna ut: |
|
|
meny_bg.gif - 158 x 28px
meny_over.gif - 158 x 28px |
Och så här ser CSS-koden ut:
| CSS |
#menybox
{
width: 158px;
margin: 0;
padding: 0;
font: 11px Verdana, Arial, Helvetica, sans-serif;
}
#menybox ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#menybox a, #menybox span
{
display: block;
height: 22px;
padding: 7px 5px 3px 15px;
background-image: url(meny_bg.gif);
background-repeat: no-repeat;
color: #000000;
text-decoration: none;
}
#menybox a:hover, #menybox span#aktuell
{
background-image: url(meny_over.gif);
color: #333333;
}
#menybox span#aktuell { font-weight: bold; }
|
| Förklaring: |
#menybox
• Bredden på menyn blir 158px - bildernas bredd.
• Ingen marginal runt boxen.
• Ingen padding i boxen.
• Teckensnittet blir: Verdana, storlek 11 pixlar.
#menybox ul
• Listan ska inte ha några list-punkter: list-style-type: none.
• Ingen marginal runt själva listan.
• Ingen padding i själva listan.
#menybox a, #menybox span - gäller alla länkar.
• Alla länkar i listan ska visas som block: display: block.
• Länk-blocket ska ha en höjd på 22px - Bildernas höjd
MINUS padding över och under. PLUS det mellanrum du vill ha mellan länkbilderna.
• Ingen marginal.
• Padding runtom länktexten: över, höger, under, vänster.
• Bakgrundsbild: meny_bg.gif. Textfärg: Svart.
• background-repeat: no-repeat - bakgrundsbilden ska inte repeteras.
• Ingen understrykning på länkarna.
#menybox a:hover, #menybox span#aktuell - gäller vid "hover" och "aktuell sida".
• Får samma egenskaper som alla länkar. Förutom:
• Bakgrundsbild: meny_over.gif. Textfärg: Mörkgrå.
#menybox span#aktuell - gäller endast "aktuell sida".
• Texten ska visas i fetstil.
OBS! Höjden på #menybox a, , #menybox span ska alltså vara bildernas höjd MINUS padding över och under. PLUS det mellanrum du vill ha mellan länkbilderna.
HÄR: 28px MINUS (7px + 3px) 10px. PLUS (mellanrummet) 4px. ALLTSÅ: 22px.
|
Meny med Bilder och Rubriker
Den här menyn fungerar som den ovan. Bilder - som egentligen är bakgrundsbilder - med fast bredd och höjd. Bilderna ska ha samma storlek och för att de ska fungera som "bilder" måste man också ange höjd på länkblocken. Genom att byta bakgrundsbild skapas även här en hover-effekt. En extra klass med egen bakgrundsbild skapar rubrikerna.
| HTML |
<div id="menybox">
<h6 class="menyrubrik" title="menyrubrik">RUBRIK</h6>
<ul>
<li><span id="aktuell" title="Denna sida">Sida 1</span></li>
<li><a href="#" title="Beskrivning 2">Sida 2</a></li>
<li><a href="#" title="Beskrivning 3">Sida 3</a></li>
<li><a href="#" title="Beskrivning 4">Sida 4</a></li>
<li><a href="#" title="Beskrivning 5">Sida 5</a></li>
</ul>
<h6 class="menyrubrik" title="menyrubrik">RUBRIK</h6>
<ul>
<li><a href="#" title="Beskrivning 6">Sida 6</a></li>
<li><a href="#" title="Beskrivning 7">Sida 7</a></li>
<li><a href="#" title="Beskrivning 8">Sida 8</a></li>
<li><a href="#" title="Beskrivning 9">Sida 9</a></li>
<li><a href="#" title="Beskrivning 10">Sida 10</a></li>
</ul>
</div>
|
Så här ser menyn ut: | Så här ser bilderna ut: |
|
|
meny_rubrik.gif - 160 x 25px
meny_bg.gif - 160 x 25px
meny_over.gif - 160 x 25px |
Och så här ser CSS-koden ut:
| CSS |
#menybox
{
width: 162px;
margin: 0;
padding: 0;
font: 11px Verdana, Arial, Helvetica, sans-serif;
}
#menybox ul
{
list-style-type: none;
margin: 0 0 7px 0;
padding: 0;
}
#menybox a, #menybox span
{
display: block;
height: 15px;
padding: 5px 10px;
border-left: 1px solid #aaab9c;
border-bottom: 1px solid #aaab9c;
border-right: 1px solid #aaab9c;
background-image: url(meny_bg.gif);
background-repeat: no-repeat;
color: #000000;
text-decoration: none;
}
#menybox a:hover, #menybox span#aktuell
{
background-image: url(meny_over.gif);
color: #333333;
}
#menybox span#aktuell { font-weight: bold; }
#menybox h6.menyrubrik
{
height: 15px;
margin: 0;
padding: 5px 5px 5px 12px;
background-image: url(meny_rubrik.gif);
background-repeat: no-repeat;
font-size: 12px;
color: #ffffff;
font-weight: normal;
border-left: 1px solid #aaab9c;
border-bottom: 1px solid #aaab9c;
border-right: 1px solid #aaab9c;
}
|
| Förklaring: |
#menybox
• Bredden på menyn blir 162px - bildernas bredd PLUS kantbredd i "LI" åt hö och vä.
• Ingen marginal runt boxen.
• Ingen padding i boxen.
• Teckensnittet blir: Verdana, storlek 11 pixlar.
#menybox ul
• Listan ska inte ha några list-punkter: list-style-type: none.
• 7px marginal UNDER listan (skapar mellanrum till nästa rubrik)
• Ingen padding i själva listan.
#menybox a, #menybox span - gäller alla länkar.
• Alla länkar i listan ska visas som block: display: block.
• Länk-blocket ska ha en höjd på 15px - bildernas höjd MINUS padding över, under.
• Padding runtom länktexten: top & bottom, right & left.
• Länkarna ska ha en linje i ljusgrått - till vänster, under och till höger.
• Bakgrundsbild: meny_bg.gif. Textfärg: Svart.
• background-repeat: no-repeat - bakgrundsbilden ska inte repeteras.
• Ingen understrykning på länkarna.
#menybox a:hover, #menybox span#aktuell - gäller vid "hover" och på "aktuell sida".
• Får samma egenskaper som alla länkar. Förutom:
• Bakgrundsbild: meny_over.gif. Textfärg: Mörkgrå.
#menybox span#aktuell - gäller endast "aktuell sida".
• Texten ska visas i fetstil.
#menybox h6.menyrubrik
• Rubrik-blocken ska ha en höjd på 15px - bildens höjd.
• Ingen marginal!
• Padding runtom texten i rubriken: över, höger, under: 5px. Åt vänster: 7px.
• Bakgrundsbild: meny_rubrik.gif.
• background-repeat: no-repeat - bakgrundsbilden ska inte repeteras.
• Textstorlek: 12 pixlar. Textfärg: Vit.
• font-weight: normal - ingen fetstil!
• Dessutom samma kanter som: #menybox a, span |
Avslutningsvis
Japp! Det här var några exempel på hur man kan skapa menyer med CSS. När du nu sätter igång med att tillverka dina egna - kom ihåg att använda en korrekt "doctype" och kolla i så många webläsare som möjligt!
De CSS-koder som fungerar i både Internet Explorer och Firefox brukar se bra ut i både Opera och Netscape!
Här kan du läsa mer om Menyer och Listor
Listamatic - på engelska
|
NinetNet 
CSS 
