当你考虑一个典型网站的布局时，很可能会在主要内容区域的右侧或左侧包含一列重要的链接（用于网页中各个部分的导航链接）。
这个组件被称为“侧边栏”，通常用作网页上的菜单。虽然它被广泛使用，但开发人员通常将此元素添加到网站上，用于在页面之间导航，甚至导航到网页的不同部分。
让我们了解这个功能，并尝试只使用HTML和CSS来创建一个现代的侧边栏。
什么是侧边栏菜单？
侧边栏是位于主要内容区域右侧或左侧的静态列。该组件包含网站中的导航链接、小部件或其他必要的链接（用于主页、内容或其他部分）。
立即学习“前端免费学习笔记（深入）”；
下面给出一个示例，演示如何创建一个简单的侧边栏菜单。该菜单位于主内容区域的左侧（与大多数网站的布局相同）。
示例
在此示例中，我们使用 CSS 网格将网页分为两个部分。网页的 15% 构成侧边栏菜单，85% 构成主要内容。
CSS网格
通过设置 display: grid，它使开发人员能够将任何元素转换为网格容器。要添加列，我们使用，
grid-template-columns: value value;
value代表列的宽度。它可以用长度（px、cm、em）或百分比表示。
标签（锚元素）
它用于在网页内部链接外部页面。它还可以用于链接文档内部的部分。id属性唯一地定义了元素。
href属性包含外部页面的url或文档内部部分的id。
Sidebar menu #main-doc { display: grid; grid-template-columns: 15% 85%; grid-template-rows: auto; grid-template-areas: "advert content"; } .item1 { padding: 10px; } #head { font-family: serif !important; color: #8b0000 !important; font-weight: 900; margin: 5px; padding: 0 5px 5px; } .main-section { font-family: Brush Script MT; font-size: 20px; color: #000080; } .item2 { background: linear-gradient(-35deg, #fff000, #ffb6c1, #afeeee); padding: 6px 8px 6px 16px; margin: 0 } .contents { font-size: 26px !important; color: grey; } .item1 a { border-radius: 5px; padding: 6px 16px 6px 16px; display: block; } a:hover { color: red; transform: scale(1.1); }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 body { margin: 0; } .container { display: flex; min-height: 90px; } .sidebar { position: relative; left: 0; margin-right: 20px; width: 160px; background-color: #ccc; transition: all 0.20s; } .sidebar.collapsed { left: -160px; margin-right: -150px; }This is an example. This contains the main content area.
Click the button below to toggle the sidebar
结论
在本文中，我们讨论了网页中两种类型的侧边栏菜单。其中一个是基本侧边栏，另一个是切换侧边栏。它们都是仅使用 HTML 和 CSS 设计的。
以上就是如何使用HTML和CSS设计一个现代的侧边栏菜单？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1551395.html
微信扫一扫
支付宝扫一扫
