Jac*_*cob 2 html javascript css bootstrap-4
我正在使用 Bootstrap Studio 构建我的第一页，我想知道如何实现这样或类似的菜单设计：https : //codemyui.com/fullscreen-overlay-navigation-menu/
当我点击菜单切换时，它看起来像这样：https : //imgur.com/6czS25f
我的网站链接：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]: https://i.stack.imgur.com/c5Dnp.jpg
https://i.imgur.com/Nunc77r.png
如果它只是一个带有 center 的固定淡入淡出菜单.navbar-nav，那么下面的答案可能会有所帮助。尽管您的第一个链接中有很多示例，但很难准确说出您想要什么。
我仍然没有找到禁用 Bootstrap 4 导航栏.collapsing切换类的方法。我在文档中找不到任何将其关闭的内容，这意味着在打开/关闭移动导航栏时始终会有高度过渡。
但是您可以.collapsing使用 CSS覆盖该类，尽管对于这么简单的事情来说似乎有点麻烦。
经过一番摆弄之后，我发现我可以使用.collapsing[style*="height"].
当第一次单击按钮时，Bootstrap 4通过 javascript本地将属性添加style="height:...px;"到.navbar-collapsediv .navbar-toggler。但不是在第二次关闭点击。
请参阅下面使用 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 中，它看起来像这样......
https://i.imgur.com/Nunc77r.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 演示......
.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;
}
}
.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;
}
}