logo标签列表

Bootstrap 4 - 移动端全屏导航栏

htmlcssmenubootstrap-4
5
我想知道如何在移动端实现全屏菜单（导航栏），也就是说，当你点击“汉堡菜单”时，导航栏（包括项目）应该占据整个视口。
我只需编写以下代码即可实现：
#navbarText{
  height: 100vh;
}

但是，Bootstrap 动画不像默认的动画那样平滑，您可以在此处看到（通常情况下，当您关闭它时，动画会逐渐增加 div 大小，反之亦然）:

enter image description here

这是代码: 

/*---Standar Hamburger Menu (3 separate elements)---*/

.navbar-toggler {
  border: none;
  background: transparent !important;
}

.navbar-toggler:hover {
  background: transparent !important;
}

.navbar-toggler .icon-bar {
  height: 2px;
  width: 22px;
  border-radius: 1px;
  display: block;
  background-color: #B6B6B6;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.navbar-toggler .icon-bar+.icon-bar {
  margin-top: 4px;
}


/*---Animation menu (create X)---*/

.navbar-toggler.x .icon-bar:nth-of-type(1) {
  -webkit-transform: translateX(3px) rotate(45deg);
  /* Safari 3-8 & Chrome 4-35 & Opera 15-22 */
  -ms-transform: translateX(3px) rotate(45deg);
  /* IE 9 */
  -moz-transform: translateX(3px) rotate(45deg);
  /* Firefox 3-15 */
  -o-transform: translateX(3px) rotate(45deg);
  /* Opera 10-14 */
  transform: translateX(3px) rotate(45deg);
  -webkit-transform-origin: 10% 10%;
  -ms-transform-origin: 10% 10%;
  -moz-transform-origin: 10% 10%;
  -o-transform-origin: 10% 10%;
  transform-origin: 10% 10%;
}

.navbar-toggler.x .icon-bar:nth-of-type(2) {
  opacity: 0;
  filter: alpha(opacity=0);
  /* For IE8 and earlier */
  -moz-opacity: 0;
  /* Older Firefox 1 */
}

.navbar-toggler.x .icon-bar:nth-of-type(3) {
  -webkit-transform: translateX(3px) rotate(-45deg);
  -ms-transform: translateX(3px) rotate(-45deg);
  -moz-transform: translateX(3px)rotate(-45deg);
  -o-transform: translateX(3px) rotate(-45deg);
  transform: translateX(3px) rotate(-45deg);
  -webkit-transform-origin: 10% 90%;
  -ms-transform-origin: 10% 90%;
  -moz-transform-origin: 10% 90%;
  -o-transform-origin: 10% 90%;
  transform-origin: 10% 90%;
}

.navbar-toggler.x.collapsed .icon-bar:nth-of-type(1) {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}

.navbar-toggler.x.collapsed .icon-bar:nth-of-type(2) {
  opacity: 1;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
}

.navbar-toggler.x.collapsed .icon-bar:nth-of-type(3) {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}


/*---To center elements of the navbar (mobile)---*/

.navbar-brand {
  font-size: 1rem;
}


/*---Custom AnimateCSS mobile menu items---*/

.nav-item {
  -webkit-animation-duration: 0.8s;
  /* Chrome 3-42 & Safari 4-8 & Opera 15-29 */
  -moz-animation-duration: 0.8s;
  /* Firefox 5-15 */
  -o-animation-duration: 0.8s;
  /* Opera 12-14 */
  animation-duration: 0.8s;
}

@media only screen and (max-width: 991px) {
  #navbarText {
    height: 100vh !important;
  }
}

@media only screen and (min-device-width: 992px) {
  .animated {
    /*CSS transitions*/
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    /*CSS transforms*/
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    /*CSS animations*/
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
  }
  #navbarText {
    height: auto;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HOME</title>


  <!-- TODO add manifest here -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

  <link rel="stylesheet" type="text/css" href="style.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
    <div class="d-flex align-items-center justify-content-between w-100">
      <button class="navbar-toggler navbar-toggler-left x collapsed" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
      <a class="navbar-brand mx-auto ml-lg-5" href="#">
        <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="Logo">
      </a>
    </div>
    <div class="collapse navbar-collapse mr-lg-5" id="navbarText">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active mx-2 animated fadeInDown">
          <a class="nav-link" href="#">HOME<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item mx-2 animated fadeInDown">
          <a class="nav-link" href="#">PROJECTS</a>
        </li>
        <li class="nav-item mx-2 animated fadeInDown">
          <a class="nav-link" href="#">ABOUT</a>
        </li>
        <li class="nav-item mx-2 animated fadeInDown">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
      </ul>
    </div>
  </nav>
  <div>
    <p>Test</p>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <p>ffff</p>
</body>

</html>

你知道如何修复它吗？

如果你想编辑/测试代码，我也提供了一个链接到Codeply

嗨，我有同样的问题，你找到解决方案了吗？ - Andrew Lam
1
@AndrewLam 是的，我做了。 我忘记写它了...无论如何，我昨天发布了它。 看一下，希望对您也有用。 - Fabio
非常感谢您提供的解决方案 :) - Andrew Lam
3个回答
4
在你的代码中，你已经完成了相当数量的工作。我没有完整地查看整个代码，而是只添加了以下CSS：
.navbar-nav {
  height: 100vh !important;
}

这将适用于任何现有的Bootstrap 4项目。以下是一张带有突出显示的类的示例代码图片，我进行了修改，对大多数人来说做同样的修改应该能够实现平稳过渡而无需使用JS或修改重要内容。

enter image description here

希望对大家有所帮助。

1
我查看了Bootstrap JS文件，并发现为实现此效果，您只需要更改几行代码，具体来说，需要更改定义“折叠”函数的位置（大约在第1100行左右）。更改内容如下：
Object.defineProperty(this._element, 'scrollHeight', {
      writable: true,
      value: $(window).height()-$(".navbar").outerHeight()
});

在this._element变量的分配状态后。我们定义了'.navbar-collapse' div的最大尺寸，这就是为什么我们还要减去 $ (".navbar").outerHeight() 值（它是指初始时刻，菜单仍然隐藏，所以我们减去了.navbar-brand div的高度和可能的父元素内边距/外边距）。我们需要这样做，因为'scrollHeight'属性（以及其他属性）默认情况下不可修改，因此我们需要指定它。
最后一次更改是删除该行。
_this._element.style[dimension] = '';

我们这样做是因为，否则当元素具有“show”属性（即完成动画）时，它将不会占据整个屏幕，基本上因为此行删除了我们的自定义高度。

通过这些简单的更改，我们实现了所需的结果，这种解决方案唯一的缺点是我们失去了使用CDN的能力，因为我们需要下载并更改该文件。

明确一下，这应该是更改后的文件：

 ...
 var Collapse = function () {
  function Collapse(element, config) {
    ...
    this._element = element;
    //CHANGE (1)
    Object.defineProperty(this._element, 'scrollHeight', {
      writable: true,
      value: $(window).height()-$(".navbar").outerHeight()
    });
    this._config = this._getConfig(config);
    ...
  }
  ...
  _proto.show = function show() {
    var complete = function complete() {
      ...
      /* CHANGE (2) - Remove
      _this._element.style[dimension] = ''; */

      ...
    };
  };
  ...
 }
 ...
0

我已经找到了一个相当简单的解决方案来解决这个问题。

  1. 添加另一个带有 id="navbar-content" 的 div，其中包含您的导航链接，如下所示：
    <!-- navbar links -->
        <div class="collapse navbar-collapse justify-content-sm-center" id="navbarLinks">
          <div class="navbar-nav text-center" id="navbar-content">
            <a href="#header" class="nav-link active mx-2"><h5>Home</h5></a>

            <a href="#skills" class="nav-link mx-2"><h5>Skills</h5></a>

            <a href="#about" class="nav-link mx-2"><h5>About</h5></a>

            <a href="#projects" class="nav-link mx-2"><h5>Projects</h5></a>
          </div>
        </div>
        <!-- end of navbar links -->
  • 前往您的CSS文件并添加以下内容：
    • 
    /* to make the navbar open full screen on mobile */
    @media (max-width: 768px) {
       #navbar-content {
         height: 100vh;
      }
    }

    因此，在中等大小的断点（768px）之前，包装器将打开到屏幕的全尺寸。在Bootstrap 5中进行了测试。运行非常顺畅。

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接