Twitter bootstrap 引导3关闭画布菜单_Twitter Bootstrap_Sidebar

Twitter bootstrap 引导3关闭画布菜单

twitter-bootstrap

Twitter bootstrap 引导3关闭画布菜单,twitter-bootstrap,sidebar,Twitter Bootstrap,Sidebar,嗨，我正在尝试使用bootstrap的组件制作一个简单的非画布菜单。它即将完成，我的HTML如下所示： <body> <div class="container"> <div class="row row-offcanvas row-offcanvas-right"> <div class="visible-sm visible-md visible-lg"> <nav class="navbar

嗨，我正在尝试使用bootstrap的组件制作一个简单的非画布菜单。它即将完成，我的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>

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

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

我也做了研究，发现有像Cub和Jasny Bootstrap这样的画布插件，但是因为我很接近完成它，我想也许我可以不用它们。p>

非常感谢您的帮助

我找到了解决问题的办法

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

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

HTML:

我已经找到了解决我问题的办法

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

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

HTML:

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

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

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