Bagaimana untuk membuat menu drop-down dinamik menggunakan HTML, CSS dan jQuery-tutorial js-php.cn

Bagaimana untuk membuat menu drop-down dinamik menggunakan HTML, CSS dan jQuery

王林

Lepaskan： 2023-10-25 12:28:57

asal

1481 orang telah melayarinya

Bagaimana untuk membuat menu drop-down dinamik menggunakan HTML, CSS dan jQuery

Cara membuat menu drop-down dinamik menggunakan HTML, CSS dan jQuery

Dengan pembangunan berterusan teknologi web, menu drop-down dinamik telah menjadi salah satu elemen biasa dalam reka bentuk web moden. Ia memberikan pengalaman pengguna dan keupayaan navigasi yang lebih baik. Dalam artikel ini, kita akan belajar cara membuat menu lungsur turun dinamik menggunakan HTML, CSS dan jQuery, dengan beberapa contoh kod konkrit.

Struktur HTML
Mula-mula, mari bina struktur HTML asas. Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
<head>
  <title>动态下拉菜单</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">菜单1</a></li>
      <li><a href="#">菜单2</a></li>
      <li><a href="#">菜单3</a></li>
      <li class="dropdown">
        <a href="#">菜单4</a>
        <ul class="submenu">
          <li><a href="#">子菜单1</a></li>
          <li><a href="#">子菜单2</a></li>
          <li><a href="#">子菜单3</a></li>
        </ul>
      </li>
      <li><a href="#">菜单5</a></li>
    </ul>
  </nav>
</body>
</html>

Salin selepas log masuk

Gaya CSS
Seterusnya, kita perlu menggunakan gaya CSS untuk menetapkan penampilan menu lungsur turun. Berikut ialah contoh mudah:

/* 清除默认样式 */
body, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 导航菜单样式 */
nav ul.menu li {
  display: inline-block;
  position: relative;
}

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

nav ul.menu li.dropdown:hover .submenu {
  display: block;
}

/* 子菜单样式 */
nav ul.menu li .submenu {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #333;
}

nav ul.menu li .submenu li {
  display: block;
}

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

Salin selepas log masuk

Kesan jQuery
Akhir sekali, kita perlu menambah beberapa kesan interaktif menggunakan jQuery. Fungsi tuding mudah digunakan di sini untuk menunjukkan dan menyembunyikan submenu:

$(document).ready(function() {
  $('nav ul.menu li.dropdown').hover(
    function() {
      $(this).find('.submenu').stop().slideDown();
    },
    function() {
      $(this).find('.submenu').stop().slideUp();
    }
  );
});

Salin selepas log masuk

Kesimpulan
Melalui langkah di atas, kami berjaya membuat menu lungsur turun dinamik. Apabila tetikus dilegar di atas Menu 4, submenu akan dipaparkan. Submenu hilang apabila tetikus dialihkan. Contoh mudah ini boleh membantu pemula memahami cara menggunakan HTML, CSS dan jQuery untuk mencipta menu lungsur turun dinamik.

Ringkasnya, membuat menu lungsur turun dinamik memerlukan langkah berikut: membina struktur HTML, gunakan gaya CSS untuk menetapkan penampilan dan gunakan jQuery untuk menambah kesan interaktif. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk membuat menu drop-down dinamik menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!