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關閉畫布菜單

回答

相關問題