3 階層ナビゲーションメニューを実現するための js+css

この記事の例では、3レベルのナビゲーションメニューを実装するためのjs + cssの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

CSS を使用してナビゲーションメニューのホバーイベントを実装するのは比較的簡単です。透明度を変更するだけです。メニューにグラデーション効果を持たせたい場合、残念ながら transition は display をサポートしていないため、不透明度を使用して同じ効果を実現します。

CSS で実装された完全なコードは次のとおりです。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <title>第 3 レベルのナビゲーション メニュー</title>
 </head>
 <スタイル>
  *{
 マージン: 0;
 パディング: 0;
}
体{
 フォントサイズ: 16px;
 背景色:#EDEDED;
 フォントスタイル: 継承;
 色:#757576;
}
。主要{
 幅: 1050ピクセル;
 マージン: 0 自動;
}
.fl{
 フロート: 左;
}
.fr{
 フロート: 右;
}
{
 テキスト装飾: なし;
 アウトライン: なし;
 色:#757576;
}
ul、ol{
 リストスタイル: なし;
}
。クリア{ 
 クリア: 両方;
}
.clearfix{
 *ズーム:1;
}
li{
 フロート: 左;
 表示: インラインブロック;
 幅: 120ピクセル;
 高さ: 40px;
 テキスト配置: 中央;
 行の高さ: 40px;
}
li a:hover{
 色: 赤;
}
＃初め {
 不透明度: 0;
}
#firstli{
 フロート: なし;
 位置: 相対的;
}
 li a:hover{
 色: 赤;
 遷移: すべて 0.5 秒;
}
:ホバー{
 遷移: すべて 2; 
}
＃2番 {
 不透明度: 0;
 マージン: -40px 0 0 80px;
 パディング: 0px;
 位置: 絶対;
}
#nav_one:ホバー #first{
 不透明度:1;
 遷移: すべて 2;
}
#nav_two:ホバー #second{
 不透明度:1;
 遷移: すべて 2;
}
 </スタイル>
 
 <本文>
  <div class="nav main">
   <ul id="nav">
    <li id="nav_one"><a href="#" >レベル 1</a>
     <ul id="first">
      <li id="nav_two" class="nav_two">
       <a href="#" >第 2 レベル</a>
       <ul id="2番目">
        <li><a href="#" >レベル 3</a></li>
        <li><a href="#" >レベル 3</a></li>
        <li><a href="#" >レベル 3</a></li>
       </ul>
      </li>
      <li class="nav_two"><a href="#" >第 2 レベル</a></li>
      <li class="nav_two"><a href="#" >第 2 レベル</a></li>
     </ul>
    </li> 
    <li><a href="#" >レベル 1</a></li>
    <li><a href="#" >レベル 1</a></li>
    <li><a href="#" >レベル 1</a></li>
    <li><a href="#" >レベル 1</a></li>
   </ul>
 </div>  
 </本文>
</html>

js の実装は比較的面倒ですが、CSS でホバー効果を置き換えることも可能です。

<!--<スクリプト>
 window.onload = 関数(){
  var one = document.getElementById("nav_one");
  var frist = document.getElementById("frist");
  var second = document.getElementById("second");
   one.onmouseover = 関数(){
    first.style.opacity = "1";
    first.style.transition = "すべて 2";
    first.style.WebkitTransition = "すべて 2";
   }
   one.onmouseout = 関数(){
    first.style.opacity = "0";
    first.style.transition = "すべて 0.5 秒";
    first.style.WebkitTransition = "すべて 0.5 秒";
   }
  var two = document.getElementById("nav_two");
   2.onmouseover = 関数(){
    second.style.opacity = "1";
    second.style.transition = "すべて 2";
    second.style.WebkitTransition = "すべて 2";
   }
   2.onmouseout = 関数(){
    second.style.opacity = "0";
    second.style.transition = "すべて 0.5 秒";
    second.style.WebkitTransition = "すべて 0.5 秒";
   }
  }
</script>-->

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: