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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js 左 3 レベル メニュー ナビゲーション サンプル コード
  • JS でナビゲーション メニューにセカンダリ ドロップダウン メニューを実装する 3 つの方法
  • JSは、現在のメニューを選択した後にナビゲーションバーを強調表示する効果を実現します。
  • js制御のナビゲーションメニューのサンプルコード
  • 水平スクロールメニューナビゲーションを実現するjs
  • ネイティブ js で作成されたアコーディオン効果ナビゲーション メニュー
  • Flashに匹敵するJSナビゲーションメニュー
  • ナビゲーションドロップダウンメニューの効果を実現するネイティブJS
  • 複数オプション切り替えナビゲーションメニューを実現する js メソッド
  • jsで実装された比較的古典的で実用的なトリガー型ナビゲーションメニュー

<<:  MySQL マルチテーブル結合入門チュートリアル

>>:  Linux環境変数ファイルの簡単な紹介

推薦する

HTTP ヘッダー情報の解釈と分析 (詳細概要)

HTTP ヘッダーの説明1. Accept: Web サーバーに受け入れるメディア タイプを通知しま...

Vue.jsフレームワークはショッピングカート機能を実装します

この記事では、ショッピングカートを実装するためのVue.jsフレームワークの具体的なコードを参考まで...

MySQL 5.7 でブロックポジショニング DDL の問題を解決する

前回の記事「MySQL テーブル構造の変更、メタデータ ロックを知っておく必要があります」では、MD...

インタビューの質問: ホーリー グレイル レイアウトとダブル ウィング レイアウトの違い

序文今日は、聖杯レイアウトとダブルウィングレイアウト、そしてそれらの違いについてお話しします。この2...

Dockerコンテナレイヤーの概念の詳細な説明

目次01 コンテナの一貫性02 レイヤーの概念03 レイヤードデザインの利点今日はコンテナ レイヤー...

CSS を使用して物流の進行状況のスタイルを実装するためのサンプルコード

効果: CSS スタイル: <スタイル タイプ="text/css">...

Maven で tomcat8-maven-plugin プラグインを使用する詳細なチュートリアル

オンラインで多くの記事を検索しましたが、解決策は見つかりませんでした。次のように、tomcat7-m...

Mysql テーブル、列、データベースの追加、削除、変更、クエリの問題の概要

以下は私がまとめた基本的なSQL知識です。主に参考資料として、また将来の他の初心者の助けとして、私自...

HTML+CSS を使用して、画像の右上隅に削除の十字と画像削除ボタンを追加します。

記録として、将来使用される可能性があり、困っている友人も使用できます。 BBはもうやめて、まずはレン...

vue ディレクティブ v-bind の使用と注意点

目次1. v-bind: 要素の属性にデータをバインドできる2. v-bind: は次のように省略で...

Git サーバーを使用してデバッグ ブランチを表示し、修正する方法を 1 日 1 分で学習します。

デバッグブランチプロジェクトの通常の開発中に、以前にリリースされたバージョンにバグがある場合がありま...

Mysql でよく使用される時間、日付、変換関数の概要

この記事では、主に実際のアプリケーションでよく使用されるMySQLの時刻と日付、および変換関数につい...