我的网站包含一个包含5个菜单项的Navigation元素。
当网站在移动设备或平板电脑上运行时,在768px下,我希望下拉菜单的行为略有不同。
我希望菜单背景在显示时占据整个屏幕,基本上阻止了UI。
以下是该应用程序的外观。
这就是按下菜单按钮后我希望看到的样子。 (期望的结果)
这是我尝试过的,但都没有成功。
<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>
答案 0 :(得分:0)
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");
});
})