响应引导按菜单 [英] Responsive Bootstrap Push Menu

问题描述

我想创建响应的Bootstrap推菜单，我创建了这个寺庙和这是为计算机

i m trying to create Responsive Bootstrap Push Menu , i have created this templete and this for computer

，对于移动版，它类似于

and for mobile it look like this

所以当我们点击下拉菜单时，应该向左侧推并显示下拉菜单列表

so when we click dropdown it should push to the left side and show the dropdown menu list

这是我尝试过的代码

    <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container
                <div class="navbar-header">
                 <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-2 col-md-2" style="height:30px;margin-top:5px;">
                            <button type="button" class="navbar-toggle toggle-menu menu-left push-body" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="col-xs-8 col-md-8" style="height:30px;margin-top:5px;">
                            <input type="text" placeholder="email" class="form-control">
                        </div>
                        <div class="col-xs-2 col-md-2" style="height:30px;margin-top:5px;">
                            <button type="submit" class="btn btn-success">submit</button>
                        </div>
                    </div>
                    <div class="collapse navbar-collapse cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
                </div>
            </div>
            </div>
        </nav>
<script src="js/jPushMenu.js"></script>
    <script type="text/javascript">
      //<![CDATA[
      $(document).ready(function(){
        $('.toggle-menu').jPushMenu({closeOnClickLink: false});
        $('.dropdown-toggle').dropdown();
      });
      //]]>
    </script>

但不能推到左侧。

推荐答案

这是你想要的东西

http://jsfiddle.net/w6qc954t/

您的范本 http://jsfiddle.net/w6qc954t/2/

它使用takien的jPushMenu.js在github上除了下面的部分是包括在js

its using jPushMenu.js by takien at github other than follwing part is include in that js

$(window).resize(function() {
  $('.cbp-spmenu').v2p({
    height:'100vh'
  });
});

$(window).resize(); // trigger event so it shows on load
$(document).ready(function(){
        $('.toggle-menu').jPushMenu({closeOnClickLink: false});
        $('.dropdown-toggle').dropdown();
      });

这篇关于响应引导按菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！