网页制作怎么用css制作菜单-网页设计-锦华智联科技

第一步：理解菜单的基本结构

无论菜单样式多么复杂，其核心结构都是 HTML 的列表 (<ul> 和 <li>)，列表天生就是用来存放菜单项的,结构清晰且语义化。

（图片来源网络，侵删）

基本 HTML 结构：

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

<nav>: 一个 HTML5 语义标签，专门用于导航区域，对 SEO 和可访问性都很好。
<ul>: 无序列表,代表菜单本身。
<li>: 列表项,代表菜单中的每一个选项。
<a>: 锚点标签,用于创建可点击的链接。

第二步：CSS 核心概念

在制作菜单时，我们需要掌握几个关键的 CSS 属性：

display: 控制元素的显示方式。
- block: 元素会独占一行，默认 <ul> 和 <li> block。
- inline: 元素不会独占一行，多个 inline 元素可以排在同一行。<a> 默认是 inline。
- inline-block: 结合了 inline 和 block 的特点，可以排在一行,又能设置宽高。
- flex: 弹性布局，现代布局的利器,特别适合制作复杂的菜单。
list-style: 控制列表项的标记（如小圆点），我们通常在菜单中将其设为 none 来去除默认样式。
text-decoration: 控制文本的装饰，如 none（去除下划线）。
padding 和 margin: 用于控制元素的内边距和外边距,是调整间距的关键。
hover: 伪类，当鼠标悬停在元素上时生效,常用于制作菜单项的悬停效果。

水平导航菜单

这是最常见的一种菜单,所有菜单项排成一行。

HTML

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

CSS

/* 1. 重置和基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 让 padding 和 width 的计算更直观 */
}
body {
  font-family: Arial, sans-serif;
}
/* 2. 导航容器样式 */
.horizontal-nav ul {
  list-style: none; /* 去掉列表前的点 */
  background-color: #333; /* 菜单背景色 */
}
/* 3. 菜单项样式 */
.horizontal-nav li {
  display: inline-block; /* 关键：让列表项横向排列 */
}
.horizontal-nav a {
  display: block; /* 让链接可以充满整个列表项，方便点击 */
  color: white; /* 文字颜色 */
  text-align: center;
  padding: 14px 16px; /* 上下 14px, 左右 16px 的内边距 */
  text-decoration: none; /* 去掉下划线 */
}
/* 4. 鼠标悬停效果 */
.horizontal-nav a:hover {
  background-color: #111; /* 鼠标悬停时的背景色 */
}

代码解释：

（图片来源网络，侵删）

display: inline-block; 是让 <li> 横向排列的关键。
display: block; 给 <a> 标签，是为了让整个 <li> 区域都可以响应鼠标点击和悬停,而不仅仅是文字部分。
padding 为菜单项提供了舒适的间距和点击区域。

垂直下拉菜单

这是一种更高级的菜单，当鼠标悬停在某个父菜单项上时,会显示一个子菜单。

HTML

<nav class="dropdown-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品服务</a>
      <!-- 子菜单 -->
      <ul class="submenu">
        <li><a href="#">网站开发</a></li>
        <li><a href="#">移动应用</a></li>
        <li><a href="#">UI/UX 设计</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS

/* 基础样式和水平菜单类似，这里只写关键部分 */
.dropdown-nav ul {
  list-style: none;
  background-color: #333;
  padding: 0;
  margin: 0;
}
.dropdown-nav li {
  position: relative; /* 关键：为子菜单定位提供参考 */
}
.dropdown-nav a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  text-align: center;
}
/* 鼠标悬停时显示子菜单 */
.dropdown-nav li:hover .submenu {
  display: block; /* 默认是隐藏的，悬停时显示 */
}
/* 子菜单样式 */
.submenu {
  display: none; /* 默认隐藏子菜单 */
  position: absolute; /* 关键：脱离文档流，相对于父 li 定位 */
  top: 100%; /* 定位在父菜单项的正下方 */
  left: 0;
  background-color: #444;
  min-width: 160px; /* 子菜单的宽度 */
}
.submenu li {
  display: block; /* 子菜单项必须是块级元素，垂直排列 */
}
.submenu a:hover {
  background-color: #555;
}

代码解释：

position: relative; 在父 <li> 上设置，是为了让子菜单（.submenu）的 position: absolute; 相对于这个父 <li> 进行定位,而不是相对于整个浏览器窗口。
.submenu 默认设置 display: none; 来隐藏。
.dropdown-nav li:hover .submenu 这个选择器是核心，它表示“当鼠标悬停在 .dropdown-nav 的 <li> 元素上时，显示其内部的 .submenu 元素”。

现代的汉堡菜单（响应式）

在移动设备上，水平菜单会占用太多空间，所以通常会变成一个“汉堡”图标,点击后展开菜单。

HTML

<nav class="hamburger-nav">
  <div class="hamburger-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul class="menu-links">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS

.hamburger-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 10px 20px;
}
.hamburger-icon {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.hamburger-icon span {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
  transition: 0.3s; /* 为动画效果添加过渡 */
}
.menu-links {
  list-style: none;
  display: flex; /* 默认横向排列，用于桌面端 */
}
.menu-links a {
  color: white;
  text-decoration: none;
  padding: 10px;
  display: block;
}
/* 为了演示，这里用 CSS 来模拟点击效果。
   在实际项目中，通常会配合 JavaScript 来切换一个 .active 类。
   这里我们假设添加了一个 .active 类到 .menu-links 上。 */
/* .menu-links.active { */
/*   display: block; */
/* } */

使用 JavaScript 来实现点击切换（推荐）

const hamburgerIcon = document.querySelector('.hamburger-icon');
const menuLinks = document.querySelector('.menu-links');
hamburgerIcon.addEventListener('click', () => {
  // 切换 .active 类
  menuLinks.classList.toggle('active');
});

在 CSS 中为 .menu-links 添加默认的隐藏样式，并在 .active 状态下显示：

/* 在上面的 CSS 基础上添加 */
.menu-links {
  /* ... 其他样式 ... */
  display: none; /* 默认隐藏 */
}
/* 当添加了 .active 类时，显示菜单 */
.menu-links.active {
  display: flex; /* 或者 flex-direction: column; 如果你希望垂直展开 */
  flex-direction: column; /* 改为垂直排列，适合移动端 */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #333;
}

总结与最佳实践

从结构开始: 先用语义化的 HTML ( <nav>, <ul>, <li>, <a> ) 搭建好菜单的骨架。
重置样式: 使用 * { margin: 0; padding: 0; box-sizing: border-box; } 可以避免很多默认样式带来的麻烦。
善用 display: inline-block 用于简单的横向排列，flex 用于更灵活的现代布局，block 用于垂直排列和链接区域。
position 是关键: 在制作下拉菜单时，relative 和 absolute 的组合是定位子菜单的精髓。
hover 增强交互: 为菜单项添加悬停效果,能让用户清楚地知道当前可以点击哪里。
响应式设计: 使用媒体查询 (@media) 和 flexbox/grid 来让菜单在不同屏幕尺寸下（桌面和移动）有不同的表现,汉堡菜单就是响应式设计的典型应用。
可访问性: 确保菜单可以用键盘操作（Tab 键导航），并为 <a> 标签提供有意义的 href 值。

希望这个详细的指南能帮助你掌握使用 CSS 制作菜单！从简单的水平菜单开始，逐步尝试下拉菜单和响应式菜单,很快你就能熟练运用了。