Implementation of html menu-Front-end Q&A-php.cn

Implementation of html menu

WBOY

Release： 2023-05-21 16:11:34

Original

3200 people have browsed it

HTML menu is a component often used in web design and can be used to display website navigation and operation options. This article will explore how to create a basic HTML menu using HTML and CSS.

1. Use HTML to create a menu bar

In HTML, we can use the <ul> and <li> tags to build Menu Bar. <ul> represents an unordered list, while <li> is used to represent each menu item. The code is as follows:

<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">产品介绍</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

Copy after login

In the above code, we create an unordered list containing four menu items. Each menu item contains a link <a> that links to another page. Re-run the code to see a vertically arranged menu bar. This menu bar still lacks a style and interaction effect. We will add styles below.

2. Use CSS to add menu bar styles

Now we need to add some styles to the menu bar to make it more attractive and easier to read. We can control the appearance of the menu bar through CSS style sheets. The code is as follows:

<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  li {
    float: left;
  }
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  li a:hover {
    background-color: #111;
  }
</style>

Copy after login

In the above code, we use the following CSS properties:

<ul><li>list-style-type: none: Change the default value of the list item Symbols removed for a cleaner look. <li>margin: 0; padding: 0;: Set the inner and outer margins of the menu bar to 0 to remove the default spacing. <li>overflow: hidden: Used to clear floating elements to prevent layout problems. <li>background-color: #333: used to set the background color of the menu bar. <li>float: left: Make each menu item float to the left and display it on one line. <li>display: block: Makes link elements block-level elements, allowing us to apply styles to them. <li>color: white: Set the link's text to white. <li>text-align: center: Center-align the text content of the menu item. <li>padding: 14px 16px: Set the padding of each menu item. <li>text-decoration: none: Remove the default underline of the link. <li>li a:hover: Adds a new background color to the link element when the user hovers over the menu item.

3. Use CSS to implement drop-down menu

The drop-down menu is a common HTML menu type, which presents a multi-level menu structure in a vertical downward form. The code below demonstrates how to implement a simple drop-down menu using an unordered list and CSS:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">首页</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系我们</a></li>
</ul>

</body>
</html>

Copy after login

In this example, we add a second menu item to the drop-down menu. A drop-down menu consists of a normal menu item and a container containing links. A drop-down menu container appears when the mouse is hovered over a normal menu item. The container contains menu items and additional styles. We use CSS to style the menu items and drop-down menus.

It is worth noting that we use JavaScript in this example to simulate a trigger to control the display and hiding state of the drop-down menu when the mouse is hovered. This code looks like this:

<a href="javascript:void(0)" class="dropbtn">Dropdown</a>

Copy after login

In addition, the following CSS properties are used:

<ul> <li> .dropdown: Added for a container element containing a drop-down menu style. <li> .dropdown-content: Add styles to the menu items of the dropdown menu container and designate them as absolutely positioned elements. <li> .dropdown:hover .dropdown-content: Set the dropdown-content container to when the mouse hovers over the dropdown element. visible.

4. Summary

HTML menu is a commonly used component in website design. It is usually used to display the navigation and operation options of the website. We can usually create basic HTML menus using HTML and CSS. To implement a drop-down menu, we need to add some additional CSS and JavaScript code to control the display and hiding of the drop-down menu. When designing a menu, be sure to pay attention to its ease of use and readability, ensuring users can easily find the information they need.

The above is the detailed content of Implementation of html menu. For more information, please follow other related articles on the PHP Chinese website!