如何实现这个布局的移动菜单（引导）

• Z时代
• 2024-01-10
• 分类：问答

即时通讯使用引导的导航栏。导航栏在较大的设备中可以使用，但在移动设备上，当navbar-toggler按钮出现并单击时，我想更改一些bootstrap默认移动菜单。如何实现这个布局的移动菜单（引导）

我试着去实现点击移动按钮时，下面这个布局：

• 菜单出现在右边占据只是一定宽度像200像素
• 菜单出现在前面的内容，而不是推下面
• 的内容和每个项目具有灰色边界底部

你知道如何获得这种布局？

工作示例：使用以下，但没有成功的代码林https://jsfiddle.net/uu9fpt4o/

HTML

<div class="container px-0"> 
    <nav class="navbar navbar-expand-md navbar-light"> 
    <a class="navbar-brand font-weight-bold text-primary mr-auto" href="#">Logo</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
     <ul class="navbar-nav ml-auto d-flex align-items-lg-center ml-auto pull-right "> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Item 1<span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Item 2</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Item 3</a> 
     </li> 
     </ul> 
    </div> 
    </nav> 
</div> 
<div class="background"> 
    <div class="container"> 
    <div class="row"> 
     <div class="content col"> 
     Content 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.navbar{ 
     border-bottom: 1px solid gray; 
} 
.background{ 
    background-color:orange; 
} 
.content{ 
    height:320px; 
} 

回答：

@media only screen and (max-width: 768px) { 
    /* For mobile phones: */ 
.navbar-collapse{ 
    position: absolute; 
    width : 40%; 
    z-index:2; 
    right :-16px; 
    top : 8px; 
} 
    .navbar-nav li { 
    border: 3px solid white; 
    } 
    .navbar-nav li:first-child { 
    border-bottom: 0px; 
    } 
    .navbar-nav li:last-child { 
    border-top: 0px; 
    } 
} 

以上是 如何实现这个布局的移动菜单（引导） 的全部内容， 来源链接： utcz.com/qa/265255.html