Wie Navbar zu verstecken, wenn Overlay erscheint

Question

Mit Code von W3schools 'Sidenav Overlay' Ich versuche, den gleichen Effekt in Bootstrap zu erstellen. Ich habe das .navbar-toggle, das nach links schwebt und das navbar-toggle zeigt immer noch an, wenn die Überlagerung nach rechts sich bewegt. Nicht sicher, wie Sie die Navigationsleiste ausblenden können, wenn das Overlay angezeigt wird. Erster Beitrag, Dank

CSS

.navbar { 
    webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49); 
    moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49); 
    box-shadow:   0px 2px 3px rgba(100, 100, 100, 0.49); 
    background-color: white; 
    padding: 5px; 
} 

.navbar-brand { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 5px; 
    text-align: center; 
    margin: auto; 
} 
.navbar-toggle { 
    z-index:3; 
    border: none; 
    cursor: pointer; 
    float: left; 
} 

.navbar-toggle a:hover { 
    border: none; 
    background-color: none; 
    cursor: pointer; 
} 

/* The side navigation menu */ 
.sidenav { 
    height: 100%; /* 100% Full-height */ 
    width: 0; /* 0 width - change this with JavaScript */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Stay on top */ 
    top: 0; 
    left: 0; 
    background-color: #111; /* Black*/ 
    overflow-x: hidden; /* Disable horizontal scroll */ 
    padding-top: 60px; /* Place content 60px from the top */ 
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ 
} 

/* The navigation menu links */ 
.sidenav a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: block; 
    transition: 0.3s 
} 

/* When you mouse over the navigation links, change their color */ 
.sidenav a:hover, .offcanvas a:focus{ 
    color: #f1f1f1; 
} 

/* Position and style the close button (top right corner) */ 
.sidenav .closebtn { 
    position: absolute; 
    top: 0; 
    right: 25px; 
    font-size: 36px; 
    margin-left: 50px; 
} 

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */ 
#main { 
    transition: margin-left .5s; 
    padding: 20px; 
} 

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ 
@media screen and (max-height: 450px) { 
    .sidenav {padding-top: 15px;} 
    .sidenav a {font-size: 18px;} 
} 

HTML

<header> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="slide-nav"> 
    <div class="container"> 
    <div class="navbar-header"> 
    <a class="navbar-toggle" onclick="openNav()"> 
     <span class="sr-only" >Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </a> 
    <a class="navbar-brand" href="#">Test Nav</a> 
    <div id="mySidenav" class="sidenav"> 
     <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
     <a href="#">About</a> 
     <a href="#">Services</a> 
     <a href="#">Clients</a> 
     <a href="#">Contact</a> 
    </div> 
    </div> 
    </div> 
    </div> 
    </header> 

Javascript

/* Set the width of the side navigation to 250px */ 
function openNav() { 
    document.getElementById("mySidenav").style.width = "250px"; 
} 

/* Set the width of the side navigation to 0 */ 
function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
} 

Answer 1

hinzufügen Z-Index als 99 anstelle von 1 bis .sidenav Klasse

.sidenav { 
background-color: #111; 
height: 100%; 
left: 0; 
overflow-x: hidden; 
padding-top: 60px; 
position: fixed; 
top: 0; 
transition: all 0.5s ease 0s; 
width: 0; 
z-index: 99; 
} 

Answer 2

Hoffe, das könnte Ihnen helfen! Here is the working example

/*! 
 
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com) 
 
* Code licensed under the Apache License v2.0. 
 
* For details, see http://www.apache.org/licenses/LICENSE-2.0. 
 
*/ 
 

 
/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 250px; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 250px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -250px; 
 
    overflow-y: auto; 
 
    background: #000; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 250px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -250px; 
 
} 
 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 250px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: rgba(255,255,255,0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav > .sidebar-brand { 
 
    height: 65px; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a { 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 

 
@media(min-width:768px) { 
 
    #wrapper { 
 
     padding-left: 250px; 
 
    } 
 

 
    #wrapper.toggled { 
 
     padding-left: 0; 
 
    } 
 

 
    #sidebar-wrapper { 
 
     width: 250px; 
 
    } 
 

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

 
    #page-content-wrapper { 
 
     padding: 20px; 
 
     position: relative; 
 
    } 
 

 
    #wrapper.toggled #page-content-wrapper { 
 
     position: relative; 
 
     margin-right: 0; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 

 
    <title>Simple Sidebar - Start Bootstrap Template</title> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
 

 
    <!-- jQuery --> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
    <!-- Custom CSS --> 
 
    <link href="sidebar.css" rel="stylesheet"> 
 

 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 

 
    <style media="screen"> 
 
     /*body { padding-top: 70px; }*/ 
 
     #connectLogo { 
 
     height: 60px; 
 
     padding: 15px 0 5px 0; 
 
     } 
 
     #logo { 
 
     height: 60px; 
 
     padding: 5px 0 5px 20px; 
 
     } 
 

 
     .share-link { 
 
     line-height: 60px; 
 
     padding: 0 1em; 
 
     font-size: 2em; 
 
     } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-default NOnavbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 

 
      <button type="button" class="navbar-toggle collapsed menu-toggle"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 

 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 

 
      <span class="glyphicon glyphicon-share hidden-xs pull-right share-link" aria-hidden="true"></span> 
 

 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <img class="center-block" id="connectLogo" src="http://app.talkfusion.com/connect_r/images/title-videochat.svg" alt=""> 
 
      <!-- <div id="btnShare" style="display: none;"><img src="share.svg" width="22" alt="share"></div> --> 
 
     </div> 
 

 

 
<!-- 
 
     <button type="button" class="share-link hidden-xs pull-right"> 
 
      <span class="sr-only">Share link</span> 
 
      <span class="glyphicon glyphicon-link"></span> 
 
     </button> --> 
 

 
     </div> 
 
    </nav> 
 

 
    <div id="wrapper"> 
 

 
     <!-- Sidebar --> 
 
     <div id="sidebar-wrapper"> 
 
      <ul class="sidebar-nav"> 
 
       <li class="sidebar-brand"> 
 
        <a href="#"> 
 
         Start Bootstrap 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Dashboard</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Shortcuts</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Overview</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Events</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">About</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Services</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Contact</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /#sidebar-wrapper --> 
 

 
     <!-- Page Content --> 
 
     <div id="page-content-wrapper"> 
 
      <div class="container-fluid"> 
 
       <div class="row"> 
 
        <div class="col-lg-12"> 
 
         <h1>Simple Sidebar</h1> 
 
         <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
 
         <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
 
         <a href="#menu-toggle" class="btn btn-default menu-toggle">Toggle Menu</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!-- /#page-content-wrapper --> 
 

 
    </div> 
 
    <!-- /#wrapper --> 
 

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

 
</body> 
 

 
</html>

Answer 3

Es wird Ihnen helfen. Versuchen Sie, diese

$(".navbar-toggle").click(function(e) { 
 
     e.preventDefault(); 
 
     $("#mySidenav").toggleClass("activeclass"); 
 
}); 
 
$(".closebtn").click(function(e) { 
 
     e.preventDefault(); 
 
     $("#mySidenav").removeClass("activeclass"); 
 
});

.navbar { 
 
    webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49); 
 
    moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49); 
 
    box-shadow:   0px 2px 3px rgba(100, 100, 100, 0.49); 
 
    background-color: white; 
 
    padding: 5px; 
 
} 
 

 
.sidenav.activeclass{width:250px;} 
 
.sidenav{width:0px;} 
 
.navbar-brand { 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 5px; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 
.navbar-toggle { 
 
    z-index:3; 
 
    border: none; 
 
    cursor: pointer; 
 
    float: left; 
 
} 
 

 
.navbar-toggle a:hover { 
 
    border: none; 
 
    background-color: none; 
 
    cursor: pointer; 
 
} 
 

 
/* The side navigation menu */ 
 
.sidenav { 
 
    height: 100%; /* 100% Full-height */ 
 
    width: 0; /* 0 width - change this with JavaScript */ 
 
    position: fixed; /* Stay in place */ 
 
    z-index: 1; /* Stay on top */ 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; /* Black*/ 
 
    overflow-x: hidden; /* Disable horizontal scroll */ 
 
    padding-top: 60px; /* Place content 60px from the top */ 
 
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ 
 
} 
 

 
/* The navigation menu links */ 
 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s 
 
} 
 

 
/* When you mouse over the navigation links, change their color */ 
 
.sidenav a:hover, .offcanvas a:focus{ 
 
    color: #f1f1f1; 
 
} 
 

 
/* Position and style the close button (top right corner) */ 
 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 

 
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */ 
 
#main { 
 
    transition: margin-left .5s; 
 
    padding: 20px; 
 
} 
 

 
/* On s 
 
maller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ 
 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<header> 
 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="slide-nav"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
    <a class="navbar-toggle"> 
 
     <span class="sr-only" >Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </a> 
 
    <a class="navbar-brand" href="#">Test Nav</a> 
 
    <div id="mySidenav" class="sidenav"> 
 
     <a href="javascript:void(0)" class="closebtn">&times;</a> 
 
     <a href="#">About</a> 
 
     <a href="#">Services</a> 
 
     <a href="#">Clients</a> 
 
     <a href="#">Contact</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </header>