默认情况下关闭引导程序的导航栏

我是新手引导程序，并且正尝试配置左侧导航栏在页面加载时默认关闭，因此用户必须单击菜单链接才能打开菜单。该页面是一个内容沉重的仪表板，需要尽可能多的房地产，因为我可以得到它。默认情况下关闭引导程序的导航栏

下面是相关代码：

<nav class="navbar-default navbar-static-side" role="navigation"> 
    <div class="sidebar-collapse"> 
     <ul class="nav metismenu" id="side-menu"> 
      <li class="nav-header"> 
       <div class="dropdown profile-element"> 
         <a href="index.html"><img src="img/lc-logo.png" width="172"/></a> 
         <a data-toggle="dropdown" class="dropdown-toggle" href="#"> 
          <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">(username)</strong></span> 
          <span class="text-muted text-xs block">(user role) <b class="caret"></b></span> </span> 
         </a> 
         <ul class="dropdown-menu animated fadeInRight m-t-xs"> 
          <li><a href="#">Logout</a></li> 
         </ul> 
       </div> 
       <div class="logo-element"> 
        LC 
       </div> 
      </li> 
      <li class="active"> 
       <a href="index.html"><i class="fa fa-calendar-o fa-lg"></i> <span class="nav-label">Schedule</span></a> 
      </li> 
      <li> 
       <a href="index.html"><i class="fa fa-th fa-lg"></i> <span class="nav-label">Releases</span></a> 
       <ul class="nav nav-second-level"> 
        <li class="active"><a href="release.html">v2.3</a></li> 
        <li><a href="release.html">v2.6</a></li> 
        <li><a href="release.html">v2.7</a></li> 
        <li><a href="release.html">v3.0 <span class="label label-primary pull-right">NEW</span></a></li> 
        <li><a href="offcycle.html">Off Cycle <span class="label label-primary pull-right">NEW</span></a></li> 
       </ul> 
      </li> 
      <li><a href="testing.html"><i class="fa fa-bug fa-lg"></i> <span class="nav-label">Test Status</span></a></li> 
      <li><a href="stats.html"><i class="fa fa-bar-chart fa-lg"></i> <span class="nav-label">Stats</span></a></li> 
      <li><a href="settings.html"><i class="fa fa-cogs fa-lg"></i> <span class="nav-label">Settings</span></a></li> 
     </ul> 
    </div> 
</nav>

来源

2015-10-31 jbigelow

你可以让你的nav设置为隐藏在你的CSS做到这一点很容易，然后把它绑在button叫它上的click事件。

给你的净值资产净值就应该是这样，现在的ID：

<nav id="nav" class="navbar-default navbar-static-side" role="navigation">

接下来创建一个按钮，你的导航标签以外，像这样：

<a href="#" id="btn" class="btn btn-default">Toggle</a>

设置你的CSS #nav到：

#nav{ 
    display:none; 
}

默认情况下，这会隐藏导航。

在您的JS文件创建这样的：

$('#btn').on('click',function(){ 
    $('#nav').slideToggle(); 
});

现在你的导航将默认是隐藏的，当你点击该按钮就会显示出来。

CODEPEN DEMO

来源

2015-10-31 16:41:30

默认情况下关闭引导程序的导航栏

回答

相关问题