Conceal the Bootstrap side navigation bar upon clicking anywhere else

Question

Conceal the Bootstrap side navigation bar upon clicking anywhere else

Is there a way to make the side nav close when clicked outside of it while using my left side bar?

Here is the code for my side nav:

//side-nav is the class of my side nav 
//leftmenutrigger is my button on the nav bar that toggles the side nav

Any suggestions or tips, whether in JavaScript or CSS, on how to hide my side nav bar are appreciated.

Below are the codes for my navigation bar and left side nav bar:

$( document ).ready(function() {
  $('.leftmenutrigger').on('click', function(e) {
     $('.side-nav').toggleClass("open"); 
     e.preventDefault();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="navbar header-top sticky-top navbar-expand-lg  navbar-light bg-light" >
   <span class="navbar-toggler-icon leftmenutrigger"></span>
    <a class="navbar-brand" href="#">
        <img src="images/nexuslogo.png" style="width: 40px; height: 40px;padding: 0px; margin: 0px;">
    </a>
    <a class="navbar-brand" id="comp_name" name="comp_name"> Nexus Technologies, Inc.</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
        aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon" ></span> </button>      
         
    <div class="collapse navbar-collapse" id="navbarText" name="navbarText" >
    <ul class="navbar-nav animate side-nav ">         
      <li class="nav-item">
        <a  href="" id="addUser" name="addUser" style="width: 100%"> 
          <i class="fa fa-plus-circle"></i> Add User                   
        </a>            
          <a href="manageprize.php" id="manage_prize" name="manage_prize" style="width: 100%" target="_self"> 
            <i class="fa fa-table"></i> Manage Prizes                 
         </a>                                
    </li>         
  </ul>
 </div>
</nav>

THANKS!!!!

javascript html css bootstrap-4

Answer 1

Answer №1

Below is an example using Bootstrap 3:

<nav class="navbar navbar-default">
   <div class="container-fluid">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <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">
         <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
         </ul>
      </div>
   </div>
</nav>

See the following JavaScript code that I use:

Outside of .navbar-collapse :

$("body").click(function (event) {
    var target = $(event.target);
    var navbarCollapse = $(".navbar-collapse");               
    var navbarCollapseOpened = navbarCollapse.hasClass("in");
    if (navbarCollapseOpened && !target.hasClass("navbar-toggle")) {      
        navbarCollapse.collapse("hide");
    }
});

Anywhere outside the .navbar element:

$("body").click(function (event) {
    var navigation = $(event.target).parents(".navbar").length;
    if(!navigation) {
        $(".navbar .navbar-collapse").collapse("hide");
    }
});

Answer 2

Below is an example using Bootstrap 3:

<nav class="navbar navbar-default">
   <div class="container-fluid">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <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">
         <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
         </ul>
      </div>
   </div>
</nav>

See the following JavaScript code that I use:

Outside of .navbar-collapse :

$("body").click(function (event) {
    var target = $(event.target);
    var navbarCollapse = $(".navbar-collapse");               
    var navbarCollapseOpened = navbarCollapse.hasClass("in");
    if (navbarCollapseOpened && !target.hasClass("navbar-toggle")) {      
        navbarCollapse.collapse("hide");
    }
});

Anywhere outside the .navbar element:

$("body").click(function (event) {
    var navigation = $(event.target).parents(".navbar").length;
    if(!navigation) {
        $(".navbar .navbar-collapse").collapse("hide");
    }
});

Answer 3

Answer №2

Implement the use of onclick for the window and remove the class show if it exists.

Additionally, utilize onclick on the navigation to prevent collapsing.

$(window).click(function(e) {

   if($(".navbar-collapse").hasClass("show")){
      $('.navbar-collapse').removeClass("show"); 
      e.preventDefault();
      }
});
 $('.navbar-collapse').click(function(event){
     event.stopPropagation();
 });

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<nav class="navbar header-top sticky-top navbar-expand-lg  navbar-light bg-light" >
   <span class="navbar-toggler-icon leftmenutrigger"></span>          <!--THIS IS THE BUTTON THAT TOGGLES-->
    <a class="navbar-brand" href="#">
        <img src="images/nexuslogo.png" style="width: 40px; height: 40px;padding: 0px; margin: 0px;">
    </a>
    <a class="navbar-brand" id="comp_name" name="comp_name"> Nexus Technologies, Inc.</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
        aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon" ></span> </button>      
         
    <div class="collapse navbar-collapse" id="navbarText" name="navbarText" > //SIDE NAV BAR ITEMS
    <ul class="navbar-nav animate side-nav ">         
      <li class="nav-item">
        <a  href="" id="addUser" name="addUser" style="width: 100%"> 
          <i class="fa fa-plus-circle"></i> Add User                   
        </a>            
          <a href="manageprize.php" id="manage_prize" name="manage_prize" style="width: 100%" target="_self"> 
            <i class="fa fa-table"></i> Manage Prizes                 
         </a>                                
    </li>         
  </ul>
 </div>
</nav>

Answer 4

Implement the use of onclick for the window and remove the class show if it exists.

Additionally, utilize onclick on the navigation to prevent collapsing.

$(window).click(function(e) {

   if($(".navbar-collapse").hasClass("show")){
      $('.navbar-collapse').removeClass("show"); 
      e.preventDefault();
      }
});
 $('.navbar-collapse').click(function(event){
     event.stopPropagation();
 });

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<nav class="navbar header-top sticky-top navbar-expand-lg  navbar-light bg-light" >
   <span class="navbar-toggler-icon leftmenutrigger"></span>          <!--THIS IS THE BUTTON THAT TOGGLES-->
    <a class="navbar-brand" href="#">
        <img src="images/nexuslogo.png" style="width: 40px; height: 40px;padding: 0px; margin: 0px;">
    </a>
    <a class="navbar-brand" id="comp_name" name="comp_name"> Nexus Technologies, Inc.</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
        aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon" ></span> </button>      
         
    <div class="collapse navbar-collapse" id="navbarText" name="navbarText" > //SIDE NAV BAR ITEMS
    <ul class="navbar-nav animate side-nav ">         
      <li class="nav-item">
        <a  href="" id="addUser" name="addUser" style="width: 100%"> 
          <i class="fa fa-plus-circle"></i> Add User                   
        </a>            
          <a href="manageprize.php" id="manage_prize" name="manage_prize" style="width: 100%" target="_self"> 
            <i class="fa fa-table"></i> Manage Prizes                 
         </a>                                
    </li>         
  </ul>
 </div>
</nav>

Answer 5

Answer №3

document.addEventListener("click", function(event) {
    // Check if user clicks inside a specific element
    if (event.target.closest(".side-nav")){
       $('.side-nav').removeClass("open"); 
    };
});

This script is designed to handle clicks outside of a certain element using jQuery.

It utilizes event bubbling, which means that when a user clicks on any element within .side-nav, the event propagates up to the document level. If somewhere along the way we find .side-nav as an ancestor of the clicked element, it indicates that the click was made inside the intended area.

Answer 6

document.addEventListener("click", function(event) {
    // Check if user clicks inside a specific element
    if (event.target.closest(".side-nav")){
       $('.side-nav').removeClass("open"); 
    };
});

This script is designed to handle clicks outside of a certain element using jQuery.

It utilizes event bubbling, which means that when a user clicks on any element within .side-nav, the event propagates up to the document level. If somewhere along the way we find .side-nav as an ancestor of the clicked element, it indicates that the click was made inside the intended area.

Conceal the Bootstrap side navigation bar upon clicking anywhere else

Answer №1

Answer №2

Answer №3

Similar questions

Tips on transferring information from React frontend Hooks to the Express backend

Transferring information from a Form to various web pages using a single JavaScript source file

Converting an HTML menu to a WordPress menu: A step-by-step guide

In ReactJS, the behavior of event.currentTarget differs from that of Vanilla Javascript

Google Chrome Back Button not saving radio button selections

Struggling with transferring a JavaScript array to the current page using AJAX

Attempting to reset the altered values proves ineffective in different Ctrl instances within AngularJS

Is there a way to achieve the same functionality by utilizing the .then method instead of setTimeout? I encountered an issue stating "Cannot read property 'then' of undefined"

Container beyond div

Displaying upcoming events on the current webpage using a div element

Is the original image source revealed when clicked?

Create a rectangle on a canvas using coordinates that have been translated relative to the original image

Activate the Giphy search feature in the Slack Nestor bot's response

Collecting Images Based on Quantity

Is there a way to separate words and specify different CSS colors for each word?

Unable to establish connection via web socket with SSL and WSS in JavaScript

The backdrop hue conceals the dropdown menu background's shade

I'm experiencing an issue with this code where it is returning the URL instead of the expected data

Unexpected wrapping behavior in the input element when using Bootstrap grid system

Struggles encountered when choosing the initial visible item