Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search