如何使用 HTML 和 CSS 设计现代侧边栏菜单？

在现代 web 应用中，侧边栏菜单已成为一个很常见的组件。本文将介绍如何使用 HTML 和 CSS 设计一个简单的现代侧边栏菜单。

HTML 结构

<div class="sidebar">
  <div class="brand">
    <a href="#">My App</a>
  </div>
  <ul class="menu">
    <li>
      <a href="#">Dashboard</a>
    </li>
    <li>
      <a href="#">Users</a>
    </li>
    <li>
      <a href="#">Settings</a>
    </li>
  </ul>
</div>

简单解释一下上面的代码，它定义了一个 div 元素，其中包含两个子元素：

• 一个 div 元素，包裹着一个 a 元素，用于显示品牌名称。
• 一个 ul 元素，用于显示菜单项。每个菜单项是一个 li 元素，其中包含一个 a 元素，用于显示菜单项的名称。

CSS 样式

.sidebar {
  width: 200px;
  height: 100%;
  background-color: #101010;
  color: #fff;
}

.brand {
  padding: 20px;
  font-size: 24px;
  font-weight: bold;
}

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

.menu li {
  padding: 10px;
}

.menu li a {
  display: block;
  padding: 5px;
  color: #fff;
  text-decoration: none;
}

.menu li a:hover {
  background-color: #999;
}

简单解释一下上面的代码，它定义了一个名为 sidebar 的样式，它设置了侧边栏的 width、height 和背景颜色等属性。然后，它还定义了一些子元素的样式，例如菜单项的样式等。

最终效果

将上面的 HTML 和 CSS 代码合并到一个 HTML 文件中，然后在浏览器中打开该文件，就可以看到一个简单的侧边栏菜单了。

总结

本文介绍了如何使用 HTML 和 CSS 设计一个简单的现代侧边栏菜单。在实际的 web 应用中，你可以根据需求和美观度，自行修改侧边栏菜单的样式和布局。