複数レベルのドロップダウンを持つ最も単純なJQueryアニメーションのナビゲーションバー

Question

私はウェブサイト用のナビゲーションバーを作成しています。メインバーからドロップダウンリストへの2レベルのドロップダウンを作成する非常に簡単な方法が必要ですさらにドロップダウンレベル。

私は追加のプラグインなしでJQueryを使用しています。

"Simplest"とは、コードの数が少なく、変数が最小であり、読み込み時間が最も速いということです。

hover（）イベントを使用しようとしましたが、これは機能していないようです。ここで

は、HTMLの例です：

<div class="menu"> 
    <ul> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a> 
      <ul class="sub"> 
       <li><a href="#">Sub 1</a> 
        <ul class="sub2"> 
         <li><a href="#">Sub 2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

理想的には、「リンク2」の上にマウスを置くと、ダウン子リストのスライドを持っていますし、「サブ1」の上にマウスを移動すると、次のダウン子リストのスライドを持っていますそれに。

また、ほとんどのディメンションでパーセンテージを使用していますので、同じようにスケーリングした場合は非常に便利です。

これ以上の情報が必要な場合は、ダウン投票前にお尋ねください。

ありがとうございました。

Answer 1

ベストjQueryはjQueryではありません。

.menu input { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
.menu label { 
 
    cursor: pointer; 
 
    display: block; 
 
} 
 
.menu label:after { 
 
    content: '...'; 
 
} 
 
.sub { 
 
    display: none; 
 
} 
 
.menu label:hover+input+.sub, 
 
.menu input:checked+.sub, 
 
.sub:hover { 
 
    display: block; 
 
}

<div class="menu"> 
 
    <ul> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li> 
 
      <label for="menu-2">Link 2</label> 
 
      <input type="checkbox" id="menu-2" /> 
 
      <ul class="sub"> 
 
       <li> 
 
        <label for="menu-2-1">Sub 1</label> 
 
        <input type="checkbox" id="menu-2-1" /> 
 
        <ul class="sub"> 
 
         <li><a href="#">Sub 2</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>

、必要に応じて、さらにCSSを追加します。