JavaScriptで左側のセカンダリナビゲーションを実装する方法

Web フロントエンド技術の急速な発展に伴い、JavaScript はさまざまな Web アプリケーションで広く使用されるようになりました。 Web デザインにおいて、ナビゲーション バーは最も重要な要素の 1 つであり、ユーザーが Web サイトにアクセスするためのメインの入り口であり、Web サイト全体の構造の重要な部分でもあります。この記事では、JavaScript の左側のセカンダリ ナビゲーション バーを実装する方法を紹介します。

ナビゲーション バーは Web サイトの最も基本的なコンポーネントの 1 つであり、主に Web サイト全体のさまざまなページに移動するために使用されます。ただし、ページ上のナビゲーション バーが長すぎるように見える場合が多く、この場合、通常は 2 番目のナビゲーション バーを使用してこの問題を解決します。この記事では、JavaScript を使用して左側のセカンダリ ナビゲーション バーを実装する方法を紹介し、その実装原理を簡単に説明します。

左側のセカンダリ ナビゲーション バーを実装する前に、まずいくつかの必要な概念とテクノロジを習得する必要があります。これには、HTML、CSS、JavaScript が含まれます。

1. HTML

HTML は、Web コンテンツを記述するために使用されるマークアップ言語です。HTML タグは、テキストや画像など、ページ上のさまざまな要素を定義および記述するために使用されます。リンクなど左側のセカンダリ ナビゲーション バーを実装する場合は、HTML を使用してナビゲーション バーの構造を定義する必要があります。

2. CSS

CSS は、Web ページのスタイルを記述するために使用されるマークアップ言語です。CSS スタイル シートは、ページ上のさまざまな要素の外観とレイアウトを定義および記述するために使用されます。 . .左側のセカンダリ ナビゲーション バーを実装する場合、CSS を使用してナビゲーション バーのスタイルとレイアウトを定義する必要があります。

3. JavaScript

JavaScript は、Web アプリケーションの開発に使用されるプログラミング言語であり、その構文とセマンティクスは C 言語に似ています。左側のセカンダリ ナビゲーション バーを実装する場合、JavaScript を使用してナビゲーション バーのインタラクションと動的な効果を実現する必要があります。

さあ、実装手順を始めましょう。

ステップ 1: HTML 構造

まず、HTML を使用して、メイン ナビゲーション バーとセカンダリ ナビゲーション バーを含むナビゲーション バーの構造を定義する必要があります。メイン ナビゲーション バーは Web サイト全体への入り口であり、セカンダリ ナビゲーション バーはメイン ナビゲーション バーのサブメニューであり、メイン ナビゲーション バーの一部のコンテンツを表示するために使用されます。以下は、左側の 2 番目のナビゲーション バーを実装するために使用される単純な HTML 構造です。

<div class="sidebar">
   <ul class="main-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a>
         <ul class="sub-nav">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
         </ul>
      </li>
      <li><a href="#">Services</a>
         <ul class="sub-nav">
            <li><a href="#">Service 1</a></li>
            <li><a href="#">Service 2</a></li>
            <li><a href="#">Service 3</a></li>
         </ul>
      </li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
   </ul>
</div>

上記のコードでは、ナビゲーション バーを表すために div 要素と ul 要素を使用します。このうち、ul 要素は、メイン ナビゲーション バーとセカンダリ ナビゲーション バーの 2 つの部分に分かれています。メイン ナビゲーション バーは li タグと a タグで表され、セカンダリ ナビゲーション バーはネストされた ul、li タグ、および a タグで表されます。

ステップ 2: CSS スタイル

次に、CSS スタイルを使用してナビゲーション バーのスタイルとレイアウトを定義する必要があります。スタイル シートは