如何在html中添加侧边栏菜单？

Question

所以我想创建一个带有HTML，CSS或JavaScript的侧边栏菜单，以便在网站中使用。例如，W3 Schools网站有一个侧边菜单，我想复制它。

Answer 1

有一条规则告诉您：如果您可以在CSS中执行某些操作，那么请不要使用JavaScript。幸运的是，您可以使用flexbox布局在CSS中完成此操作。它只是让你移动，对齐，在页面上放置模拟元素。请检查此flexbox cheat sheet。

看看这个Demo：

body {
    display: flex;
    flex-direction: row;

    height: 200px;
}

display: flex - 让body个孩子受到弹性布局的影响。

flex-direction: row - 让所有孩子排成一排。可能的值为：row, row-reverse, column, column-reverse。

body .side-bar {
    background-color:yellow;

    width: 150px
}

body .main-content {
    background-color: red;

    width: 100%
}

width: 150px - 设置侧边栏的宽度。

width: 100% - 设置宽度以填充剩余空间。

Answer 2

我过去创建侧边栏的方式是使用html5和css3编码。我喜欢它在html5中，他们有标签，导航标签和部分标签。

我总是使用导航区域作为主链接列表，通常跨越页面顶部。但是，当我想在侧边栏中包含多个导航区域（例如链接列表）时，我将使用<aside>标记。

使用简单的CSS3编码，您可以非常轻松地设置侧栏部分的属性。 W3Schools网站为此提供了大量的教程。

我希望能帮到你一点=）祝你好运。