How to implement menu navigation in css

CSS is a powerful design language that can be used to beautify the style and layout of web page elements. Among them, implementing menu navigation is a common application of CSS. In this article, we will detail how to implement menu navigation using CSS.

1. HTML Basic Structure

Before we start writing CSS styles, we need to understand the basic structure of HTML. In this example, we need to create a menu navigation and define its basic structure. The following is a basic HTML code:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

In this HTML structure, we use the <nav> tag to define menu navigation. The <ul> tag is used to create an unordered list, and the list items use the <li> tag. Each list item contains a link, using the <a> tag. Now that we have defined the basic structure of the menu navigation, we will start writing CSS styles

2. Basic styles

Before starting the style design, you can first add some to the entire menu The basic styles are as follows:

nav {
  background-color: #333;
  font-size: 18px;
  border-radius: 5px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

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

In these basic styles, we set the background color, font size, border rounded corners and other styles of the menu navigation. For the unordered list, we set its display style to None, set both inner and outer margins to 0, and each list item is an inline block-level element with certain margins. Styles for link styles include setting the text color to white, setting no underlining, padding, etc.

3. Mouseover and selection styles

Next, we can add style effects for mouseover and selection. For example, when the mouse moves over a link, we want the link background color to change to indicate to the user that the current link is active. This effect can be achieved by the following code:

a:hover {
  background-color: #555;
}

a:active {
  background-color: #777;
}

When the mouse hovers over the link, the background color of the link will turn into dark gray; when the user clicks the link, the background color will further turn into light gray , to highlight the link's active status.

4. Drop-down menu

For main menu items with submenus, we may need to implement the effect of drop-down menus so that users can access submenu items more conveniently. Drop-down menus can be implemented using CSS pseudo-classes and their properties. The drop-down menu can be added to the main menu item by the following code:

li:hover ul {
  display: block;
}

ul ul {
  display: none;
  position: absolute;
  top: 40px;
  background-color: #555;
}

ul ul li {
  display: block;
  width: 200px;
}

ul ul li a {
  padding: 8px;
}

In this code, we use the li:hover pseudo class to detect whether the mouse is hovering over the main menu on the item. If so, display the dropdown menu in the child element below. For the drop-down menu, since it is actually below the main menu item, we need to absolutely position it and place it below the main menu item. The text color and background color of drop-down menus may also be slightly different so that users can clearly differentiate between main menu items and submenu items.

5. Responsive Design

When designing a website, we should take into account the differences between different devices. Therefore, in order to ensure that the menu navigation displays properly on mobile devices, we need to add some responsive design styles. For example, we might need to hide a dropdown menu on mobile devices and add specific styling on touchscreen devices. This can be achieved with the following code:

@media screen and (max-width: 768px) {
  ul {
    display: none;
    position: absolute;
    top: 60px;
    width: 100%;
    background-color: #333;
  }

  li {
    display: block;
    margin: 0;
  }

  li:hover ul {
    display: none;
  }

  a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #fff;
  }
}

In this code, we have added a @media media query to detect the screen size of the device. Some styles change if the screen width is less than or equal to 768 pixels. For example, we'll disable the drop-down menu and stack the menu items on top of each other while adding a bottom border to differentiate each menu item. Additionally, we moved the entire menu to the top of the page using absolute positioning to ensure the menu is easier to use on touchscreen devices.

The above is the style design required to implement menu navigation. Just copy these CSS style codes and add them to your web page. Of course, in actual development, some changes will need to be made based on the specific requirements of the website, but they provide a good starting point for adding a beautiful menu navigation to your website.

The above is the detailed content of How to implement menu navigation in css. For more information, please follow other related articles on the PHP Chinese website!