Is there a way for me to automatically close the navbar by clicking anywhere on the body of

Question

Is there a way for me to automatically close the navbar by clicking anywhere on the body of

Here is the structure of my navigation bar:

<div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <span class="d-flex mx-3">
          <img src="{{ asset('images/logo-small.png') }}" width="30" height="30" alt="Deliveboo">
          <h4 class="mx-3">Deliveboo</h4>
        </span>
        <hr class="mx-3">
        <div class="d-flex justify-content-center p-3">
          @if (Auth::guest())
            <a class="btn btn-primary text-center" href="{{ route('login') }}"
              role="button">Accedi</a>
            <a class="btn btn-primary text-center" href="{{ route('register') }}"
              role="button">Registrati</a>
          @endif
          @if (Auth::check())
            <a class="btn btn-primary" href="{{ route('restaurants.dashboard') }}" role="button">Vai
              alla tua dashboard</a>
          @endif
        </div>
        <hr class="mx-3">
      </div>

Below is the code for JavaScript functions:

<script>
  function openNav() {
    document.getElementById("mySidenav").style.width = "375px";
    document.getElementById("root").style.overflow = "hidden";
  }

  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("root").style.overflow = "auto";
  }
</script>

I need to add functionality to close the navbar on clicking outside of it since I am new to JavaScript.

Here is the entire view:

<body id="root">
{{-- HEADER --}}
<header>
...
</header>

{{-- MAIN --}}
<main>
  {{-- DELIVEBOO SECTION  --}}
  <section id="deliveboo-section" class="my-5">
   ...
  </section>

  {{-- DEFAULT SECTION  --}}
  <section id="default-section" class="py-5">
    ...
  </section>

  {{-- SECTION SUGGESTED  --}}
  <section id="suggested" class="m-5">
    ...
  </section>
</main>

javascript bootstrap-5

Answer 1

Answer №1

If you want to close the sideBar navigation when it is open, you can add a listener to the body element and call the closeNav function. Additionally, you can attach a click listener to prevent the event propagation when clicking inside the navigation bar.

    <script>
       // Storing references to DOM elements to avoid repeated queries
       const sideNavBarElem = document.getElementById("mySidenav");
       const rootElem = document.getElementById("root");
       const bodyElem = document.querySelector('body');

       function openNav() {
          sideNavBarElem.style.width = "375px";
          rootElem.style.overflow = "hidden";
          // Delay attaching body listener to avoid immediate activation upon opening
          setTimeout(function() {
             bodyElem.addEventListener('click', bodyNavListener);
          }, 0);
       }

       function closeNav() {
          sideNavBarElem.style.width = "0";
          rootElem.style.overflow = "auto";
          bodyElem.removeEventListener('click', bodyNavListener);
       }
       
       function bodyNavListener(){
          // Close the navigation bar if it is open
          if(sideNavBarElem.style.width !== "0"){
             closeNav();
          }
       }
       
       sideNavBarElem.addEventListener('click', function(event){
             // Prevent event propagation to avoid closing the navigation bar unintentionally
          event.stopPropagation();
       })
    
    </script>

Check out this sample on Codepen

Answer 2

If you want to close the sideBar navigation when it is open, you can add a listener to the body element and call the closeNav function. Additionally, you can attach a click listener to prevent the event propagation when clicking inside the navigation bar.

    <script>
       // Storing references to DOM elements to avoid repeated queries
       const sideNavBarElem = document.getElementById("mySidenav");
       const rootElem = document.getElementById("root");
       const bodyElem = document.querySelector('body');

       function openNav() {
          sideNavBarElem.style.width = "375px";
          rootElem.style.overflow = "hidden";
          // Delay attaching body listener to avoid immediate activation upon opening
          setTimeout(function() {
             bodyElem.addEventListener('click', bodyNavListener);
          }, 0);
       }

       function closeNav() {
          sideNavBarElem.style.width = "0";
          rootElem.style.overflow = "auto";
          bodyElem.removeEventListener('click', bodyNavListener);
       }
       
       function bodyNavListener(){
          // Close the navigation bar if it is open
          if(sideNavBarElem.style.width !== "0"){
             closeNav();
          }
       }
       
       sideNavBarElem.addEventListener('click', function(event){
             // Prevent event propagation to avoid closing the navigation bar unintentionally
          event.stopPropagation();
       })
    
    </script>

Check out this sample on Codepen

Answer 3

Answer №2

To target a different element, you can add an eventListener on the specific area using event.target. Ensure that you only add the listener when the navigation is open and remember to remove it when the navigation is closed using removeEventListener() to avoid unnecessary load.

Answer 4

To target a different element, you can add an eventListener on the specific area using event.target. Ensure that you only add the listener when the navigation is open and remember to remove it when the navigation is closed using removeEventListener() to avoid unnecessary load.

Answer 5

Answer №3

To effectively close the navigation sidebar, you should attach an event listener to the body element and then execute the corresponding function.

const body = document.querySelector('body');
const buttonToOpen = document.querySelector('#buttonSideNav')

function closeNavBody(e) {
  if (e.target.id !== 'mySidenav' || e.target.id !== '#buttonSideNav') {
    closeNav();
    body.removeEventListener('click', myClick);
  }
}

function openNav() {
  document.getElementById("mySidenav").style.width = "375px";
  document.getElementById("root").style.overflow = "hidden";
  body.addEventListener('click', closeNavBody)
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("root").style.overflow = "auto";
}

Answer 6

To effectively close the navigation sidebar, you should attach an event listener to the body element and then execute the corresponding function.

const body = document.querySelector('body');
const buttonToOpen = document.querySelector('#buttonSideNav')

function closeNavBody(e) {
  if (e.target.id !== 'mySidenav' || e.target.id !== '#buttonSideNav') {
    closeNav();
    body.removeEventListener('click', myClick);
  }
}

function openNav() {
  document.getElementById("mySidenav").style.width = "375px";
  document.getElementById("root").style.overflow = "hidden";
  body.addEventListener('click', closeNavBody)
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("root").style.overflow = "auto";
}

Answer 7

Answer №4

Retrieve references to the necessary elements

    const mySideNav = document.getElementById("mySidenav");
    const root =  document.getElementById("root");
    const body = document.getelementByTagName("body");

Define the required functions

    function closeNav() {
         mySidenav.style.width = "0";
         root.style.overflow = "auto";
         body.onclick = undefined;
    }

    function openNav() {
     mySideNav.style.width = "375px";
      root.style.overflow = "hidden";
      body.onclick = closeNav;
    }

Answer 8

Retrieve references to the necessary elements

    const mySideNav = document.getElementById("mySidenav");
    const root =  document.getElementById("root");
    const body = document.getelementByTagName("body");

Define the required functions

    function closeNav() {
         mySidenav.style.width = "0";
         root.style.overflow = "auto";
         body.onclick = undefined;
    }

    function openNav() {
     mySideNav.style.width = "375px";
      root.style.overflow = "hidden";
      body.onclick = closeNav;
    }

Is there a way for me to automatically close the navbar by clicking anywhere on the body of

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Could anyone clarify the workings of the async function in this specific useEffect situation?

Instead of modifying the selected class, jQuery generates inline styles

Creating a User Authentication System using Node.js and Express

Tips for verifying elements using the Loop technique in a JSON array

Error with Chakra UI and React Hook Form mismatched data types

Selecting the child checkbox within the parent div using ng-click

Looking for a list of events in Express.js?

Callbacks for AJAX responses that are asynchronous

Interactive JavaScript button that navigates me to a document without the need to click

Is there a way to determine if an npm package is compatible with ES6 import syntax for importing?

incorporating my unique typographic styles into the MUI framework

"The authentication scheme is unrecognized" - this is the message produced by Node-LinkedIn module

What are the steps for leveraging a proxy with NodeJS and Selenium?

What's the reason for the malfunction of the "required" attribute in my Angular form?

Difficulty accessing context.params query in Next.js Dynamic Path

Discover the process of incorporating two distinct component structures within a single React application

I am finding my program to be lacking efficiency. Is there a more concise method for solving this issue?

Looking to shrink the image dimensions for optimal mobile display using bootstrap

Modify the innerHTML to adjust font size when a button is clicked in Ionic 5, or eliminate any unnecessary spaces

Fetching images using node.js via URL