जब ओवरले दिखाई देता है तो navbar को छिपाने के लिए कैसे करें

Question

W3schools 'सिडेनाव ओवरले' से कोड का उपयोग करके मैं बूटस्ट्रैप में एक ही प्रभाव बनाने की कोशिश कर रहा हूं। मेरे पास .navbar-टॉगल फ़्लोटिंग बाएं है और नेवबार-टॉगल अभी भी दिखाता है जब ओवरले सही हो जाता है। ओवरले दिखाई देने पर नेविबार-टॉगल को छिपाना सुनिश्चित नहीं है। पहली पोस्ट, धन्यवाद

सीएसएस

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

एचटीएमएल

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

जावास्क्रिप्ट

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

.sidenav वर्ग

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

करने के लिए 99 के बजाय 1 के रूप में z- सूचकांक जोड़े

Answer 2

उम्मीद है कि यह आपकी मदद कर सकता है! 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

यह आप में मदद मिलेगी। प्रयास करें इस

$(".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>