引导响应式菜单

您需要两个导航栏（一个在顶部，一个在侧面），然后使用JQuery将侧面导航栏移动到页面顶部。

因此，如果您有两个这样的导航栏：

<div class="navbar navbar-inverse navbar-fixed-top ">
    <div class="container ">
        <div class="navbar-header ">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
                <span class="icon-bar "></span>
                <span class="icon-bar "></span>
                <span class="icon-bar "></span>
            </button>
            <a class="navbar-brand " href="/ ">Application name</a>
        </div>
        <div id="topmenu" class="navbar-collapse collapse ">
            <ul class="nav navbar-nav ">
                <li>
                    <a href="/ ">Home</a>
                </li>
                <li>
                    <a href="/Home/About ">About</a>
                </li>
                <li>
                    <a href="/Home/Contact ">Contact</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right ">
                <li>
                    <a href="/Account/Register " id="registerLink ">Register</a>
                </li>
                <li>
                    <a href="/Account/Login " id="loginLink ">Log in</a>
                </li>
            </ul>

        </div>
    </div>
</div>
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
      <ul class="nav nav-stacked" id="menu-bar">
        <li class="panel dropdown">
          <a data-toggle="collapse" data-parent="#menu-bar" href="#collapseOne">
              Admin
          </a>
          <ul id="collapseOne" class="panel-collapse collapse">
            <li><a href="#">Manage Members</a></li>
            <li><a href="#">Add a new Member</a></li>
          </ul>
        </li>  
        <li class="panel dropdown">
          <a data-toggle="collapse" data-parent="#menu-bar" href="#collapseTwo">
              Committee
            </a>
          <ul id="collapseTwo" class="panel-collapse collapse">
            <li><a href="#">Home</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </li>     
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
<div class="clearfix"></div>
<div class="content">
<div class="container bodycontent">
   <div class="jumbotron">
      <h1>Testing Responsive sidemenu</h1>
      <p class="lead">Trying to get my side menu to replace the top menu when the size goes too small.
      </p>
   </div>
   <div class="row">
     <div class="col-md-12">
       <div class="row">
         <article>
          <h1>Content</h1>
          <p>Content here</p>
        </article>
       </div>
     </div>
   </div>
 </div>
</div>

JQuery如下：

var $window = $(window),
    $html = $('#menu-bar');

$window.resize(function resize(){
  if ($window.width() < 768) {
    // When the side bar is moved to the top, this stops it being fixed in place
    $("#navbar").removeClass('navbar-fixed-top');
    return $html.removeClass('nav-stacked');
  }
  $("#navbar").addClass('navbar-fixed-top');
  $html.addClass('nav-stacked');
}).trigger('resize');

和CSS：

/* CSS used here will be applied after bootstrap.css */
@media (max-width: 767px) {
    .content {
        padding: 15px;
        margin-top: 10px;
    }
}
@media (min-width: 768px) {

    #menu-bar .panel {
    margin-bottom: 0;
    background-color: rgba(0,0,0,0);
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

    #menu-bar li a {
        color: #fff;
        font-size: 16px;
        font-weight: bold;
    }

    #navbar {
        float: left;
        width: 200px;
        height: 100%;
    }

    .content {
        margin-left: 200px;
        min-height: 100%;
        margin-top: 60px;
    }

    .container {
        margin-left: 10px;
        padding-right: 150px;
    }

}
.navbar-brand > h3 {
   margin-top: 0;
   margin-bottom: 0;
}
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
#navbar {
   margin-top: 50px
}

如果您希望左侧栏具有某些CSS，则应指定CSS，如下所示：

@media (min-width: 768px) {

    #menu-bar {
        /* Put your CSS here. It will not apply to the menu-bar when it moves to the top */
    }

}

在这里引导