为响应式设计制作滑动侧导航菜单

在本教程中，您将使用 javascript 和 css 创建可扩展的侧边导航菜单。最终产品将如下图所示：

See the Pen  Simple Side Navigation Menu by Envato Tuts+ (@tutsplus)  on CodePen.

1.创建标记

首先，让我们为侧边菜单添加一些标记：

<div id="sideNavigation" class="sidenav">
  <a href="#" class="close-btn">&times;</a>
  <a href="#">About</a>
  <a href="#">Features</a>
  <a href="#">Contact Us</a>
</div>
  
<nav class="topnav">
  <a href="#" class="ham-icon">
    <svg width="30" height="30" id="icoOpen">
        <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
        <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
        <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
    </svg>
  </a>
</nav>
  
<section id="main">
  <h1>This Side Navigation Menu Looks Good!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

在这里你可以看到我们div用 class创建了一个侧边菜单sidenav。接下来，我们通过<nav>标签添加了实际的顶部栏导航，并且我们使用 SVG 作为侧边菜单图标。

请记住将您网站的所有内容放入div id="main"容器中，以便它向右滑动。

2.编写 JavaScript 代码

接下来，让我们添加 javaScript，它将监听带有类的汉堡图标上的点击事件，ham-icon以及一旦侧面导航菜单滑到屏幕上时出现的关闭按钮。

document.queryselector("a.ham-icon").addeventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
});
 
document.querySelector("a.close-btn").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
});

单击汉堡包图标应该显示侧面导航。为此，我们将导航的宽度设置为，同时在主网站内容250px中添加左边距。250px

单击关闭按钮应该隐藏侧面导航。为此，我们将导航的宽度改回 0，同时将主网站内容的左边距设置为 0。

3. CSS 样式

最后，我们需要为侧边菜单和链接设置一些 CSS 样式。CSS 会将所有网页元素正确放置在我们想要的位置。我们还将借助该transition属性应用一些简单的动画。让我们一次看一下 CSS 的一部分。

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 4rem;
  transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  font-family: "Bebas Neue";
}
 
.sidenav a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #bdbdbd;
  display: block;
  transition: 0.4s;
  white-space: nowrap;
  font-size: 2rem;
}
 
.sidenav a:hover {
  color: white;
  background: #9e9e9e;
}

我们将height侧边导航的 设置为100%并将其初始width设置为0以使其隐藏。overflow-x但是，只有当属性的值设置为 时，侧边导航的内容才会保持隐藏hidden。

过渡属性确保侧边导航宽度的变化不是突然的，缓动功能使它有点弹性。

对于侧边导航内的链接，我们将white-space属性的值设置为，nowrap以便菜单文本不会溢出多行。

.sidenav .close-btn {
  position: absolute;
  top: -1rem;
  right: 1rem;
  font-size: 5rem;
}
 
.sidenav .close-btn:hover {
  background: initial;
  transform: scale(1.2);
}

上面的 CSS 样式我们的关闭按钮与侧导航中的其他链接分开。我们对关闭按钮应用了绝对定位，并防止其背景在悬停时变为浅灰色。当用户将鼠标悬停在它上面时，它的大小也会扩大 20%。

现在，下面的 CSS 将通过使用相同的过渡持续时间和相同的缓动函数来确保主要内容的位置移动与导航菜单同步。overflow-x将属性的值设置为hidden确保不会由于内容移位而出现水平滚动条。

#main {
  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: 20px;
  width: 100%;
}
 
body {
 overflow-x: hidden; 
}

我们还可以借助以下 CSS 为汉堡图标添加一点旋转运动。它在 0.5 秒内将汉堡图标旋转 180 度。

a svg {
  transition: all 0.5s ease;
}
a svg:hover {
  transform: rotate(180deg);
}

最后，让我们通过使用以下 CSS 调整链接的间距和大小来使导航菜单具有响应性。它确保菜单不会在垂直空间较小的屏幕上越界。

@media screen and (max-height: 480px) {

  .sidenav {

    padding-top: 3rem;

  }

  .sidenav a {

    font-size: 1.5rem;

  }

}

此时，您的导航菜单应类似于以下 CodePen 演示。

See the Pen  Simple Side Navigation Menu by Envato Tuts+ (@tutsplus)  on CodePen.

4.取下幻灯片

要使菜单不显示幻灯片动画，只需更改 CSS 属性transition，如下面的缩写形式所示：

.sidenav {
    transition: 0s; 
}
 
#main {
    transition: margin-left 0s;
}

这将使更改立即出现，因为transition. 我们使用的默认值是0.5s.

结论

创建侧边菜单只需要几行代码，不需要使用很多资源。使代码响应于不同的设备屏幕分辨率只是通过为特定情况添加媒体查询来修改 CSS 的一种情况。