4 svar · 600 visningar · startad av Travoni
Låt säga att jag har en dynamisk ul-li-meny i två nivåer. Om jag klickar på en länk i första nivån så får länkens förälder (li-elementet) klassnamnet 'active'. Varpå jag med css då visar undermenyn som är gömd. Men om jag klickar i undermenyn visas inte den pga. klassen.
<ul id="menu">
<li><a href="sida1.php">Sida 1</a>
<ul>
<li class="active"><a href="Undersida2_1">Undersida 2_1</a></li>
</ul>
</li>
</ul>
Hur får jag undermenyn att visas om jag klickar i en undermeny så att säga? Låter roddigt kanske?
Det vore antagligen enkelt att ge en lösning.
Men... "Men om jag klickar i undermenyn visas inte den pga. klassen" gör mig osäker, menar du den överordnade nivån?
Och... "Hur får jag undermenyn att visas om jag klickar i en undermeny" förstår jag inte, menar du när musen är över den länken?
Sedan behöver man se CSS-koden du använder för att ge ett direkt svar, utan kod kan ett svar bara vara i allmänhet och tycker jag är svårare att ge.
Jo så här ser css:en ut:
#menu {
white-space:nowrap;
margin:0;padding:0;
}
#menu a, #menu .active li a{
display: block;
height:17px;
color:#999999;
font-size:13px;
padding:0 10px 0 10px;
margin-top:10px;
}
#menu a:hover,#menu .active a,#menu .active a:hover{
color:#EB5C18;
}
#menu li,#menu ul li{ display:block; float:left;}
#menu ul {
position: absolute;
left: -999em;
}
#menu li:hover ul, #menu li.sfhover ul,#menu li.active ul{
left: 20em;
}
Om första länken är aktiv (li-elementet får klassen "active") så visas undermenyn:
<ul id="menu">
<li class="active"><a href="sida1.php">Sida 1</a>
<ul>
<li><a href="Undersida1_1">Undersida 1_1</a></li>
</ul>
</li>
<li><a href="sida2.php">Sida 2</a></li>
<li><a href="sida3.php">Sida 3</a></li>
</ul>
Men om undermenylänken är aktiv (li-elementet får klassen "active") så visas ju inte undermenyn
<ul id="menu">
<li><a href="sida1.php">Sida 1</a>
<ul>
<li class="active"><a href="Undersida1_1">Undersida 1_1</a></li>
</ul>
</li>
<li><a href="sida2.php">Sida 2</a></li>
<li><a href="sida3.php">Sida 3</a></li>
</ul>
Går det att fixa med css så att det överordnade ul-elementet visas?
Hittade en grej som jobbade sig ned i nivåerna beroende på url:
http://www.odi.ch/prog/css/nav/index.php
Det verkar funka.
Det skulle hur som helst vara kul och veta om det går utan ett script?
...
Det skulle hur som helst vara kul och veta om det går utan ett script?
Ja, men inte med en "Suckerfish-meny".
Det går alldeles utmärkt med en "Dropper" dropdownmeny. Du får läsa in dig på tekniken, kanske studera Stu Nichols exempel också.
Tekniken bygger på float-drop pga marginaländring av den hovrade länken så dess lista inte ryms och droppar ned. Listan är gömd utanför skärmen mha en stor negativ toppmarginal. Eftersom det är en länk som ändrar så funkar hover i gamla IE med, vilket det inte gör utan javascript med menyer av den typ du har nu.
Så om din aktivklass ger en länk i undermenyn ändrad bredd så droppar listan ned utan att behöva nåt mer och sidans länk kan markeras samtidigt.
(Att kalla klassen för aktuell sida "active" kan lätt förväxlas med IEs pseudoklass "active", hellre kalla den nåt annat, typ "current" eller "visas".)