实现 CSS 中的侧导航栏

在网页设计中，侧导航栏是经常用到的一种布局方式，本文将介绍如何通过 CSS 实现一个简单的侧导航栏。

HTML 结构

首先，让我们先看一下 HTML 结构。

<div class="sidebar">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
</div>

我们在 sidebar 元素中使用了一个无序列表来表示导航菜单。

CSS 样式

我们需要对导航菜单部分和整个侧导航栏进行样式设置。

.sidebar {
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar li a {
  display: block;
  color: #000;
  font-size: 16px;
  line-height: 40px;
  text-decoration: none;
  padding-left: 20px;
}

.sidebar li a:hover {
  background-color: #ddd;
}

我们使用 position: fixed 和 top: 0; left: 0 来使得侧导航栏固定在网页左侧，并且不受滚动条影响。我们还设置了一个固定的宽度和背景色。overflow-x: hidden 用来防止导航菜单过宽。

我们对 ul 和 li 元素进行了一些基本的样式设置，如把列表样式设为 none，设置内边距和字体大小等。我们还对 a 标签进行了设置，使其具有块级显示属性，并且支持鼠标悬停样式。

完整代码

<div class="sidebar">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
</div>

<style>
  .sidebar {
    width: 200px;
    height: 100%;
    background-color: #f1f1f1;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: 20px;
  }

  .sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sidebar li a {
    display: block;
    color: #000;
    font-size: 16px;
    line-height: 40px;
    text-decoration: none;
    padding-left: 20px;
  }

  .sidebar li a:hover {
    background-color: #ddd;
  }
</style>

以上就是简单的实现 CSS 中的侧导航栏的方法。通过使用 CSS 进行样式设置，可以轻松地调整导航菜单的样式和布局，实现各种复杂的侧导航栏效果。