我正在编写一个使用 Bootstrap 类的网站。我设计了一个从屏幕右侧滑出的菜单,覆盖了内容。我希望菜单自动成为屏幕的高度,并且是 col-xs-2。这是我尝试过的,但是菜单打开时覆盖了整个页面,当然,高度是 300px 而不是屏幕的高度:
HTML
<div class = "row">
<div class = "col-xs-10">
<a id="menuTrigger" class="dropdown-toggle" data-toggle = "dropdown">Menu</a>
</div>
<div class = "col-xs-2">
<div id="myMenu">
<div id="item1" class="submenu">Item 1</div>
<div id="item2" class="submenu">Item 2</div>
<div id="item3" class="submenu">Item 3</div>
</div>
</div>
</div>
脚本
mnuOut=false;
$('#menuTrigger').click(function(){
if (mnuOut){
$('#myMenu').animate({
right: '-100%'
},800);
mnuOut = false;
}else{
$('#myMenu').animate({
right: 0
},800);
mnuOut = true;
}
})
CSS
#myMenu { position:fixed;
top:20px;
right:-100%;
width:100%;
height:300px;
background:palegreen;}
.submenu{width:100%;height:20px;padding:20px 5px;border:1px solid green;}
#menuTrigger:hover{cursor:pointer;}
最佳答案
你试过mmenu吗? http://mmenu.frebsite.nl/
我用的就是这个。请注意,手机上的浏览器(特别是 Chrome)由于某种原因无法正确执行子菜单(可能已更新)
关于javascript - 私有(private)菜单,大小灵活,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34793266/