CSS Sidebars: A Beginner's Guide

侧边栏是网站导航的主要内容 - 它们对用户很方便，并确保始终可以看到某些页面元素。在其中，您可以放置​​链接，菜单，小部件，CTA，显示广告等等。

In this article, we’ll walk through several ways to make a sidebar with CSS: We’ll cover static sidebars, fixed and sticky sidebars, full-page sidebars, sidebars in CSS grids, and, finally, collapsible sidebars. That’s a lot to learn, so let’s dive in.

How to Create a Sidebar in CSS

The simplest way to implement a sidebar is with a static sidebar element (highlighted in blue below) that spans the height of the page and is positioned on the side of the screen.

To make this, use the following HTML and CSS:

<！ -  html->


菜单项1 

菜单项2 

菜单项3 




<！ - 身体内容 - >

/* CSS */

。sidebar {
身高：100％；
宽度：150px;
position: absolute;
左：0;
顶部：0;
台padd上阅读清单ing-top: 40px;
背景色：灯光；
}

。sidebar div {
填充：8px;
字体大小：24px;
显示：块;
}

。主体 {
margin-left: 150px;
字体大小：18px;
}

这效果很好，但是如果您希望始终看到相同的侧边栏元素，该怎么办？在这种情况下，您可以制作固定的侧边栏或粘性侧边栏。

How to Create a Fixed Sidebar in CSS

A fixed sidebar remains in the same place relative to the viewport (i.e. the visible browser window) when the user scrolls. For example, this sidebar stays pinned to the top corner of the screen:

为此，请使用以下HTML和CSS：

<！ -  html->




菜单项1 

菜单项2 

菜单项3 




<！ - 身体内容 - >

/* CSS */

。sidebar {
高度：200px;
宽度：150px;
position: fixed;
顶部：0;
左：0;
台padd上阅读清单ing-top: 40px;
背景色：灯光；
}

。sidebar div {
填充：8px;
字体大小：24px;
显示：块;
}

。主体 {
margin-left: 150px;
字体大小：18px;
}

要将侧边栏固定在视口的右侧，请改用以下CSS：

/* CSS */

。sidebar {
高度：200px;
宽度：150px;
position: fixed;
顶部：0;
right: 0;
台padd上阅读清单ing-top: 40px;
背景色：灯光；
}

。sidebar div {
填充：8px;
字体大小：24px;
显示：块;
}

。主体 {
margin-right: 150px;
字体大小：18px;
}

这可以翻转侧边栏位置：

如何创建一个在CSS粘性栏吗

Sticky sidebars are similar to fixed sidebars in that they follow you as you scroll down the page.

However, a sticky sidebar element maintains a相对的position直到它越过视口中的特定阈值（即用户滚动到页面上的某个点）。那时，元素像固定元素一样保持在原位。

This makes it appear to “stick” to the top of the screen, like so:

要达到粘性侧栏效应，请使用以下HTML和CSS：

<！ -  html->




菜单项1 

菜单项2 

菜单项3 




<！ - 身体内容 - >

/* CSS */

。sidebar {
高度：200px;
宽度：150px;
position: -webkit-sticky; /* for Safari users */
position: sticky;
top: 0px;
float: right;
保证金顶：100px;
台padd上阅读清单ing-top: 40px;
背景色：灯光；
}

。sidebar div {
填充：8px;
字体大小：24px;
显示：块;
}

。主体 {
margin-right: 150px;
字体大小：18px;
}

在此代码中，职位：粘发tells the sidebar div to “stick” to the top border of its parent container, which here is the viewport.

How to Create a Full Height Sidebar in CSS

To make your sidebar extend to the bottom of the browser window, simply set the高度财产为100％在您的CSS中：

/* CSS */

。sidebar {
身高：100％；
宽度：150px;
position: fixed;
顶部：0;
左：0;
台padd上阅读清单ing-top: 40px;
背景色：灯光；
}

As you can see, the sidebar is fixed and spans the full height of the browser window. This will always be the case, no matter the height dimension of the viewport.

How to Create a Grid Sidebar in CSS

您可以使用CSS grid layoutto create a sidebar element — set your leftmost or rightmost grid item to extend to the bottom of the grid (or as far down as you want it to go), and you’ll end up with something like this:

这是上述示例的HTML和CSS代码：

<！ -  html->



1

 2 

3

 4 

 5 

 6 

 7 

 8 

 9 

 10 

 11 

 12 

 13 

/* CSS */

＃网格容器{
display: grid;
grid-template-columns: auto auto auto;
网格间隙：8px;
填充：8px;
}

＃网格容器div {
背景色：灯光；
文本合格：中心；
台padd上阅读清单ing: 30px;
字体大小：24px;
}

#box-1 {
grid-row-start: 1;
网格末端：7;
}

This sidebar element will be positioned相对的by default, meaning it will move upwards as the user scrolls downward. You can turn this sidebar element into a sticky element by adding the sticky CSS declarations to the first box element:

/* CSS */

#box-1 {
grid-row-start: 1;
网格末端：7;/* substitute this value for your sidebar’s vertical row height */
高度：200px;
position: sticky;
top: 0px;
}

And瞧，侧边栏棒：

How to Create a Collapsible Sidebar in CSS

Finally, let’s cover how to create a collapsible sidebar. These can be handy for次要导航并通过隐藏非必需项目来保存页面空间。

添加平滑可折叠侧边栏的最简单方法涉及一些JavaScript编码，所以要刷如果你需要。这是一个简化的版本W3School’s implementation：

×

About

Services

客户




 open Sidebar 
 (your body text here)) 

This code produces a basic collapsible menu. When the “Open Sidebar” and “X” buttons are clicked, some JavaScript code changes the width of the sidebar element. The过渡声明会在更改宽度时使菜单的增长和缩小动画，因此我们会得到以下效果：

如何在CSS中创建侧边栏导航菜单

侧边栏是导航菜单的绝佳家园。将一个添加到您的CSS侧边栏很容易 - 这样做，我们将菜单项变成链接（使用tag) and add some additional styling for a cleaner look and a more comfortable user experience.

To aid screen readers and提供更好的可访问性，我们还将在一个中包装菜单项链接<导航>tag to denote a navigation menu. Use the following HTML and CSS:

<！ -  html->


<导航>
菜单项1 
Menu Item 2
Menu Item 3




<！ - 身体内容 - >

/* CSS */

。sidebar {
身高：100％；
宽度：150px;
position: absolute;
左：0;
顶部：0;
台padd上阅读清单ing-top: 40px;
背景色：灯光；
}

。sidebar a {
填充：8px;
字体大小：24px;
显示：块;
文本解释：无；
}

。sidebar a:hover {
cursor: pointer;
不透明：.7;
}

。主体 {
margin-left: 150px;
字体大小：18px;
}

CSS侧栏：需要一些测试

侧边栏是访问者从任何网站期望的那些接口功能之一，通常是一个安全的选择，用于增强导航或添加额外的显示元素而不分心关键页面内容。

它可能不用说，但是我在这篇文章中描述的方法很简单。由您决定将CSS应用于您的喜好，以便将侧边栏功能设置为个性化，因此请期待这里有很多反复试验（以及一般与CSS合作时）。尽管如此，这些HTML/CSS模板中的任何一个还是侧边栏是改善您的导航和用户体验的绝佳起点。

编者注：该帖子最初于2020年10月发表，并已更新以进行全面性。