当你考虑一个典型网站的布局时，很可能会在主要内容区域的右侧或左侧包含一列重要的链接（用于网页中各个部分的导航链接）。
这个组件被称为“侧边栏”，通常用作网页上的菜单。虽然它被广泛使用，但开发人员通常将此元素添加到网站上，用于在页面之间导航，甚至导航到网页的不同部分。
让我们了解这个功能，并尝试只使用HTML和CSS来创建一个现代的侧边栏。
什么是侧边栏菜单？
侧边栏是位于主要内容区域右侧或左侧的静态列。该组件包含网站中的导航链接、小部件或其他必要的链接（用于主页、内容或其他部分）。
立即学习“前端免费学习笔记（深入）”；
下面给出一个示例，演示如何创建一个简单的侧边栏菜单。该菜单位于主内容区域的左侧（与大多数网站的布局相同）。
示例
在此示例中，我们使用 CSS 网格将网页分为两个部分。网页的 15% 构成侧边栏菜单，85% 构成主要内容。
CSS网格
通过设置 display: grid，它使开发人员能够将任何元素转换为网格容器。要添加列，我们使用，
grid-template-columns: value value;
value代表列的宽度。它可以用长度（px、cm、em）或百分比表示。
标签（锚元素）
它用于在网页内部链接外部页面。它还可以用于链接文档内部的部分。id属性唯一地定义了元素。
href属性包含外部页面的url或文档内部部分的id。
Sidebar menu Animation Character
Background
This is placeholder text. This paragraph contains information about the background of the character.
Romance
This paragraph contains text related to the life of the character.
Relations
- Mother
Text about character's mother
- Father
Information about the father.
- Sister
Text about character's sister
- Friend
Text about friend
Voice actors
This contains information about voice actors in the animation
Costumes
示例
在这里，我们将创建一个可切换的侧边栏。在这个例子中，我们创建了一个侧边栏，并将其定位在内容区域的左侧。我们在内容区域中有一个按钮，点击该按钮可以折叠我们创建的侧边栏。
我们使用了 CSS 过渡属性 来平滑地改变侧边栏的位置。点击按钮时，侧边栏的 位置 从 0 到 -160px（与侧边栏的宽度相等）发生变化。换句话说，侧边栏向 左侧 移动了其宽度的距离。
Toggle Sidebar This is an example. This contains the main content area.
Click the button below to toggle the sidebar
结论
在本文中，我们讨论了网页中两种类型的侧边栏菜单。其中一个是基本侧边栏，另一个是切换侧边栏。它们都是仅使用 HTML 和 CSS 设计的。
相关文章
html空格符号怎么打_非断行空格在html里如何表示【说明】
html静态轮播图怎么制作_纯html静态轮播图搭建法【静态】
HTML5怎样用input file上传_HTML5inputfile上传用法【入门】
html5网站模板如何修改分页器样式_html5改分页器方法【技巧】
html空格符号怎么打_引用块内空格符号表现特点【特点】
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
更多热门AI工具
