javascript - 如何在默认引导切换器下设置全屏菜单样式？

我正在使用 Bootstrap Studio 构建我的第一个页面，我想知道如何实现这样或类似的菜单设计:https://codemyui.com/fullscreen-overlay-navigation-menu/

当我单击菜单切换时，它看起来像这样:/image/WPu07.jpg

我的网站链接:https://kreatika.bss.design/

感谢您的建议

<nav class="navbar navbar-light navbar-expand-lg sticky-top">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="/assets/img/Logo.png?h=9093bdbc164804385c272277c0ab9d7f"></a>
        <button data-toggle="collapse" class="navbar-toggler custom-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon" style="width: 30px;height: 30px;"></span></button>
        <div class="collapse navbar-collapse" id="navcol-1">
            <ul class="nav navbar-nav ml-auto">
                <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Úvod</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Služby</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Ukázky práce</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Náš příběh</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Akademie</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Kariéra</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Kontakt</a></li>
                <li class="nav-item d-lg-flex d-xl-flex align-items-lg-center align-items-xl-center social-icons" role="presentation"><img class="social-icon-image" src="/assets/img/Facebook.png?h=261a62c570931f4fc3acbc1b33ae74d3"><img class="social-icon-image" src="/assets/img/Insta.png?h=be50f2dccc1bf2ad3d65a5104a48300d"></li>
            </ul>
        </div>
    </div>
</nav>


  [1]: /image/c5Dnp.jpg

最佳答案

/image/M9VgZ.png

如果它只是一个固定的淡入淡出菜单，且居中.navbar-nav ，那么下面的答案可能会有所帮助。尽管您的第一个链接中有很多示例，但很难准确说出您想要什么。

我仍然没有找到禁用 Bootstrap 4 导航栏的方法 .collapsing切换类。我在文档中找不到任何可以将其关闭的内容，这意味着打开/关闭移动导航栏时始终会有高度过渡。

但是您可以覆盖 .collapsing class with CSS，虽然对于这么简单的事情来说似乎有点老套。

经过一番摆弄后，我发现我可以使用 .collapsing[style*="height"] 覆盖折叠类动画。 .

Bootstrap 4 原生添加了属性 style="height:...px;"到.navbar-collapse div 通过 javascript 当 .navbar-toggler首先单击按钮。但不是在第二次关闭点击时。

查看我的codeply下面的示例链接使用 Bootstrap 4...(使用 SASS)。

https://www.codeply.com/go/GXRF6aA5Du

.navbar {

    .navbar-toggler {
        z-index: 1000;
    }

    .navbar-collapse {

        @include media-breakpoint-down(md) {
            background: rgba(#000,.85);
            opacity: 0;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            transition: opacity 0.35s ease;
            display: flex;
            flex-direction: column;
            align-content: center;
            text-align: center !important;

            &.collapse {
                opacity: 0;
                pointer-events: none;
                display: flex;
            }

            &.collapsing[style*="height"] {
                opacity: 1;
                height: 100vh !important;
            }

            &.collapsing {
                opacity: 0;
                height: 100vh;
            }

            &.collapse.show {
                opacity: 1;
                pointer-events: auto;
            }

            .navbar-nav {
                margin-right: initial !important;
                margin-top: auto;
                margin-bottom: auto;
            }

        }

    }

}

@include media-breakpoint-down(md) {

    .navbar-nav {
        margin-left: initial !important;
    }

}

如果您不使用 SASS，这是下面的 CSS 输出。

如果您将以下 CSS 放入您网站上的 DOM 中，它看起来像这样......

/image/M9VgZ.png

.navbar .navbar-toggler{
    z-index:1000
}
@media (max-width: 991.98px){
    .navbar .navbar-collapse{
        background:rgba(0,0,0,0.85);
        opacity:0;
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        transition:opacity 0.35s ease;
        display:flex;
        flex-direction:column;
        align-content:center;
        text-align:center !important
    }
    .navbar .navbar-collapse.collapse{
        display:flex;
        opacity:0;
        pointer-events:none
    }
    .navbar .navbar-collapse.collapsing[style*="height"]{
        opacity:1;
        height:100vh !important
    }
    .navbar .navbar-collapse.collapsing{
        opacity:0;
        height:100vh
    }
    .navbar .navbar-collapse.collapse.show{
        opacity:1;
        pointer-events:auto
    }
    .navbar .navbar-collapse .navbar-nav{
        margin-right:initial !important;
        margin-top:auto;
        margin-bottom:auto
    }
}

@media (max-width: 991.98px) {
    .navbar-nav {
        margin-left: initial !important;
    }
}

还有一个使用 CSS(不是 sass)的 stackoverflow 演示...

MAIN {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: 56px;
  height: 3000px
}

.navbar .navbar-toggler {
  z-index: 1000
}

@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.35s ease;
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center !important;
    overflow-y: scroll;
    overflow-x: hidden
  }
  .navbar .navbar-collapse.collapse {
    display: flex;
    opacity: 0;
    pointer-events: none
  }
  .navbar .navbar-collapse.collapsing[style*="height"] {
    opacity: 1;
    height: 100vh !important
  }
  .navbar .navbar-collapse.collapsing {
    opacity: 0;
    height: 100vh
  }
  .navbar .navbar-collapse.collapse.show {
    opacity: 1;
    pointer-events: auto
  }
  .navbar .navbar-collapse .navbar-nav {
    margin-right: initial !important;
    margin-top: auto;
    margin-bottom: auto
  }
}

@media (max-width: 991.98px) {
  .navbar-nav {
    margin-left: initial !important;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<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.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Fixed navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <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="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<main role="main" class="container">
  <div class="jumbotron">
    <h1>Navbar example</h1>
    <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
    <a class="btn btn-lg btn-primary" href="/docs/4.2/components/navbar/" role="button">View navbar docs &raquo;</a>
  </div>
</main>

关于javascript - 如何在默认引导切换器下设置全屏菜单样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57429572/

javascript - 如何在默认引导切换器下设置全屏菜单样式？

上一篇：css - 更少的选择器嵌套

下一篇：php - 如何在具有透明背景的网站顶部创建可关闭的 div？