帶有sIFR的Javascript選項卡菜單

Question

我正在研究一個兩級菜單，如this page上的動態驅動器示例。我們的目標是在主導航onmouseover下方顯示一個subnav圖層，並在定時間隔後恢復到每個頁面的默認subnav圖層。它工作，除了一個大問題：我在主導航項目（<li> s內的<a> s）上使用sIFR。該腳本邏輯不適用於sIFRized項目，因爲它的目標是已被替換的<a rel="">標籤。

我試着改變腳本來定位父母<li> s，但它只是搞砸了主導航。我不是很高級的Javascript，所以任何意見都表示讚賞！

一個想法：是否有可能sIFR取代每個導航<a>而不是取代每個<li>？或者<a rel="">仍然對菜單腳本不可用？

我沒有和這個javascript解決方案結婚，實際上我嘗試了一些我自己使用簡單的Javascript顯示/隱藏方法的其他方法。但是，此腳本具有我正在尋找的「恢復爲默認」行爲。

- >Javascript menu source from Dynamic Drive

•主導航源：

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

•sIFR的替代主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; }' 
     ] 
}); 

•Subnav源（單獨的代碼片段）

<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

認真的說，不要在這裏使用sIFR。