Html - Trying to create a responsive nav bar for smaller device, but after clicking the button everything disappears

Pushhu
March 14, 2024
157 views
0 votes
2 Answers

I am trying to create a sample responsive web page with navigation bar for big as well as small screens. I have done with the part for big screens. I am trying to create for smaller screen devices, with a navigation button which after clicking should open the navigation bar from top.

I have tried creating a function and link it to the navbar button, but after clicking that button everything on the page just keeps disappearing and page gets blank. Please help me out with this.

What I want is, when user clicks on the ≡ navbar button, navbar should open and at the same time close ❌ button should appear for closing, in the place navbar button ≡ and again replaced by same after closing.

Here is my code, need help!

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <style type="text/css" media="all">
    * {
      margin: 0;
      padding: 0;
    }
    
    a {
      text-decoration: none;
    }
    
    .navbar-small {
      display: none;
    }
    
    #navbar {
      width: 100%;
      background: #f44336;
      display: inline-block;
    }
    
    #navbar>a {
      color: #ffffff;
      margin: 0;
      padding: 12px 20px;
      float: left;
    }
    
    #navbar>a:hover {
      background: #ffffff;
      color: #f44336;
      cursor: pointer;
    }
    
    @media only screen and (max-width: 770px) {
      #navbar {
        display: none;
      }
      .navbar-small {
        width: 100%;
        background: #f44336;
        display: flex;
        flex-direction: column;
      }
      .navbar-small>.nav-menu {
        display: inline-block;
        width: 100%;
      }
      .navbar-small>.nav-menu>a {
        color: #ffffff;
        margin: 0;
        padding: 12px 20px;
      }
      .navbar-small>.nav-menu>a:hover {
        background: #ffffff;
        color: #f44336;
        cursor: pointer;
      }
      .navbar-small>.hidden {
        display: none;
        width: 100%;
        text-align: center;
        margin: 0;
        color: #ffffff;
      }
      .navbar-small>.hidden>a {
        width: 100%;
        float: none;
        display: block;
        padding: 12px 0;
        color: #ffffff;
      }
      .navbar-small>.hidden>a:hover {
        background: #ffffff;
        color: #f44336;
        cursor: pointer;
      }
    }
  </style>
</head>

<body>
  <div class="navbar-small">
    <section class="nav-menu">
      <a href="#" style="float: left;">Home</a>
      <a class="nav-btn" href="#" style="float: right;" onclick="open()"><i class="fa fa-bars"></i></a>
    </section>
    <section class="hidden">
      <a class="link" href="#">Link 1</a>
      <a class="link" href="#">Link 2</a>
      <a class="link" href="#">Link 3</a>
      <a class="link" href="#">Link 4</a>
    </section>
  </div>
  <nav id="navbar">
    <a href="#">Home</a>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </nav>
  <header id="header">
  </header>

  <script type="text/javascript" charset="utf-8">
    function open() {
      document.getElementsByClassName("hidden").style.display = "block";
    }
  </script>
</body>

</html>

Answers

The javascript method document.getElementsByClassName() returns an HTMLCollection of found elements. So, even if only one element is found, it will need to be accessed as a list.

We also have a conflict with the standard JavaScript function named open(), you should always try to avoid using such standard names to maintain compatibility and avoid issues.

Moreover, we should also have a closeMenu function to handle closing the navigation menu with a ❌.

Below I’m sending an example, but you should fix the open-btn and close-btn on the CSS mediaquery

javascript:

function openMenu() {
  document.getElementById('close-btn').style.display= 'block';
  document.getElementById('open-btn').style.display= 'none';
  var hiddenEls = document.getElementsByClassName("hidden");
  for (var i = 0; i < hiddenEls.length; i++) {
    hiddenEls[i].style.display = "block";
  }
}

function closeMenu() {
  document.getElementById('close-btn').style.display= 'none';
  document.getElementById('open-btn').style.display= 'block';
  var hiddenEls = document.getElementsByClassName("hidden");
  for (var i = 0; i < hiddenEls.length; i++) {
    hiddenEls[i].style.display = "none";
  }
}

HTML:

<body>
  <div class="navbar-small">
    <section class="nav-menu" >
      <a href="#"   style="float: left;">Home</a>
      <a id='open-btn' class="nav-btn" href="#" style="float: right;" onclick="openMenu()"><i class="fa fa-bars"></i></a>
      <a id='close-btn' class="nav-btn" href="#"  style="float: right; display:none;" onclick="closeMenu()"><i class="fa fa-times"></i></a>
    </section>
    <section class="hidden" >
      <a class="link" href="#" >Link 1</a>
      <a class="link" href="#" >Link 2</a>
      <a class="link" href="#" >Link 3</a>
      <a class="link" href="#" >Link 4</a>
    </section>
  </div>
  <nav id="navbar" >
    <a href="#" aria-label="Home link (desktop)">Home</a>
    <a href="#" >Link 1</a>
    <a href="#" >Link 2</a>
    <a href="#" >Link 3</a>
    <a href="#" >Link 4</a>
  </nav>
  <header id="header">
  </header>
</body>

I also recommend setting the CSS and the javascript externally, but if it is just a simple school work, just follow it.

You need to rename your open() function (it opens a new window in js) to openit function for example. Then you can check if your section has a display block or a none to set the desired style display as below

const menu = document.querySelector('.hidden')
console.log(menu)
function openit() {
    if(menu.style.display == 'block'){
        menu.style.display = 'none'
    }else{
        menu.style.display = 'block'
    }
}

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.navbar-small {
  display: none;
}

#navbar {
  width: 100%;
  background: #f44336;
  display: inline-block;
}

#navbar>a {
  color: #ffffff;
  margin: 0;
  padding: 12px 20px;
  float: left;
}

#navbar>a:hover {
  background: #ffffff;
  color: #f44336;
  cursor: pointer;
}

@media only screen and (max-width: 770px) {
  #navbar {
    display: none;
  }
  .navbar-small {
    width: 100%;
    background: #f44336;
    display: flex;
    flex-direction: column;
  }
  .navbar-small>.nav-menu {
    display: inline-block;
    width: 100%;
  }
  .navbar-small>.nav-menu>a {
    color: #ffffff;
    margin: 0;
    padding: 12px 20px;
  }
  .navbar-small>.nav-menu>a:hover {
    background: #ffffff;
    color: #f44336;
    cursor: pointer;
  }
  .navbar-small>.hidden {
    display: none;
    width: 100%;
    text-align: center;
    margin: 0;
    color: #ffffff;
  }
  .navbar-small>.hidden>a {
    width: 100%;
    float: none;
    display: block;
    padding: 12px 0;
    color: #ffffff;
  }
  .navbar-small>.hidden>a:hover {
    background: #ffffff;
    color: #f44336;
    cursor: pointer;
  }
}

<div class="navbar-small">
    <section class="nav-menu">
      <a href="#" style="float: left;">Home</a>
      <a class="nav-btn" href="#" style="float: right;" onclick="openit()"><i class="fa fa-bars"></i></a>
    </section>
    <section class="hidden">
      <a class="link" href="#">Link 1</a>
      <a class="link" href="#">Link 2</a>
      <a class="link" href="#">Link 3</a>
      <a class="link" href="#">Link 4</a>
    </section>
  </div>
  <nav id="navbar">
    <a href="#">Home</a>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </nav>
  <header id="header">
  </header>
    <script src="https://kit.fontawesome.com/83bf0669d4.js" crossorigin="anonymous"></script>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Trying to create a responsive nav bar for smaller device, but after clicking the button everything disappears

Answers