要創(chuàng)建一個CSS導(dǎo)航菜單，首先使用HTML的nav元素和無序列表構(gòu)建結(jié)構(gòu)，然后通過Flexbox實現(xiàn)水平布局，并添加懸停效果與響應(yīng)式設(shè)計。1. 使用語義化HTML結(jié)構(gòu)，包含nav、ul、li和a標(biāo)簽；2. 用Flexbox設(shè)置display: flex、gap和list-style: none實現(xiàn)水平排列；3. 添加鏈接樣式、懸停效果、過渡動畫和焦點狀態(tài)；4. 使用媒體查詢調(diào)整小屏幕下的flex-direction為column以實現(xiàn)垂直堆疊布局。整個過程簡單清晰，適合掌握基本布局技巧。

Creating a navigation menu with CSS doesn’t have to be complicated. You can build one from scratch using just HTML and CSS, and it’s a great way to get hands-on with layout techniques like flexbox or grid.

Here’s how to do it step by step.

---

Basic HTML structure for a nav menu

Before diving into styling, you need the right HTML setup. A simple <nav> element containing an unordered list (<ul>) with list items (<li>) and anchor tags (<a>) is standard practice.

<nav>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

This gives you semantic structure and makes styling easier later. The key here is keeping your markup clean and avoiding unnecessary divs or classes.

---

Styling the menu horizontally with Flexbox

By default, list items stack vertically. To make them appear side by side, use Flexbox on the <ul>:

.menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1rem;
}

A few quick notes:

<ul><li>display: flex turns your list into a horizontal layout.<li>list-style: none removes bullets.<li>gap adds spacing between menu items (instead of margins).

You can also center the entire menu on the page by wrapping it in a container and applying justify-content: center.

---

Adding hover effects and active states

Plain links are boring — let’s make them respond when users interact.

Start with basic link styles:

.menu a {
  text-decoration: none;
  color: #333;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

Now add hover and active styles:

.menu a:hover,
.menu a:focus {
  background-color: #f0f0f0;
}

.menu a.active {
  background-color: #007bff;
  color: white;
}

A few things to note:

<ul><li>Use transition for smooth visual changes.<li>Add a focus style for keyboard accessibility.<li>.active class can be added dynamically via JavaScript or server-side code to highlight the current page.

---

Making it responsive

Menus look great on desktop, but they need to adapt on smaller screens. One common approach is stacking the items vertically at mobile widths.

Use a media query like this:

@media (max-width: 600px) {
  .menu {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu li {
    width: 100%;
  }
}

If you want to hide the menu on small screens and show a hamburger icon instead, that requires a bit more work — like adding a toggle button and some JavaScript. But for now, this simple adjustment works well for basic menus.

---

That’s the core of building a custom navigation menu with CSS. It's not hard once you understand the basics, but easy to overlook small details like spacing, responsiveness, or accessibility. Keep it clean, test on different screen sizes, and don’t forget to highlight the current page.

基本上就這些。

The above is the detailed content of CSS tutorial for building a navigation menu from scratch. For more information, please follow other related articles on the PHP Chinese website!