CSS web navigation menu: Create various interactive navigation menus

CSS web page navigation menu: Creating various interactive navigation menus requires specific code examples

The navigation menu is one of the most crucial components of the web page. It can help users quickly navigate to various pages of the website. Through the flexible use of CSS, we can create various interactive navigation menus to improve user experience and website usability. In this article, I will introduce some common navigation menu types and give corresponding code examples for reference.

<li>Horizontal navigation menu

Horizontal navigation menu is the most common type of navigation menu. It is usually presented as a row of horizontally arranged links used to navigate to different pages. The following is a code example for a simple horizontal navigation menu:

<ul class="horizontal-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

.horizontal-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.horizontal-menu li {
  display: inline-block;
}

.horizontal-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.horizontal-menu li a:hover {
  background-color: #f1f1f1;
}

The above code uses an unordered list<ul></ul> and list items<li> Create a navigation menu. By setting display: inline-block;, the menu items are arranged horizontally. The background color of menu items changes on mouseover to provide visual feedback.

<li>Vertical Navigation Menu

Vertical navigation menu is another common type of navigation menu. It is usually presented as a vertically arranged column of links used to navigate to different pages. The following is a code example for a simple vertical navigation menu:

<ul class="vertical-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

.vertical-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.vertical-menu li {
  margin-bottom: 10px;
}

.vertical-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.vertical-menu li a:hover {
  background-color: #f1f1f1;
}

The above code also uses unordered lists and list items to create navigation menus. By setting margin-bottom: 10px;, the menu items are arranged vertically with a certain spacing between them. The background color of menu items also changes on mouseover.

<li>Drop-down menu

The drop-down menu is a common interactive navigation menu that can display more menu options and display hidden ones when the mouse is hovered options. The following is a code example of a simple drop-down menu:

<ul class="dropdown-menu">
  <li><a href="#">产品</a>
    <ul>
      <li><a href="#">产品一</a></li>
      <li><a href="#">产品二</a></li>
      <li><a href="#">产品三</a></li>
    </ul>
  </li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

.dropdown-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.dropdown-menu li {
  display: inline-block;
  position: relative;
}

.dropdown-menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

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

.dropdown-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.dropdown-menu li a:hover {
  background-color: #f1f1f1;
}

In the above code, by setting position: relative; and position: absolute;, the drop-down is hidden The menu appears below the parent menu on mouseover. In addition, by setting display: none; and display: block;, the menu can be displayed and hidden.

Through the above code examples, we can create various types of interactive navigation menus. Of course, these are just some basic examples and you can expand and modify them according to your needs to create a more unique navigation menu that suits your website. Good luck creating a beautiful and functional navigation menu!

The above is the detailed content of CSS web navigation menu: Create various interactive navigation menus. For more information, please follow other related articles on the PHP Chinese website!