如何使用 CSS 创建侧边栏导航菜单
侧边栏菜单因 Facebook 等移动应用而广受欢迎，它能仅在需要时才显示导航栏，从而节省宝贵的屏幕空间。我们将深入探讨一种利用一些常被忽略的 CSS 属性来实现这种效果的方法。
目标与挑战
- 隐藏导航栏，从而腾出更多屏幕空间。
- 点击画布外的图标，菜单就会滑入到位，即可轻松访问菜单。
- 效果将仅使用 CSS 实现。
- 尽可能支持多种浏览器
标记
首先使用一个外层 div 元素，然后利用一些新的 HTML5 元素来承载两个主要元素：导航和内容。
<div class="wrapper">
<aside>
<nav>
<ul>
<li>nav_1</li>
<li>nav_2</li>
<li>nav_3</li>
<li>nav_4</li>
<li>nav_5</li>
</ul>
</nav>
</aside>
</div>
然后，我们将主要内容包裹在 section 标签中。
<section>
<div class="container">
<div class="row">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum......</p>
</div>
<!--- add as many rows needed --->
</div>
</section>
容器 div 其实并非必要，只是我编写响应式网站习惯的结果，我们也会稍微涉及一下响应式网站——但仅限于不超出范围。
CSS
为了保持简洁，我将 CSS 代码内联，但它也很容易成为外部脚本的一部分。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 63.5%;
font-family: "Roboto Slab", serif;
height: 100%;
}
body {
font-size: 1.6rem;
line-height: 2.8rem;
height: 100%;
}
.wrapper {
height: 100%;
}
.container {
margin: 0 15px;
}
.row {
padding: -15px;
margin: 15px 0;
}
.row:before,
.row:after {
content: "";
display: table;
}
nav li {
padding: 8px;
}
现在我们已经设置好了初始样式，接下来处理两个主要元素。
侧边栏的初始宽度设置为 40%，左浮动，并设置左边距为 -40%，使其超出屏幕范围。此外，我们还会添加绝对定位，以避免它与主内容重叠。
aside {
background-color: #333;
color: #fff;
width: 40%;
margin-left: -40%;
float: left;
height: 100%;
position: absolute;
}
现在，对于包含主要内容的 section 元素，我们将向右浮动，宽度和高度为 100%，右边距为 0。
section {
width: 100%;
height: 100%;
float: right;
margin-right: 0;
}
切换
现在让我们在标记顶部、包装 div 元素之前添加一个复选框。
<input type="checkbox" id="offcanvas" class="toggle" />
<div class="wrapper"><!--- wrapper content here ---></div>
我们给它赋予了offcanvas这个ID，稍后标签会用它来触发切换。
现在我们基本上想要对输入框的选中状态做出反应，选中时显示导航栏，取消选中时隐藏导航栏。
我们将使用 CSS 中的相邻选择器，首先定位到 aside 元素。
.toggle:checked + .wrapper > aside {
margin-left: 0;
}
截面元素也一样。
.toggle:checked + .wrapper > section {
margin-right: -40%;
}
让它漂亮
隐藏和显示导航栏的主要目标已经实现。我们只需添加著名的“汉堡”按钮，并使切换过程更加流畅，就能让它看起来更美观。
我们来添加一个标签，其中包含按钮并触发切换。在 section 元素的顶部，我们添加以下代码：
<div class="container">
<div class="row">
<label for="offcanvas" class="toggler">
<span class="navicon"></span>
</label>
</div>
</div>
属性的 标签值为offcanvas，与输入按钮的 id 相同。
这样我们就可以在页面上任何包含标签代码的位置触发切换。现在让我们添加一些样式。
.toggler {
display: inline-block;
cursor: pointer;
}
.navicon {
width: 28px;
height: 28px;
background: url("navicon.png") no-repeat;
background-size: cover;
display: block;
}
现在我们可以隐藏输入按钮了。
.toggle { display: none; }
大热
当导航栏显示时，唯一能将其隐藏的方法是精确地按下菜单按钮。
这在台式机屏幕上可能没问题，但在较小分辨率下可能会比较困难。
为了缓解这个问题，我们将使该状态下的所有内容都可点击。
所以回到第一个标签之前的 HTML 代码，我们将添加另一个标签。
<section>
<label for="offcanvas" class="biglabel"></label>
<!--- section content --->
</section>
我们给它添加了一个名为biglabel的类。在 CSS 中，当导航栏隐藏时，我们会将其隐藏，并使其像一个大按钮一样覆盖整个内容。
.toggle,
.biglabel {
display: none;
}
.biglabel {
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
}
.toggle:checked + .wrapper > section .biglabel {
display: block;
}
刷新浏览器后，我们可以看到，当导航栏显示在屏幕上时，所有内容都变为可点击状态。完美！嗯，差不多吧。
像月球漫步者一样流畅
最后一步是处理过渡效果，使导航栏平滑地滑入。
使用 CSS3 过渡效果非常简单。我们将同时针对侧边栏和主要内容进行操作。
aside,
section {
-webkit-transition: margin 0.5s ease-in-out;
-moz-transition: margin 0.5s ease-in-out;
-ms-transition: margin 0.5s ease-in-out;
-o-transition: margin 0.5s ease-in-out;
transition: margin 0.5s ease-in-out;
}
瞧！我们的菜单现在可以在弹出时流畅地显示内容，并在弹出时悄无声息地消失。
希望这篇文章对您有所帮助，也希望您和我一样喜欢它。请分享并留言告诉我您的想法。
干杯
文章来源：https://dev.to/adyngom/how-to-create-an-off-canvas-navigation-menu-with-css-1o99