Bootstrap 3关闭画布菜单

嗨我想用bootstrap的组件做一个简单的画布外菜单。它已接近完成，我的HTML低于：Bootstrap 3关闭画布菜单

<body> 
    <div class="container"> 
    <div class="row row-offcanvas row-offcanvas-right"> 

     <div class="visible-sm visible-md visible-lg"> 
     <nav class="navbar navbar-default"> 
      <a class="navbar-brand" href="#">MENU 1</a> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Link</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
      </ul> 
     </nav> 
     </div> <!-- visible-sm-md-lg--> 

     <div class="visible-xs"> 
      <div class="navbar navbar-default"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#sidebar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand">MENU 2</a> 
       </div> <!-- Navbar Header --> 
      </div> <!-- Navbar--> 
      <div class="sidebar-offcanvas" id="sidebar"> 
       <div class="sidebar-nav"> 
       <ul class="nav nav-sidebar"> 
        <li class="active"><a href="#">Link</a></li> 
        <li><a href="#">Link2</a></li> 
        <li><a href="#">Link3</a></li> 
       </ul> 
       </div> <!-- sidebar--> 
      </div> <!-- sidebar offcanvas--> 
     </div> <!-- visible-xs--> 

    <!-- ********** MAIN SECTION **********--> 
     <div id="Main"> 
     <h1> Main Section1</h1> 
     <h1> Main Section2</h1> 
     <h1> Main Section3</h1> 
     </div> <!-- End Main Div--> 

    </div> <!--End row off canvas Div--> 
    </div> <!--End Container Div--> 

    <script src="offcanvas.js"></script> 
</body>

我也是用下面的CSS：

html, 
body { 
    overflow-x: hidden; /* Prevent scroll on narrow devices */ 
} 

@media screen and (max-width: 767px) { 
    .row-offcanvas { 
    position: relative; 
    -webkit-transition: all .25s ease-out; 
     -o-transition: all .25s ease-out; 
      transition: all .25s ease-out; 
    } 

    .row-offcanvas-right { 
    right: 0; 
    } 

    .row-offcanvas-right 
    .sidebar-offcanvas { 
    right: -50%; /* 6 columns */ 
    } 

    .row-offcanvas-right.active { 
    right: 50%; /* 6 columns */ 
    } 

    .sidebar-offcanvas { 
    position: absolute; 
    top: 0; 
    width: 50%; /* 6 columns */ 
    } 
    } 

    .sidebar-nav { 
    background-color: #c8102e; 
    } 

    .sidebar-nav > ul > li > a { 
    padding: 15px; 
    background: blue; 
    color: #ffffff; 
    border-bottom: 1px solid black; 
    padding-left: 20px; 
    } 

    @media screen and (min-width: 368px) { 
    .row-offcanvas-right .sidebar-offcanvas { 
     right: -60%; 
     height: 100%; 
     background-color: blue 
    } 
    }

是我遇到的问题是，我目前使用两个导航栏默认菜单在我认为是相当多余的代码中。

我想知道是否有可能使用只有一个默认的导航栏在我的代码中的画布菜单？下面的链接与我试图实现的类似，只是它没有我想要的推送效果，也没有像我的代码中那样使用侧边栏组件。

http://www.bootply.com/Bno3d0PK7V#

我也做了研究，发现有脱帆布插件，像基金会和Jasny引导，但由于我如此接近完成它，我想我或许能没有他们获得通过。

任何帮助真的很感激。

来源

2015-10-21 Milk_Shaykh

我找到了解决我的问题的办法。

我现在只使用一个像我想要的导航栏。

如果有人有兴趣，请参阅下面的HTML和CSS。

HTML：

<body> 

<div id="wrapper"> 
    <div id="page-content-wrapper"> 
     <nav class="navbar navbar-inverse"> 
      <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" id="menu-toggle"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Project</a> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#">Link1</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
       </ul> 
      </div> 
      </div> 
     </nav> 
    <div class="container-fluid"> 
      <div class="row"> 
      <div id="Main"> 
      <h3> Main Section1</h3> 
      <h3> Main Section2</h3> 
      <h3> Main Section3</h3> 
      </div> 
      </div>  
    </div> 
    </div> 
    <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 3</a></li> 
     </ul> 
    </div> 
</div> 

    <script> 
    $("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 
    }); 
    </script> 

</body>

CSS：

#wrapper { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    overflow-x: hidden; 
} 

#sidebar-wrapper { 
    z-index: 1; 
    position: absolute; 
    top: 0; 
    width: 235px; 
    height: 100%; 
    right: -235px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#page-content-wrapper { 
    width: 100%; 
    position: absolute; 
    right: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

.sidebar-nav { 
    list-style: none; 
    padding: 0; 
} 

.sidebar-nav li a { 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
} 

#wrapper.toggled #sidebar-wrapper { 
    right: 0; 
} 

#wrapper.toggled #page-content-wrapper { 
    right: 235px; 
}

来源

2015-11-04 05:03:58

Bootstrap 3关闭画布菜单

回答

相关问题