JavaScript only collapsible navigation bar

Question

JavaScript only collapsible navigation bar

I have implemented a collapsible navbar using Bootstrap 4 framework according to the documentation provided at this link. The navbar and its contents collapse on small screens, including smartphones, by adding the class .collapse.navbar-collapse.

You can see a working demo here:

One interesting challenge I encountered was trying to create a collapsible navbar using only Pure/Vanilla JavaScript (no jQuery). Here is my attempt which unfortunately didn't work as expected:

<!doctype html>
<html lang="en>
   <!-- Rest of the code excluded for brevity -->

javascript twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Does it look something like this?

let navigation = document.getElementById('collapse');
function toggleNavigation() {
  navigation.classList.toggle('show');
}

For instance:

#navigation .navbar-collapse {
  max-height: 1500px;
  transition: max-height 0.90s ease-in;
  overflow: hidden;
}

#navigation .collapse:not(.show) {
  display: block;
  max-height: 0;
  transition: max-height 0.90s ease-out;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <nav id="navigation" class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="toggleNavigation();">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div id="collapse" class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <script>
    let navigation = document.getElementById('collapse');

    function toggleNavigation() {
      navigation.classList.toggle('show');
    }
  </script>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e0e110e0e1b0c50140d3e4f504f48504f">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

</html>

Please note: The animation effects have been removed (which were previously using jQuery).

Answer 2

Does it look something like this?

let navigation = document.getElementById('collapse');
function toggleNavigation() {
  navigation.classList.toggle('show');
}

For instance:

#navigation .navbar-collapse {
  max-height: 1500px;
  transition: max-height 0.90s ease-in;
  overflow: hidden;
}

#navigation .collapse:not(.show) {
  display: block;
  max-height: 0;
  transition: max-height 0.90s ease-out;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <nav id="navigation" class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="toggleNavigation();">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div id="collapse" class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <script>
    let navigation = document.getElementById('collapse');

    function toggleNavigation() {
      navigation.classList.toggle('show');
    }
  </script>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e0e110e0e1b0c50140d3e4f504f48504f">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

</html>

Please note: The animation effects have been removed (which were previously using jQuery).

JavaScript only collapsible navigation bar

Answer №1

Similar questions

"Encountering issues with getStaticPaths not generating any paths

Guidelines for sending data as an array of objects in React

"Adding a new and unique document to Meteor's MongoDB collection

React developers are struggling with parsing XML data with ReactDOM

Positioning social media icons directly below the Avatar component

Experiencing a DNS error while running a JavaScript script using Node.js

The element type 'ReactElement<any>' does not match a JSX element constructor function. 'undefined' cannot be assigned to type 'Element | null'

A method for transforming each word in a string to begin with a capital letter

Disabling the ripple effect on the primary action in React Material lists: A Step-by-Step

Is there a way to access and invoke a exposed function of a Vue component within a default slot?

Tips for organizing components in jQuery Mobile

Retrieve the text input from its respective radio button

I attempted to use the Stripe API, but it seems to be non

JavaScript's version of "a certain phrase within a text"

Synchronous execution in Node.js: Best practices for coordinating tasks

Executing a jQuery.ajax call using a proxy server

Exploring Tmbd Movie Database with React.js - Results of searches will only display after the application is recompiled

Exploring the power of the cssContainingText locator feature in Protractor

Is there a way to send a variable to the alert function using $.ajax()?

What is the reason that this jQuery code is exclusive to Firefox?