How can the entire menu be closed in Bootstrap 5 when clicking on a link or outside of the page?

I'm currently utilizing BootStrap 5 for constructing my webpage.

Within my page, I have a NavBar Menu containing various links.

<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e35323533203101746f716f71">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05666a776045372b3c2b37">[email protected]</a>/dist/umd/popper.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbaeb5abb5aa">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  </head>
  
<nav class="navbar navbar-expand-lg navbar-light bg-transparent pt-0 pb-0">
        <div class="container">
          <a class="navbar-brand pt-0 pb-0 me-0" href="#home">Salimi<span>Me</span></a>
          <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-between" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item position-relative">
                <a class="nav-link active" aria-current="page" href="#home">Home</a>
              </li>
              <li class="nav-item position-relative">
                <a class="nav-link" href="#about">About</a>
              </li>
              <li class="nav-item position-relative">
                <a class="nav-link" href="#skills">Skills</a>
              </li>
              <li class="nav-item position-relative">
                <a class="nav-link" href="#timeline">Education</a>
              </li>
              <li class="nav-item position-relative">
                <a class="nav-link" href="#portfolio">Portfolio</a>
              </li>
              <li class="nav-item position-relative">
                <a class="nav-link" href="#contact">Contact</a>
              </li>
            </ul>
            <a class="top-btn text-decoration-none d-inline-block" href="#">Download CV</a>
          </div>
        </div>
      </nav>

My goal is to close the entire NavBar Menu when a user clicks on a link inside it or anywhere outside of the menu itself.

Is there a way to achieve this functionality in BootStrap 5?

javascripthtmlcssbootstrap-5

Answer №1

<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.0" />

    <title>Document</title>

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b5aeb0aeb0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75161a071035475b4c5b47">[email protected]</a>/dist/umd/popper.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d3c8d6c8d7">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  </head>

  <style></style>

  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li>
                  <a class="dropdown-item" href="#">Something else here</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </body>

  
  <script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"
  ></script>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Commitment failing to deliver the information

I am currently attempting to retrieve data based on a specific ObjectId using promises. The function is successfully fetching the data from the database, but it is failing to return the result as expected. Below is the code snippet: getScreenDetails = fun ...

javascriptnode.js

State update failing to modify arrays

Shown below is an array that contains boolean values: const [state, setState] = React.useState({ [`${"checkedA"+index}`]: false, [`${"checkedB"+index}`]: false, [`${"checkedC"+index}`]: false, [`${"checkedD"+index}`]: false, }); ...

javascriptreactjsmaterial-ui

Having difficulty refreshing metadata on the client side within Next.js through client-side data retrieval

Having some trouble with updating metadata using NextSeo when fetching data on the client side. useEffect(()=>{ fetch(assetURL) .then((res) => res.json()) .then((data) => { console.log(data); }) .catch((error) => { console.err ...

javascripthtmlreactjsnext.jsseo

Angular 2: Change Boolean value depending on a condition

I find myself facing a challenge with a search-bar feature. My goal is to display all the filtered names when the input value reaches a length of 2 or more characters. After successfully extracting the value.length from the input field, I encountered a ro ...

javascripthtmlangularjsangularboolean

What is the best way to access the data stored within a Promise object in a React application?

Below is the snippet of my code that handles parsing application data: async function parseApplication(data: Application) { const fieldGroupValues = {}; for (const group of Object.keys(data.mappedFieldGroupValues)) { const groupValue = data.mappedF ...

javascriptreactjstypescriptparsingpromise

The web form response fails to show any content beyond a space character when viewed on the console

I'm facing a new issue and need some assistance to resolve it. I have successfully extracted information from a form and stored it in a database. However, I've noticed that when I display the data on the console, parts of the information get cut ...

htmlnode.jsmongodbexpresshandlebars.js

What are the steps to creating an API for a web application?

I have been tasked with creating an API for my web application that will utilize another website's authentication system. While I have a basic understanding of JavaScript, PHP, and HTML, I need guidance on how to proceed with building the API. Here i ...

javascriptphphtmlapiweb-applications

Tips for rotating a canvas object without changing its position

I am currently in the process of developing a JavaScript game centered around a character positioned on top of the world. Although the earth element is already part of the game, I am encountering an issue with its rotation causing it to shift position as w ...

javascripthtmlcanvasrotation

Is the functionality of `Promise.all` affected by the browser's restriction on concurrent connections?

Suppose an api server is utilizing HTTP/1.1 and the browser has a maximum of 6 concurrent TCP connections per domain. If I make 7 api calls simultaneously using Promise.all, does that mean the last api call will have to wait for the response from the first ...

javascripthttphttp2

Is there a way to access the Google Maps instance without the need to define it as a global variable?

When referencing the google map API documents, it is common practice to use script tags which make the google map instance a global variable. But is there a way to access the map instance without it being global? The npm/bower package angular-google-maps, ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3npm

Is it worth the effort to incorporate HTML5 header, main, section elements, and more into your website?

Do all of these elements simply serve the purpose of making the HTML code easier to read? They don't have any additional functions, right? Unfortunately, we could achieve the same result without them. <Div> <p> Example </p> </ ...

html

Having difficulty sending data to a controller through AJAX in Code Igniter. Can anyone help troubleshoot

I recently started learning PHP OOP and am currently using the Code Igniter framework. I encountered some difficulties in sending data to the controller using AJAX, so I attempted a simple test to check if AJAX was functioning properly, but unfortunately, ...

javascriptphpjqueryajaxcodeigniter

Displaying a pop-up window containing information retrieved from the console output

Upon user input in the form on my web application, an scp and ftp process is initiated that takes around 2-3 minutes to complete. The result page consequently experiences a similar delay in loading. To enhance user experience and provide real-time updates ...

htmlajaxspring-bootpopup

Turn off the functionality of Telerik in DotNetNuke

After installing the DNN module on a remote machine, I noticed that it altered the CSS styling. Upon inspecting it with Firebug, I discovered that the styles causing issues are located in telerik.web.ui.webresource.axd, making it difficult to overwrite the ...

csstelerikdotnetnuke

JavaScript Tutorial: Updating the maximum value of a gauge chart

Is there a way to dynamically change both the total and max values in my current code? The maximum value needs to be dynamic based on the filter applied. Here is the code snippet: resource1=[ "//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js", "//cd ...

javascripthtmlgaugejsgauge

A web application using JavaScript and Node.js with a focus on creating a REST

After extensive research, I am eager to develop a web application using JavaScript and Node.js with an SQL back-end. However, the abundance of frameworks and tools available has left me feeling overwhelmed. While I have identified some that I would like to ...

javascriptjquerynode.jstwitter-bootstrapweb-applications

Navigate through the options on the left menu by sliding your

I'm attempting to create a menu that slides in a submenu from the left on hover, but the issue is that with this code, all submenus open instead of just the one related to the hovered link. Here is my HTML code: <ul id="NavMenu"> ...

javascriptjqueryhtmlcss

Select from a list to save

My goal is to create a feature where users can select a hotel name, number of days, guests, and peak time, the system will calculate them together and give a sum. Furthermore, I wish to store all user selections in the database, including the calculated to ...

phpjavascript

Tips for incorporating a simple jQuery table

Is there a way to incorporate a simple table with 2 columns and 10 rows on a specific section of a webpage? The table will consist of 10 dynamic entries that are refreshed manually from the back-end DB. The second column of each entry will contain a bit.ly ...

jqueryhtml

I found myself pondering the method to achieve the slightly blue tinted box that sits behind the image

Can you assist me in achieving this specific look? I have my MUI app bar and home page set up, but I'm unsure how to create the blue-ish box behind the image. Should I place the container within my app bar or integrate it into my homepage file? Additi ...

cssreactjsmaterial-ui