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環境変数ファイルの簡単な紹介

推薦する

MySql マスタースレーブレプリケーションの実装原理と構成

データベースの読み取りと書き込みの分離は、トラフィック量の多い大規模システムやインターネット アプリ...

Docker で Node プロジェクトをビルドしてデプロイする方法

目次DockerとはクライアントサイドDocker基本的なDocker操作画像名画像をプルするその他...

DockerはElasticsearch7.6クラスタをインストールし、パスワードを設定します

Elasticsearch 6.8 以降、無料ユーザーは X-Pack のセキュリティ機能を使用でき...

MySQLのexplain型の詳細な説明

導入:多くの場合、さまざまな選択ステートメントを使用して必要なデータを照会した後、多くの人は作業が正...

Vue.js と MJML でレスポンシブなメールを作成する

MJML は、開発者が美しく、応答性に優れ、あらゆるデバイスやメール クライアントで動作する魅力的な...

MySQLデータベースで外部キー制約を使用する必要があるかどうかの詳細な説明

1. はじめに外部キー制約を使用するかどうかという話題は、すでに決まり文句になっています。学校では、...

15 分で学べる並列アーティファクト GNU Parallel 入門ガイド

GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...

VMware vSphere6.0 サーバー仮想化の展開とインストールの図 (詳細な手順)

1. VMware vSphere 導入の早期計画のポイント1. vSphereの利点(わずかに)...

JS を使用してバイナリ ツリー トラバーサル アルゴリズムのサンプル コードを実装する

目次序文1. バイナリツリー1.1. 二分木の走査1.2. jsを使用してバイナリツリーを表現する1...

eCharts でパーセンテージ付きの横棒グラフを実装する方法

目次サンプルコードレンダリングコード分​​析要約するサンプルコード var データ = [220, ...

MySQLにおけるビューの作成(CREATE VIEW)と使用制限の詳しい説明

この記事では、例を使用して、MySQL ビューの作成 (CREATE VIEW) と使用上の制限につ...

Vue が scss (mixin) をグローバルに導入

目次1. ミックスイン.scss 2. 単一ファイルの使用3. グローバルマウント3.1 依存関係の...

MySQL トランザクション制御フローと ACID 特性

目次1. ACIDの特性トランザクション制御構文3. トランザクション同時実行例外1. ダーティリー...

Linux でハードディスクのサイズを確認し、ハードディスクをマウントする方法

Linux には、マウントされたハードディスクとマウントされていないハードディスクの 2 種類のハー...

vue3でDOMをマウントするためのプラグインを書く際の問題について

vue2と比較して、vue3にはアプリの概念が追加され、vue3プロジェクトの作成も // メイン....