Cara Membuat Menu NAV Drop-Down dengan HTML5, CSS3, dan JQuery-tutorial css-php.cn

Cara Membuat Menu NAV Drop-Down dengan HTML5, CSS3, dan JQuery

Christopher Nolan

Lepaskan： 2025-03-04 09:46:17

asal

862 orang telah melayarinya

How to Create a Drop-Down Nav Menu With HTML5, CSS3, and JQuery

Tutorial ini menunjukkan membina menu navigasi dropdown responsif menggunakan HTML5, CSS3, dan JQuery. Kami akan meliputi struktur HTML, gaya CSS, dan fungsi jQuery untuk mencipta pengalaman yang lancar dan mesra pengguna.

Persediaan Projek:

, index.html, dan style.css. script.js

Termasuk perpustakaan: Mulailah dengan menghubungkan jQuery dan font hebat dalam : index.html

<!DOCTYPE html>


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dropdown Menu</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer">

Salin selepas log masuk

Struktur html (

index.html

<div class="header-container">
  <div class="logo">
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">LOGO</a>
  </div>
  <nav>
    <ul class="menu">
      <li class="nav-item">
        <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Nav Link 1</a>
        <i class="fas fa-arrow-down"></i>
        <div class="submenu">
          <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Sub Nav Link 1</a>
          <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Sub Nav Link 2</a>
          <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Sub Nav Link 3</a>
          <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Sub Nav Link 4</a>
        </div>
      </li>
      <!-- Repeat for other Nav Links -->
    </ul>
  </nav>
</div>

Salin selepas log masuk

<li> CSS Styling (

style.css

fungsi jQuery ():

.submenu {
  display: none;
  position: absolute;
  background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
  /* Add your styling here */
}

.nav-item:hover .submenu {
  display: block;
}

/* Add more styles as needed */

Salin selepas log masuk

Gunakan jQuery untuk meningkatkan pengalaman pengguna. Ini mungkin melibatkan menambah animasi atau meningkatkan kebolehcapaian. (Contoh Menggunakan

script.js

toggleClass

$('.nav-item').on('mouseover', function() {
  $(this).toggleClass('navActive');
});

Salin selepas log masuk

HTML mencipta struktur navigasi asas dengan elemen bersarang

untuk submenus. CSS pada mulanya menyembunyikan submenus dan kemudian menggunakan kelas pseudo untuk memaparkannya apabila item senarai induknya melayang. Kod jQuery (pilihan) menambah fungsi dinamik, seperti peralihan lancar atau interaksi yang lebih maju.

ingat untuk menyesuaikan kod CSS dan jQuery untuk memadankan keutamaan reka bentuk anda dan fungsi yang dikehendaki. Ini menyediakan asas untuk mewujudkan menu navigasi dropdown yang disesuaikan dan responsif.

Atas ialah kandungan terperinci Cara Membuat Menu NAV Drop-Down dengan HTML5, CSS3, dan JQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!