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 <style> dan diperlukan untuk menentukan gaya dan reka letak bar navigasi. Kod khusus adalah seperti berikut:

.sidebar {
   width: 250px;
   height: 100%;
   position: fixed;
   left: 0;
   top: 0;
   background-color: #333;
   color: #fff;
}

.main-nav {
   list-style: none;
   margin: 0;
   padding: 0;
}

.main-nav li {
   margin: 0;
   padding: 0;
}

.main-nav li a {
   display: block;
   padding: 10px;
   text-decoration: none;
   color: #fff;
}

.sub-nav {
   display: none;
   list-style: none;
   margin: 0;
   padding: 0;
}

.sub-nav li a {
   display: block;
   padding: 10px 20px;
   text-decoration: none;
   color: #fff;
   background-color: #444;
}

.main-nav li:hover .sub-nav {
   display: block;
}

Dalam kod di atas, kami mentakrifkan kelas .bar sisi untuk mengawal gaya dan kedudukan bar navigasi. Pada masa yang sama, kami menggunakan dua kelas, navigasi utama dan sub-nav, masing-masing untuk mewakili bar navigasi utama dan bar navigasi sekunder. Untuk membenarkan bar navigasi kedua disembunyikan dan ditunjukkan, kami menggunakan atribut display:none untuk menetapkan keadaan awalnya kepada tersembunyi.

Langkah 3: Interaksi JavaScript

Kini, kita perlu menggunakan JavaScript untuk melaksanakan interaksi bar navigasi. Khususnya, fungsi yang perlu kami laksanakan ialah: apabila pengguna menuding tetikus pada bar navigasi utama, bar navigasi sekunder muncul apabila pengguna mengalihkan tetikus dari bar navigasi utama, bar navigasi kedua hilang. Berikut ialah kod pelaksanaan:

var navItems = document.querySelectorAll(".sidebar li");

for(var i = 0; i < navItems.length; i++){
   navItems[i].addEventListener("mouseover", function(){
      var subNav = this.querySelector(".sub-nav");
      if(subNav){
         subNav.style.display = "block";
      }
   });

   navItems[i].addEventListener("mouseout", function(){
      var subNav = this.querySelector(".sub-nav");
      if(subNav){
         subNav.style.display = "none";
      }
   });
}

Dalam kod di atas, kami menggunakan JavaScript untuk mendapatkan semua elemen li dalam bar navigasi dan menambah dua pendengar acara untuk setiap elemen li: alih tetikus dan keluar tetikus. Apabila tetikus bergerak ke atas bar navigasi utama, JavaScript akan secara automatik mengesan sama ada elemen li mempunyai bar navigasi sekunder (iaitu, sama ada ia mengandungi kelas .sub-nav, atribut paparannya akan ditetapkan untuk menyekat,). supaya Ia memaparkan apabila tetikus dialihkan, JavaScript menetapkan sifat paparannya kepada tiada, menjadikannya tersembunyi.

Ringkasnya, artikel ini memperkenalkan secara terperinci cara menggunakan JavaScript untuk melaksanakan bar navigasi sekunder kiri. Melalui gabungan HTML, CSS dan JavaScript, kami boleh melaksanakan bar navigasi yang mudah dan praktikal untuk navigasi web dan pautan berfungsi. Ini juga menunjukkan bahawa JavaScript telah menjadi salah satu teknologi penting dalam aplikasi web moden dan harus digunakan dan dipromosikan dengan lebih meluas.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan navigasi sekunder kiri dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!