Hinzufügen einer Schließen-Schaltfläche - Bootstrap 3 Einschieben im Menü

Question

Ich möchte wissen, ob es möglich ist, eine Schließen-Schaltfläche in der Seitenleiste oberhalb der Suchleiste hinzuzufügen.

versuche ich viel Sache, aber es ist nicht

Beispiel funktioniert: Wir können einen Schließen-Button sehen

enter image description here

Hier mein Code

$(document).ready(function() { 
 

 

 
    //stick in the fixed 100% height behind the navbar but don't wrap it 
 
    $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); 
 
    
 
    $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>')); 
 

 
    // Enter your ids or classes 
 
    var toggler = '.navbar-toggle'; 
 
    var pagewrapper = '.columns-container'; 
 
    var navigationwrapper = '.navbar-header'; 
 
    var menuwidth = '100%'; // the menu inside the slide menu itself 
 
    var slidewidth = '80%'; 
 
    var menuneg = '-100%'; 
 
    var slideneg = '-80%'; 
 

 

 
    $("#slide-nav").on("click", toggler, function (e) { 
 

 
     var selected = $(this).hasClass('slide-active'); 
 

 
     $('#slidemenu').stop().animate({ 
 
      left: selected ? menuneg : '0px' 
 
     }); 
 

 
     $('#navbar-height-col').stop().animate({ 
 
      left: selected ? slideneg : '0px' 
 
     }); 
 

 
     $(pagewrapper).stop().animate({ 
 
      left: selected ? '0px' : slidewidth 
 
     }); 
 

 
     $(navigationwrapper).stop().animate({ 
 
      left: selected ? '0px' : slidewidth 
 
     }); 
 

 

 
     $(this).toggleClass('slide-active', !selected); 
 
     $('#slidemenu').toggleClass('slide-active'); 
 

 

 
     $('.columns-container, .navbar, body, .navbar-header').toggleClass('slide-active'); 
 

 

 
    }); 
 

 

 
    var selected = '#slidemenu, .columns-container, body, .navbar, .navbar-header'; 
 

 

 
    $(window).on("resize", function() { 
 

 
     if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) { 
 
      $(selected).removeClass('slide-active'); 
 
     } 
 

 

 
    }); 
 

 

 

 

 
});

/* adjust body when menu is open */ 
 
body.slide-active { 
 
    overflow-x: hidden 
 
} 
 
/*first child of #page-content so it doesn't shift around*/ 
 
.no-margin-top { 
 
    margin-top: 0px!important 
 
} 
 
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */ 
 
#page-content { 
 
    position: relative; 
 
    padding-top: 70px; 
 
    left: 0; 
 
} 
 
#page-content.slide-active { 
 
    padding-top: 0 
 
} 
 

 

 

 
/* put toggle bars on the left :: not using button */ 
 
#slide-nav .navbar-toggle { 
 
    cursor: pointer; 
 
    position: relative; 
 
    line-height: 0; 
 
    float: left; 
 
    margin: 0; 
 
    width: 30px; 
 
    height: 40px; 
 
    padding: 10px 0 0 0; 
 
    border: 0; 
 
    background: transparent; 
 
} 
 
/* icon bar prettyup - optional */ 
 
#slide-nav .navbar-toggle > .icon-bar { 
 
    width: 100%; 
 
    display: block; 
 
    height: 3px; 
 
    margin: 5px 0 0 0; 
 
} 
 
#slide-nav .navbar-toggle.slide-active .icon-bar { 
 
    background: orange 
 
} 
 
.navbar-header { 
 
    position: relative 
 
} 
 
/* un fix the navbar when active so that all the menu items are accessible */ 
 
.navbar.navbar-fixed-top.slide-active { 
 
    position: relative 
 
} 
 
/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */ 
 
@media (max-width:767px) { 
 
\t #slide-nav .container { 
 
\t  margin: 0!important; 
 
\t  padding: 0!important; 
 
     height:100%; 
 
\t } 
 
\t #slide-nav .navbar-header { 
 
\t  margin: 0 auto; 
 
\t  padding: 0 15px; 
 
\t } 
 
\t #slide-nav .navbar.slide-active { 
 
\t  position: absolute; 
 
\t  width: 80%; 
 
\t  top: -1px; 
 
\t  z-index: 1000; 
 
\t } 
 
\t #slide-nav #slidemenu { 
 
\t  background: #f7f7f7; 
 
\t  left: -100%; 
 
\t  width: 80%; 
 
\t  min-width: 0; 
 
\t  position: absolute; 
 
\t  padding-left: 0; 
 
\t  z-index: 2; 
 
\t  top: -8px; 
 
\t  margin: 0; 
 
\t } 
 
\t #slide-nav #slidemenu .navbar-nav { 
 
\t  min-width: 0; 
 
\t  width: 100%; 
 
\t  margin: 0; 
 
\t } 
 
\t #slide-nav #slidemenu .navbar-nav .dropdown-menu li a { 
 
\t  min-width: 0; 
 
\t  width: 80%; 
 
\t  white-space: normal; 
 
\t } 
 
\t #slide-nav { 
 
\t  border-top: 0 
 
\t } 
 
\t #slide-nav.navbar-inverse #slidemenu { 
 
\t  background: #333 
 
\t } 
 
\t /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/ 
 
\t #navbar-height-col { 
 
\t  position: fixed; 
 
\t  top: 0; 
 
\t  height: 100%; 
 
     bottom:0; 
 
\t  width: 80%; 
 
\t  left: -80%; 
 
\t  background: #f7f7f7; 
 
\t } 
 
\t #navbar-height-col.inverse { 
 
\t  background: #333; 
 
\t  z-index: 1; 
 
\t  border: 0; 
 
\t } 
 
\t #slide-nav .navbar-form { 
 
\t  width: 100%; 
 
\t  margin: 8px 0; 
 
\t  text-align: center; 
 
\t  overflow: hidden; 
 
\t  /*fast clearfixer*/ 
 
\t } 
 
\t #slide-nav .navbar-form .form-control { 
 
\t  text-align: center 
 
\t } 
 
\t #slide-nav .navbar-form .btn { 
 
\t  width: 100% 
 
\t } 
 
} 
 
@media (min-width:768px) { 
 
\t #page-content { 
 
\t  left: 0!important 
 
\t } 
 
\t .navbar.navbar-fixed-top.slide-active { 
 
\t  position: fixed 
 
\t } 
 
\t .navbar-header { 
 
\t  left: 0!important 
 
\t } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="//code.jquery.com/jquery.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
 
<meta charset=utf-8 /> 
 
<title>JS Bin</title> 
 
</head> 
 
<body> 
 
    
 
    
 
<div class="navbar navbar-inverse 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="#">Project name</a> 
 
    </div> 
 
    <div id="slidemenu"> 
 
     
 
      <form class="navbar-form navbar-right" role="form"> 
 
      <div class="form-group"> 
 
       <input type="search" placeholder="search" class="form-control"> 
 
      </div> 
 
      <button type="submit" class="btn btn-primary">Search</button> 
 
      </form> 
 
     
 
    <ul class="nav navbar-nav"> 
 
    <li class="active"><a href="#">Home</a></li> 
 
    <li><a href="#about">About</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li class="dropdown-header">Nav header</li> 
 
     <li><a href="#">Separated link</a></li> 
 
     <li><a href="#">One more separated link</a></li> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li class="dropdown-header">Nav header</li> 
 
     <li><a href="#">Separated link</a></li> 
 
     <li><a href="#">One more separated link</a></li> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li class="dropdown-header">Nav header</li> 
 
     <li><a href="#">Separated link test long title goes here</a></li> 
 
     <li><a href="#">One more separated link</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
      
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
    
 
    <!--wrap the page content do not style this--> 
 
<div id="page-content"> 
 
    
 
    <div class="container" > 
 
    <h1 class="no-margin-top">Bootstrap starter template</h1> 
 
    <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p> 
 
    
 
     <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p> 
 

 
    
 
    
 
     <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p> 
 

 
    
 
    
 
     <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p> 
 

 
    
 
    
 
    
 
     <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p> 
 

 
    
 
     <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p> 
 

 
    
 
     <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p> 
 

 
    
 
     <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p> 
 

 
    
 
     <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p> 
 

 
    
 
    
 
     <p class="lead">Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p> 
 

 
    
 
    
 
    </div> 
 
    <!-- /.container --> 
 
    
 
</div> 
 
<!-- /#page-content --> 
 

 
</body> 
 
</html>

dank

Answer 1

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>nav with close button</title> 
 
    <style> 
 
    #close{ 
 
     display:none; 
 
     float:right; 
 
     margin-right: 20px; 
 
     margin-top: 15px; 
 
     background:#ccc; 
 
     padding: 8px; 
 
     border-radius: 8px; 
 
    } 
 
    </style> 
 
    <script> 
 
    $(document).ready(function() { 
 
     
 
     $(".man").one("click", function() { 
 
     $(".man").hide(); 
 
     $("#close").show(); 
 
      
 
}); 
 
     
 
     $(".man").click(function() { 
 
     $("#navbar .nav").show(); 
 
     $("#close").show(); 
 
      
 
}); 
 
     
 
     $("#close").click(function() { 
 
      $("#navbar .nav").hide(); 
 
      $(".man").show(); 
 
      $("#close").hide(); 
 
}); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
<!-- Static navbar --> 
 
     <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
      
 
     <a href="#"><span class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id='close'>x</span></a> <!--Close button--> 
 
      
 
      <button type="button" class="man navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">    
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      
 
      <a class="navbar-brand" href="#">Project name</a> 
 
      </div> 
 
      <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Action</a></li> 
 
        <li><a href="#">Another action</a></li> 
 
        <li><a href="#">Something else here</a></li> 
 
        <li role="separator" class="divider"></li> 
 
        <li class="dropdown-header">Nav header</li> 
 
        <li><a href="#">Separated link</a></li> 
 
        <li><a href="#">One more separated link</a></li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </div><!--/.nav-collapse --> 
 
     </div><!--/.container-fluid --> 
 
     </nav> 
 
</body> 
 
</html>

Dies ist, was man wollte, fügte hinzu: Schließen-Schaltfläche und verwendet jquery nav-Menü zu schließen für ein mobiles Gerät zu helfen, in, Glücklich Coding!