How to make a dynamic drop-down menu using HTML, CSS and jQuery-JS Tutorial-php.cn

How to make a dynamic drop-down menu using HTML, CSS and jQuery

王林

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

Original

1482 people have browsed it

How to make a dynamic drop-down menu using HTML, CSS and jQuery

How to use HTML, CSS and jQuery to create a dynamic drop-down menu

With the continuous development of Web technology, dynamic drop-down menus have become common in modern web design One of the elements. It provides better user experience and navigation capabilities. In this article, we'll learn how to make a dynamic drop-down menu using HTML, CSS, and jQuery, with some concrete code examples.

HTML Structure
First, let’s build the basic HTML structure. Here is a simple example:

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

Copy after login

CSS Style
Next, we need to use CSS styles to set the appearance of the drop-down menu. Here is a simple example:

/* 清除默认样式 */
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;
}

Copy after login

jQuery Effect
Finally, we need to use jQuery to add some interactive effects. A simple hover function is used here to show and hide the submenu:

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

Copy after login

Conclusion
Through the above steps, we successfully made a dynamic drop-down menu. When the mouse is hovered over Menu 4, the submenu will be displayed. The submenu disappears when the mouse is moved away. This simple example can help beginners understand how to use HTML, CSS and jQuery to create dynamic drop-down menus.

To summarize, making a dynamic drop-down menu requires the following steps: build an HTML structure, use CSS styles to set the appearance, and use jQuery to add interactive effects. Hope this article helps you!

The above is the detailed content of How to make a dynamic drop-down menu using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!