javascript - 大小灵活的私有(private)菜单

Question

我正在编写一个使用 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;}

Answer 1

你试过mmenu吗？ http://mmenu.frebsite.nl/

我就是这么用的。请注意，手机上的浏览器(尤其是 chrome)由于某种原因无法正确显示子菜单(可能已更新)