CSS 导航栏图标
使用 CSS 创建带图标的导航栏
以下是一个使用纯 CSS 设计的导航栏，包含图标（使用内嵌 SVG 或字体图标）、悬停效果、响应式适配和可选的下拉菜单。代码简洁，易于集成到现有项目，并可与 JavaScript 结合实现动态功能。
实现思路
- HTML 结构：
- 使用
<nav>包含一个<ul>，每个<li>表示一个导航项。 - 图标通过
<span>或伪元素（::before）以 SVG 或字体图标形式添加。
- CSS 样式：
- 导航栏：水平布局（
flex或inline-block），带背景色和阴影。 - 图标：使用内嵌 SVG 或字体图标（如 Font Awesome），调整大小和间距。
- 交互：悬停时改变背景或颜色，添加过渡动画。
- 响应式：小屏幕时切换为垂直布局或汉堡菜单。
- 扩展性：
- 支持下拉菜单（hover 或点击触发）。
- 适配暗色模式。
- 可与 JavaScript 集成实现动态切换。
完整代码示例
以下是 HTML 和 CSS 代码，创建一个带图标的水平导航栏，支持悬停效果和响应式设计。保存为 .html 文件即可在浏览器中测试。
CSS 导航栏带图标