Question

我正在尝试找到一种方法，将引导程序4中的动画汉堡菜单与全屏菜单覆盖相结合。问题：当我在按钮上设置data-toggle =“ modal”时，我得到了模式叠加层，但是背景（即叠加层下方）的折叠汉堡菜单（“ X”）的动画变得无效。

另一方面，当我将“ modal”属性替换为“ collapse”时，汉堡包动画效果很好，但没有出现覆盖菜单。

有没有简单的方法可以将这两个功能结合在一起？

这是CSS：

body {
  padding-top: 5rem;
  margin: 0;
  background: url(../assets/original/test.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

.base-layout {
  padding: 3rem 1.5rem;
  text-align: center;
}


/* Navbar responsive toggler + hamburger animation */

.navbar-toggler {
  border: none;
  background: transparent !important;
  float: left !important;
  margin-left: 15px;
  margin-right: 0;
}

.navbar-toggler:focus {
  outline: none;
  background: transparent !important;
}

.navbar-toggler .icon-bar {
  background-color: #fff;
  transform: rotate(0deg) translate(0px, 0px);
  transition: ease all .2s;
}

.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggler .icon-bar+.icon-bar {
  margin-top: 4px;
}


/*.icon-bar:nth-child(2) {
				  width: 16px;
				  transition: ease all .2s;
				}*/

.navbar-toggler:hover>.icon-bar:nth-child(2) {
  width: 22px;
  transition: ease all .2s;
}

.navbar-toggler:active>.icon-bar:nth-child(2) {
  width: 22px;
  transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 4px);
  transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
  opacity: 0;
  transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
  transition: ease all .2s;
}


/* Modal */

.modal-nav-content {
  width: 100%;
  height: auto;
}

.modal-nav-body {
  margin-top: 100px;
}

.modal-nav-body ul {
  list-style-type: none;
  color: white;
  margin: 0;
  padding: 0;
  width: 100%;
}

.modal-nav-body ul li {
  text-align: center;
  font-size: 130%;
  padding: 8px;
  text-transform: uppercase;
}

This is the HTML code:

<head>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

  <!-- Custom styles for this template -->
  <link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-md navbar-dark bg-transparent fixed-top">

    <span class="navbar-brand" href="#"></span>

    <!-- data-toggle="modal" :: COLLAPSE -->
    <button type="button" class="navbar-toggler collapsed btn-open" data-toggle="modal" data-target="#nav-modal" aria-controls="nav-modal" aria-expanded="false" aria-label="Toggle navigation">
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
          <span class="sr-only">Toggle navigation</span>
      </button>

  </nav>

  <!-- Modal -->
  <div class="modal fade" id="nav-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-nav-content">
        <div class="modal-nav-body">
          <ul class="wrap-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Nav menu item #1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Nav menu item #2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Nav menu item #3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Nav menu item #4</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <main role="main" class="container">
    <div class="base-layout text-white text-left">
      <h1>Title</h1>
      <p class="lead">Lead text...</p>
    </div>
  </main>


  <!-- Bootstrap core JavaScript placed at the end of the document so the pages load faster -->
<script src="https://bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>

bootstrap 4响应式全屏覆盖菜单

0 个答案: