创建响应式设计滑动侧导航菜单

redmaomail 2024-07-24 21:52 阅读数 63 #wordpress

创建响应式设计滑动侧导航菜单

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

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>

登录后复制

在这里你可以看到我们用类 sidenav 创建了一个侧边菜单 div 。接下来，我们通过

标签添加了实际的顶部栏导航，并且我们使用 SVG 作为侧面菜单图标。

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

2. 编写 JavaScript 代码

接下来，让我们添加 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 演示。

4. 移除幻灯片

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

.sidenav {
    transition: 0s; 
}

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

登录后复制

这将使更改立即出现，因为 transition 中没有指定延迟。我们使用的默认值是 0.5s。

结论

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

为了更进一步，您可能希望使用 Bootstrap 或 Bulma 等 CSS 框架来设计菜单样式。

本文已根据 Monty Shokeen 的贡献进行了更新。 Monty 是一位全栈开发人员，他也喜欢编写教程和学习新的 JavaScript 库。

创建响应式设计滑动侧导航菜单的详细内容，更多请关注红帽云邮其它相关文章！

分享到：

上一篇：使用 I18Next 本地化刺激应用程序下一篇：在Google App Engine上托管WordPress网站