Spry Tabbed panels i DW CS5

[Vasa09]

Jag jobbar i DW CS5 och har lagt in en Spry Tabbed panel med länkar i en undernivå.

 

Det jag vill är att då användaren klickar på huvudrubriken Hundkurser så öppnas dels dess första sida, men också att undernivåerna blir synlig direkt (se bifogad bild).

 

Jag lyckas dock bara få dem att visa antingen eller. Med onfocus... (se andra li-raden i koden) så öppnas rätt sida, men jag får inga undermenyer. Tar jag bort onfocus så visas undermenyerna men Hundkursers förstasida visas inte.

 

Hur får jag både och?

 

[code<div id="TabbedPanels1" class="TabbedPanels">

<ul class="TabbedPanelsTabGroup">

<li class="TabbedPanelsTab" tabindex="0">Förstasidan</a></li>

<li class="TabbedPanelsTab" tabindex="0" onfocus="MM_goToURL('parent','../Kurser/hundkurser.html');return document.MM_returnValue">Hundkurser</li>

<li class="TabbedPanelsTab" tabindex="0">Träna hunden</li>

<li class="TabbedPanelsTab" tabindex="0">Mat & hälsovård</li>[/code]

[Jonas__B]

Man ska tydligen lägga till "TabbedPanelsTabSelected" i class-parametern på motsvarande LI-element.

[Vasa09]

Tar upp denna tråd igen, eftersom jag fortfarande inte har fått ordning på menyerna.

 

Nu ligger dock sidan ute, så titta gärna på www.glanna.se. Jag vill att alla menyer ska fungera som t.ex på DNs sida.

 

Att lägga in "TabbedPanelsTabSelected" i class-parametern på motsvarande LI-element fungerar inte. Dessutom ska den, om jag har förstått Adobes hjälptexter rätt, läggas dit per automatik då en användare klickar på en länk.

 

Någon som kan hjälpa mig?

[Vasa09]

Finns det ingen som har några tips att komma med?

[Vasa09]

Provar att flytta över tråden hit, kanske någon kan hjälpa mig?

 

Jag jobbar i DW CS5 och har lagt in en Spry Tabbed panel med länkar i en undernivå.

 

Det jag vill är att då användaren klickar på huvudrubriken, t.ex Hundkurser så öppnas dels dess första sida, men också att undernivåerna blir synlig direkt (se www.glanna.se). De ska fungera precis som menyerna på t.ex dn.se

 

Jag lyckas dock bara få dem att visa antingen eller. Med onfocus... (se andra li-raden i koden) så öppnas rätt sida, men jag får inga undermenyer. Tar jag bort onfocus så visas undermenyerna men Hundkursers förstasida visas inte.

 

Om jag har förstått Adobes hjälp rätt ska "TabbedPanelsTabSelected" sättas automatiskt när användaren klickar på länken. Jag har provat att lägga den i li-elementet men det fungerar inte heller.

 

Hur får jag både och?

 

<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Förstasidan</a></li>
<li class="TabbedPanelsTab" tabindex="0" onfocus="MM_goToURL('parent','../Kurser/hundkurser.html');return document.MM_returnValue">Hundkurser</li>
<li class="TabbedPanelsTab" tabindex="0">Träna hunden</li>
<li class="TabbedPanelsTab" tabindex="0">Mat & hälsovård</li>

[Jonas__B]

Det verkar inte så många som har jobbat med Spry Tabbed Panel.

 

Personligen hade jag gjort meny helt i CSS (nästlad UL-lista) och göra lite javascript hjälpfunktioner för de webbläsare som inte stödjer css 2.1 fullt ut.

 

<ul id="meny">
 <li class="nav-hundar"><a href="/Hundar">Hundar</a>
   <ul>
     <li><a href="/Hundar/Schafer">Schäfer</a></li>
     <li><a href="/Hundar/Labrador">Labrador</a></li>
     <li><a href="/Hundar/Tax">Tax</a></li>
   </ul>
 </li>
 <li class="nav-fiskar"><a href="/Fiskar">Fiskar</a>
   <ul>
     <li><a href="/Fiskar/Guldfisk">Guldfisk</a></li>
     <li><a href="/Fiskar/Guppy">Guppy</a></li>
   </ul>
 </li>

</ul>

 

 

En rätt enkel skruktur.

 

För att visa resp undermenyer med css gör man:

#meny li ul{display:none} /* gömma alla undermenyer från start*/

#meny li:hover ul{display:block} /* visar undermeny vid hover*/

 

I respektive sidas body lägger man till en klass för att kunna visa aktiv undermeny

body.hundar li.nav-hundar ul,
body.fiskar li.nav-fiskar ul{display:block}

 

pseudo-elementet :hover fungerar inte på annat än a-element i IE så där får man hjälpa till med t ex jquery

<script type="text/javascript">
$(function(){
 $("#meny li:has(ul)").hover(
   function(){$(this).children("ul").css("display","block")},
   function(){$(this).children("ul").css("display","none")} );
});
</script>

[Vasa09]

Tack så mycket!

Ska genast testa hur det fungerar.

[Cecilia]

Slagit ihop de två trådarna om samma sak.

 

Cecilia

Moderator