📌  相关文章
📜  在 bootstrap4 中从 let 滑动导航栏 (1)

📅  最后修改于: 2023-12-03 15:23:06.889000             🧑  作者: Mango

在 Bootstrap 4 中从左滑动导航栏

如果您想要在您的网站上添加一个漂亮的导航栏，Bootstrap 4可以帮助您实现。在本文中，我们将深入探讨如何用 Bootstrap 4 创建从左滑动的导航栏。

Bootstrap 4 具有什么新的特性？

Bootstrap 4是目前最新的Bootstrap版本。它包括了许多新的功能、特性和改进。

其中最明显的一点是它具有更好的响应式设计。这意味着，您的网站可以在任何设备上都获得最佳的查看体验。

Bootstrap 4还提供了大量的组件和插件，可以帮助您快速构建漂亮的页面。

如何创建从左滑动的导航栏？

首先，您需要为您的网页引入Bootstrap 4。

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-0Y7TpvQP+oidIAvLsJNWQg83gcB7f8sDPAQKTvMOj3DmnJauVXw1a5M7IpFghfo" crossorigin="anonymous">
</head>

然后，我们创建一个包含导航栏元素的HTML代码。这个导航栏元素将包含一个标准的导航列表、一个开关按钮，以及一个侧滑菜单。

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Your Website Name</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

在这个HTML代码中，我们设置了一个固定在顶部的导航栏，并且包含了一个开关按钮（navbar-toggler）和一个侧滑菜单（navbar-collapse）。

接下来，我们需要为开关按钮和侧滑菜单添加CSS样式，实现从左滑动的效果。

.navbar-toggler {
  border: none;
  outline: none;
  padding: 0;
  width: 40px;
  height: 30px;
  margin-left: auto;
  margin-right: 0;
  background-color: transparent;
  &:hover {
    cursor: pointer;
  }
  span {
    display: block;
    position: relative;
    width: 100%;
    height: 2px;
    margin-top: 5px;
    background-color: #333;
    border-radius: 2px;
    z-index: 1;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
    &:before, &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: #333;
      border-radius: 2px;
      transition: .25s ease-in-out;
    }
    &:before {
      top: -10px;
    }
    &:after {
      bottom: -10px;
    }
  }
  &.collapsed {
    span {
      transform: rotate(45deg);
      &:before {
        top: 0;
        transform: rotate(90deg);
      }
      &:after {
        bottom: 0;
        transform: rotate(90deg);
      }
    }
  }
}

.navbar-collapse {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  background-color: #1597ff;
  transition: width 0.25s ease-in-out;
  &.collapsed {
    width: 0;
    transition: width 0.25s ease-in-out;
  }
  ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      margin: 15px 0;
      font-size: 18px;
      a {
        color: #fff;
        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
}

以上CSS样式中，我们设置了开关按钮和侧滑菜单的样式，实现了从左滑动的效果。

最后，我们需要添加一个JavaScript事件，以触发开关按钮和侧滑菜单的交互。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFJAWAWjJz9gJzP6JbLfOVNp1pV475Lr+X657IheVYs6i6UksdQRVvoxMfoo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU0Xo6lJf+QJeO9aA4f9fc1OQnlTWAaTJLwv2OQ2TvKPe" crossorigin="anonymous"></script>
<script>
  $(document).ready(function () {
    $(".navbar-toggler").on("click", function () {
      $("navbar-collapse").toggleClass("collapsed");
      $(this).toggleClass("collapsed");
    });
  });
</script>
总结

在本文中，我们讲解了如何在Bootstrap 4中创建从左滑动的导航栏。通过创建一个包含标准导航列表、开关按钮和侧滑菜单的HTML代码，以及添加CSS和JavaScript事件，我们可以实现一个非常漂亮的导航栏效果。如果您正在创建一个网站，那么Bootstrap 4将会是您非常有用的工具之一。