sIFR이 적용된 Javascript 탭 메뉴

Question

this page의 동적 드라이브 예제와 같은 2 단계 메뉴 작업 중입니다. 목표는 기본 탐색 아래에 하위 레이어를 표시하고 시간 간격 후 각 페이지의 기본 하위 레이어로 돌아가는 것입니다. onmouseover 그것은 큰 문제를 제외하고는 작동합니다 : 메인 네비게이션 아이템 (<a>이 <li> s 안에 있음)에서 sIFR을 사용하고 있습니다. 대체 된 <a rel=""> 태그를 대상으로하기 때문에 스크립트 논리가 sIFRized 항목에서 작동하지 않습니다.

부모를 대상으로 스크립트를 변경하려고 시도했지만 <li> 님, 주된 탐색을 망쳤습니다. Javascript가별로 발전하지 않았기 때문에 조언을 듣는 것이 좋습니다!

하나의 아이디어 : 각 탐색을 교체하는 대신 각 탐색을 <a>으로 교체 할 수 있습니까? <li>? 아니면 <a rel=""> 여전히 메뉴 스크립트를 사용할 수 있습니까?

저는이 자바 스크립트 솔루션과 결혼하지 않았습니다. 사실 저는 간단한 자바 스크립트 표시/숨기기 방법을 사용하여 몇 가지 다른 방법을 시도했습니다. 그러나이 스크립트에는 "기본 설정으로 되돌리기"동작이 있습니다.

->Javascript menu source from Dynamic Drive

메인 네비게이션 소스 • : 주요 탐색 항목

Subnav 원 (별도의 코드) •

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; }' 
     ] 
}); 

에 대한 또는 sIFR 교체 •

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

<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을 사용하지 마십시오.