Onglet Javascript Menu avec sIFR

Question

Je travaille sur un menu à deux niveaux comme les exemples Dynamic Drive sur this page. L'objectif est d'afficher une couche de sous-navigation située sous le nav principal onmouseover, en revenant à la couche de sous-navigation par défaut de chaque page après un intervalle temporisé. Cela fonctionne, sauf pour un gros problème: J'utilise sIFR sur les principaux éléments de navigation (<a> s à l'intérieur de <li> s). La logique de script ne fonctionne pas sur les éléments sIFRized, car elle cible les points <a rel=""> qui ont été remplacés.

J'ai essayé de changer le script pour cibler le parent <li> s, mais il a juste foutu le nav principal. Je ne suis pas très avancé avec Javascript alors tout conseil est apprécié!

Une idée: est-il possible de remplacer sIFR chaque navigation <a> au lieu de remplacer chaque <li>? Ou serait le <a rel=""> encore indisponible pour le script de menu?

Je ne suis pas mariée à cette solution javascript, en fait j'ai essayé quelques autres méthodes en utilisant de simples méthodes Javascript show/hide. Cependant, ce script a le comportement "revenant à défaut" que je recherche.

->Javascript menu source from Dynamic Drive

• Source de navigation principale:

<div id="mainNav"> 
<ul> 
    // rel="subnav1" shows the "subnav1" layer in the snippet below 
    <li class="navLi"><a href="around-othello.php" rel="subnav1">Around Othello</a></li> 

    // rel="subnav2" shows the "subnav2" layer in the snippet below 
    <li class="navLi"><a href="living-here.php" rel="subnav2">Living Here</a></li> 

    // rel="subnav3" shows the "subnav3" layer in the snippet below 
    <li class="navLi"><a href="link-to-it.php">Link to it</a></li> 

    <li class="navLi"><a href="whats-new.php">What's New</a></li> 

    <li class="navLi"><a href="contact.php">Contact</a></li> 

    <li class="navLi"><a href="retail.php">Retail Hub</a></li> 
</ul> 
</div> 

• Remplacement sIFR pour les principaux éléments de nav

sIFR.replace(grotesqueMT, { 
selector: 'li.navLi', 
tuneWidth:4, 
forceSingleLine:true, 
ratios:[8, 1.3, 11, 1.21, 12, 1.2, 14, 1.19, 21, 1.16, 28, 1.13, 38, 1.12, 61, 1.11, 94, 1.1, 95, 1.09, 103, 1.1, 107, 1.09, 110, 1.1, 119, 1.09, 120, 1.1, 1.09], 
css: ['.sIFR-root { background-color:#5a7e92; color:#ffffff; font-size:18; }' 
     ,'a { color:#ffffff; text-decoration:none; }' 
     ,'a:link { color:#ffffff; text-decoration:none; }' 
     ,'a:hover { color:#f0eed6; text-decoration:underline; }' 
     ] 
}); 

• Source Subnav (un extrait de code distinct)

<div id="subnav1" class="subnav"> 
<ul> 
    <li><a href="around-othello.php">Around Othello</a></li> 
    <li class="pipe"> | </li> 
    <li><a href="around-othello.php?p=your-big-backyard">Your Big Backyard</a></li> 
    <li class="pipe"> | </li> 
    <li><a href="around-othello.php?p=explore-the-area">Explore the Area</a></li> 
    <li class="pipe"> | </li> 
    <li><a href="communityBuzz">Community Buzz</a></li> 
</ul> 
</div> 

<div id="subnav2" class="subnav"> 
<ul> 
    <li><a href="around-othello.php">Around Othello</a></li> 
    <li class="pipe"> | </li> 
    <li><a href="communityBuzz">Community Buzz</a></li> 
</ul> 
</div> 

<div id="subnav3" class="subnav"> 
<ul> 
    <li><a href="living-here.php">Living Here</a></li> 
    <li class="pipe"> | </li> 
    <li><a href="living-here.php?p=living-green">Living Green</a></li> 
</ul> 
</div> 

Answer 1

Sérieusement, sauvez-vous le problème et n'utilisez pas sIFR ici.