Question

我的网站包含一个包含5个菜单项的Navigation元素。

当网站在移动设备或平板电脑上运行时，在768px下，我希望下拉菜单的行为略有不同。

我希望菜单背景在显示时占据整个屏幕，基本上阻止了UI。

以下是该应用程序的外观。 this is when we do not click menu button

这就是按下菜单按钮后我希望看到的样子。（期望的结果） and this is when we click menu button

这是我尝试过的，但都没有成功。

<div class="nav navbar-nav navbar-right">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-inner">
        <!-- Toggle get grouped for better mobile display -->
            <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                 </button>
             </div>
             <div id="navbar-collapse-1" class="collapse navbar-collapse">
                      <ul class="nav navbar-nav navbar-right home-page-menu">
                     <li ng-repeat="(state, label) in menuItems"><a ui-sref="{{ state }}">{{ label }}</a></li>
                     <li><a href="" class="a-hiring"><button class="btn hiring">WE ARE HIRING</button></a></li>
                </ul>
           </div>
      </div><!-- end navbar-inner -->
 </nav>

Answer 1

JSfiddle：http://jsfiddle.net/4rktL9q7/2/ 我不知道bootstrap是否为您提供了更简单的方法，但这是您应该做的：

1）将弹出式导航栏包装在div

中

<div class="shadow"> 
    <h1> X </h1>
    <ul>
       <li><a href="">A</a></li>
       <li><a href="">B</a></li>
       <li><a href="">C</a></li>
       <li><a href="">D</a></li>
    </ul>
</div>

<nav class="mobile">
   <a> MENU </a>
</nav>

2）将位置设置为固定，将其对齐到左上角，使其覆盖整页，宽度和高度均为100％。使用text-align将菜单居中，最初将显示设置为无

.shadow
   {
    position:fixed; 
    top:0; 
    left:0; 
    background:rgba(0,0,0,0.6);
    z-index:5; 
    width:100%; 
    height:100%; 
    display: none;
    text-align: center;
 }

.shadow ul{
  list-style:none;
  margin-top: 10%;
}

.shadow h1{
  position: fixed;
  right: 0;
}

3）最后写一个简单的onclick监听器来弹出并关闭它

$(document).ready(function(){
   $(".mobile").click(function(){
        $(".shadow").css("display", "block");
   });

   $(".shadow h1").click(function(){
      $(".shadow").css("display", "none");
   });
})

使用折叠的Navbar下拉菜单阻止UI

1 个答案: