📌  相关文章
📜  纯 CSS 菜单(1)

📅  最后修改于: 2023-12-03 15:27:32.600000             🧑  作者: Mango

纯 CSS 菜单

什么是纯 CSS 菜单？

纯 CSS 菜单是一种仅使用 CSS 样式表来实现菜单功能的设计方法。其优点在于不需要借助 JavaScript 或其他编程语言，只需通过 CSS 样式表中的伪类和属性选择器来实现，简单、轻便、易维护。

如何实现纯 CSS 菜单？
1. 使用无序列表 HTML 标签

为了实现一个可操作的菜单，我们需要先在 HTML 代码中创建一个无序列表，并设定对应的类名和 ID 号。

<ul class="menu">
  <li><a href="#">菜单1</a></li>
  <li><a href="#">菜单2</a></li>
  <li><a href="#">菜单3</a></li>
</ul>
2. 使用 CSS 样式表

接下来，我们需要在 CSS 样式表中设定对应的样式属性，以实现菜单的基本样式。常见的属性包括：列表内边距、设定宽度、背景颜色、字体样式等。样式表如下：

ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width:200px;
  background-color: #f1f1f1;
  font-size: 20px;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #555;
  color: white;
}
3. 添加交互效果

最后，我们可以为菜单添加一些简单的交互效果，以增强用户体验。常见的交互效果包括：鼠标悬停时字体变色、点击菜单后的样式变化等。实现代码如下：

/* 点击菜单后的样式变化 */
ul.menu li.selected a {
  background-color: #555;
  color: white;
}

/* 鼠标悬停时字体变色 */
ul.menu li:hover a{
    color:#FF4975;
}
在页面中应用纯 CSS 菜单

为了在页面中使用纯 CSS 菜单，我们需要将以上的 HTML 代码和 CSS 样式表代码集成到自己的网站中。实现方法有多种途径，比如：直接写在 HTML 文件的 head 标签中，或者建立单独的 CSS 文件来引入样式表。

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
	<!-- 引入 CSS 文件 -->
	<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
	<!-- 添加菜单 -->
	<ul class="menu">
	  <li><a href="#">菜单1</a></li>
	  <li><a href="#">菜单2</a></li>
	  <li><a href="#">菜单3</a></li>
	</ul>
</body>
</html>
总结

纯 CSS 菜单是一种轻便、易维护、无需编写 JavaScript 代码的菜单设计方法。通过无序列表和 CSS 样式表的搭配，我们可以轻松实现一个简单而美观的菜单，为用户提供更好的使用体验。