Bootstrap 3 关闭 Canvas 菜单

Question

您好，我正在尝试使用 bootstrap 的组件制作一个简单的非 canvas 菜单。快完成了，我的 HTML 如下：

<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
    }
  }

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

我想知道是否可以仅使用一个默认导航栏在我的代码中关闭 canvas 菜单？下面的 link 与我想要实现的类似，只是它没有我想要的推送效果，也没有像我的代码中那样使用侧边栏组件。

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

我也做了研究，发现有像 Foundation 和 Jasny Bootstrap 这样的关闭-canvas 插件，但是因为我快要完成了，所以我想也许没有它们我也能过得去.

非常感谢您的帮助。

Answer 1

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

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

如果有人感兴趣，请参阅下面的 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;
}

Bootstrap 3 关闭 Canvas 菜单

Bootstrap 3 Off Canvas Menu

sidebar

twitter-bootstrap