Just nu i M3-nätverket
Jump to content

Spry Tabbed panels i DW CS5


Vasa09

Recommended Posts

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]

post-68646-0-68865000-1299233172_thumb.jpg

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 months later...

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?

Link to comment
Share on other sites

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

 

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? :unsure:

 

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...