问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Bootstrap 4 - 全屏移动导航栏

社区维基
1
新手上路，请多包涵

我想弄清楚如何在移动尺寸上做一个全屏菜单（导航栏），我的意思是当你按下“汉堡菜单”时，导航栏（带有项目）应该占据所有视口。

我实现了这个只是写：

 #navbarText{
  height: 100vh;
}

但是引导动画不像默认动画那样流畅，正如您在此处看到的那样（通常动画会逐渐增加 div 大小，当您关闭它时反之亦然）：

在此处输入图像描述

这里的代码：

 /*---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 的链接

原文由 Fabio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssmenubootstrap-4
阅读 725
2 个回答
得票最新
社区维基
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] = '';

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

通过这些少量更改，我们实现了想要的结果，此解决方案的唯一缺点是我们失去了对该文件使用 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] = ''; */

      ...
    };
  };
  ...
 }
 ...

原文由 Fabio 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

在您的代码中，您完成了一些令人印象深刻的工作。我没有遍历整个代码，而是添加了以下 css：

 .navbar-nav {
  height: 100vh !important;
}

这将适用于任何 bootstrap 4 项目，因为 Bootstrap 4 今天仍然存在。下面是我修改过的带有突出显示类的示例代码的图片，对大多数人来说，做同样的事情应该是有效的，并且可以从引导程序平稳过渡，而无需使用 JS 或修改任何主要内容。

在此处输入图像描述

希望对大家有帮助。

原文由 IBeACoder 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题