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>

SCRIPT

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）由于某种原因（可能已更新）无法正常执行子菜单

私人菜单，大小灵活

1 个答案: