Bagaimana untuk melaksanakan navigasi sekunder kiri dalam javascript

Dengan perkembangan pesat teknologi bahagian hadapan Web, JavaScript telah digunakan secara meluas dalam pelbagai aplikasi Web. Dalam reka bentuk web, bar navigasi adalah salah satu elemen terpenting Ia adalah pintu masuk utama untuk pengguna memasuki laman web dan juga merupakan bahagian penting dalam keseluruhan struktur laman web. Artikel ini akan memperkenalkan cara melaksanakan bar navigasi sekunder kiri JavaScript.

Bar navigasi ialah salah satu komponen paling asas tapak web dan digunakan terutamanya untuk menavigasi pelbagai halaman dalam keseluruhan tapak web. Walau bagaimanapun, bar navigasi sering kelihatan terlalu panjang pada halaman Dalam kes ini, kami biasanya menggunakan bar navigasi kedua untuk menyelesaikan masalah ini. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan bar navigasi sekunder kiri dan menerangkan secara ringkas prinsip pelaksanaannya.

Sebelum melaksanakan bar navigasi sekunder kiri, anda perlu terlebih dahulu menguasai beberapa konsep dan teknologi yang diperlukan. Ini termasuk HTML, CSS dan JavaScript.

1. HTML

HTML ialah bahasa penanda yang digunakan untuk menerangkan kandungan web yang digunakan untuk mentakrif dan menerangkan pelbagai elemen pada halaman, termasuk teks dan imej. pautan, dsb. Apabila melaksanakan bar navigasi sekunder kiri, anda perlu menggunakan HTML untuk menentukan struktur bar navigasi.

2. CSS

CSS ialah bahasa penanda yang digunakan untuk menerangkan gaya halaman web helaian gaya CSS digunakan untuk mentakrif dan menerangkan rupa dan reka letak pelbagai elemen pada halaman tersebut. Apabila melaksanakan bar navigasi sekunder kiri, anda perlu menggunakan CSS untuk menentukan gaya dan reka letak bar navigasi.

3. JavaScript

JavaScript ialah bahasa pengaturcaraan yang digunakan untuk membangunkan aplikasi web Sintaks dan semantiknya adalah serupa dengan bahasa C. Apabila melaksanakan bar navigasi sekunder kiri, JavaScript perlu digunakan untuk merealisasikan interaksi dan kesan dinamik bar navigasi.

Sekarang mari kita mulakan langkah pelaksanaan kita.

Langkah 1: Struktur HTML

Pertama, kita perlu menggunakan HTML untuk mentakrifkan struktur bar navigasi, termasuk bar navigasi utama dan bar navigasi sekunder. Bar navigasi utama ialah pintu masuk ke seluruh tapak web, manakala bar navigasi sekunder ialah submenu bar navigasi utama, digunakan untuk memaparkan beberapa kandungan bar navigasi utama. Berikut ialah struktur HTML ringkas yang digunakan untuk melaksanakan bar navigasi sekunder kiri:

<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>

Dalam kod di atas, kami menggunakan elemen div dan ul untuk mewakili bar navigasi. Antaranya, elemen ul dibahagikan kepada dua bahagian: bar navigasi utama dan bar navigasi sekunder. Bar navigasi utama diwakili oleh li dan teg, manakala bar navigasi sekunder diwakili oleh ul, li dan teg bersarang.

Langkah 2: Gaya CSS

Seterusnya, kita perlu menggunakan gaya CSS untuk menentukan gaya dan reka letak bar navigasi. Helaian gaya terletak dalam teg