Feb
Veckans CSS-meny 3
Kategorier: (X)HTML CSSDenna veckas CSS-meny bygger ut ytterligare lite jämfört med förra veckans. En expanderande meny enbart skriven i CSS och HTML. Tyvärr fungerar inte expanderingen i Internet Explorer 6 och lägre versioner eftersom CSS-stödet inte är tillräckligt bra. Däremot är menyn fortfarande funktionell även för de utan avancerat CSS-stöd.
Likt tidigare veckor börjar vi med en enkel lista. Skillnaden den här gången är att under varje li-element har vi en ny lista som är en undermeny (eng. submenu). HTML-koden för menyn ser ut såhär:
<ul id="nav">
<li>
Recept
<ul class="subNav">
<li><a href="kott.html" rel="nofollow">Kött</a></li>
<li><a href="fisk.html" rel="nofollow">Fisk</a></li>
<li><a href="fagel.html" rel="nofollow">Fågel</a></li>
</ul>
</li>
<li>
Ingredienser
<ul class="subNav">
<li><a href="gronsaker.html" rel="nofollow">Grönsaker</a></li>
<li><a href="frukt.html" rel="nofollow">Frukt</a></li>
<li><a href="spannmal.html" rel="nofollow">Spannmål</a></li>
</ul>
</li>
</ul>
Alla rel="nofollow"-attribut i länkarna bör tas bort om du ska använda koden på din egen hemsida, då jag lagt till dem för att sökmotorer inte ska försöka följa länkarna eftersom de inte leder någonstans.
Vi börjar med lite kod för att få utseendet på listorna lite prydligare (om du inte hänger med på detta, vänligen läs här och här innan du fortsätter):
#nav, #nav .subNav, ul#nav li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul#nav li {
width: 100px;
background-color: #7281a1;
color: white;
font-family: "Trebuchet MS", Arial, Sans-serif;
font-size: 12px;
}
ul#nav li ul.subNav li {
background-color: #3b4e75;
}
ul#nav li ul.subNav li a:link, ul#nav li ul.subNav li a:visited {
display: block;
height: 20px;
color: white;
text-decoration: none;
}
ul#nav li ul.subNav li a:hover, ul#nav li ul.subNav li a:active {
background-color: #2a3d64;
}
Nu har menyn fått ett mycket trevligare utseende.
Det är här "magin" kommer. Vi lägger till följande CSS-kod:
ul#nav>li {
height: 20px;
overflow: hidden;
line-height: 20px;
}
ul#nav li:hover, ul#nav li:active {
height: auto;
overflow: auto;
}
Den första delen sätter höjden och radhöjden på varje li-element i listan "nav" till 20 pixlar. Dessa li-element är i vanliga fall högre än så, eftersom de innehåller en undermeny, men genom att sätta egenskapen overflow till hidden kommer allt innehåll som är utanför denna 20 pixlars höjd att döljas.
För att sedan få listan att expandera lägger vi till den andra delen. Den gör att när du för musen över listelementet, som nu bara är 20 pixlar högt, sätts höjden från 20 pixlar till auto och även overflow sätts till auto, d.v.s. innehållet bestämmer höjden på li-elementet. När musen förs utanför listelementet kommer egenskaperna att återgå till sina ursprungliga värden (height 20px och overflow hidden) vilket leder till att listelementet kollapsar igen.
Här finns den färdiga expanderande css-menyn.
TYCKTE DU OM ARTIKELN?
KOMMENTARER
- #1. Skriven av Sara den 13 Apr 2008
-
Hej!
Himla bra meny, jag fick den att funka. Dock inte i safari på mac. Är det så att det inte fungerar? Eller finns det något knep som man kan ta till alternativt en annan meny. Sen skulle jag också gärna vilja klicka fram undermenyerna istället för att det kommer automatiskt. Hur gör jag? Detta kanske inte är en sida man frågar på, men jag testar.Tack för hjälpen!
/sara
- #2. Skriven av Stefan den 14 Apr 2008
-
Hej Sara!
Fråga på, det är bara roligt! :)
Jag ska kika på sidan i Safari (dumt att jag inte gjort det) och se ifall det går att åtgärda.
Angående att klicka för att få fram undermenyerna kan det vara svårt att få till med enbart CSS, då behöver man nästan blanda in lite javascript också. Jag kan skriva en till artikel som visar hur man gör det. Håll ögonen öppna!
- #3. Skriven av Stefan den 14 Apr 2008
-
Hej igen!
Jag provade exemplet i Safari 1.3.2 och det fungerade utan problem. Vilken version av Safari provade du i?
- #4. Skriven av Sara den 28 Apr 2008
-
Hej hej!
Har en liten äldre version av Safari 3.1.1. Sitter även på mac.
Vore väldigt trevligt med en ny artikel med klickbarmeny:)
- #5. Skriven av Ingrid den 7 May 2008
-
Hejsan!
Tackar så väldans för den finfina koden :)
Jag undrar mest hur man gör för att få menyerna att ligga vågrät. Alltså bara rubrikerna, inte innehållet. Har testat med "decoration: inline;" men inte fått det att fungera på ett vettigt sätt.
Vet du något sätt att kringgå att det inte funkar under explorer6? Måste man blanda in javascript då?Tack än en gång :) Väldigt snygga och användbara menyer.
//Ingrid
- #6. Skriven av Stefan den 7 May 2008
-
Hej Ingrid!
Om du lägger till "float: left;" i ul#nav>li ska du få rubrikerna att hamna bredvid varandra.Tyvärr går det inte att få denna meny att fungera i IE6 utan att blanda in javascript. Anledningen är att CSS-väljaren ">" inte stöds av IE6.
- #7. Skriven av Marcus den 15 Jul 2008
-
Hej,
Testade menyn ovan..jätte coolt.
Hur ser javascriptet ut för att menyn ovan ska kunna visas i IE6??Jag har tidigare använt mig av DW Spry men då kommer det upp ett meddelande i IE7 att:
"För att skydda datorn förhindrar Internet Explorer att den här webbsidan kör skript eller ActiveX-kontroller som skulle kunna få tillgång till datorn."
Kan man komma runt detta meddelande??
För jag tror inte alla besökarna är pigga på att tillåta ActiveX eller javascript varje gång de ska besöka sidan. - #8. Skriven av Elin den 12 Jun 2009
-
Hej
En fin meny men jag får den inte att funka.
När jag klistrar in det här händer inget.
ul#nav>li {
height: 20px;
overflow: hidden;
line-height: 20px;
}
ul#nav li:hover, ul#nav li:active {
height: auto;
overflow: auto;
}
Vad kan jag ha gjort fel?Tack för svar
