Question

我试图弄清楚如何在移动设备尺寸上制作全屏菜单（导航栏），我的意思是当你按下汉堡菜单时＃39;导航栏（带有项目）应占据所有视口。

我只是写了这个：

$flg = ($row[uac_ea] == 1) ? true : false;

但是bootstrap动画并不像默认动画那样平滑，正如你在这里看到的那样（通常动画会逐渐增加div大小，反之亦然）：

这里是代码：

＆＃13;

#navbarText{
  height: 100vh;
}

＆＃13;

/*---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;
  }
}

＆＃13;

你知道解决问题的方法吗？

如果您想编辑/测试代码，我还会留下

的链接

Answer 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] = ''; */

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

Answer 2

在您的代码中，您完成了许多令人印象深刻的工作。我没有遍历整个代码，相反，我只添加了以下css：

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

这将适用于Bootstrap 4的任何Bootstrap 4项目。下面是我修改过的带有突出显示类的示例代码示例，对于大多数人来说，这样做应该是可行的，并且可以从引导程序顺利过渡，而无需使用JS或修改任何主要内容。

希望对所有人都有帮助。

Answer 3

我为这个问题找到了一个非常简单的解决方案。

再添加一个带有 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;
      }
    }

因此，在中等大小的断点 (768 像素) 之前，包装器将打开到屏幕的全尺寸。在 Bootstrap 5 中测试。工作非常流畅。

Bootstrap 4 - 全屏移动导航栏

3 个答案: