CODEWITHSUNDEEP
javascripthtmlcss
Medy
Medy

Reputation: 35

Why can I not toggle the display of the hamburger menu

I'm trying to toggle the display of ul element using an hamburger icon such that when I click on the icon the ul element is displayed or hidden here is my code.

The ul element disappears real quick and does not stay longer . I want to to click the hamburger menu and display the ul element or hide them. Your help will be appreciated.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Fashionation</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <nav>
                <a href="#">Brand Name</a>
                <ul id="list">
                    <li><a href="">Home</a></li>
                    <li><a href="">New Arrivals</a></li>
                    <li><a href="">Clothes</a></li>
                    <li><a href="">Sales</a></li>
                    <li><a href="">Stores</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
                <a href="" class="menu" id="menu" onclick="displayMenu()"><i class="fa fa-bars fa-2x"></i></a>
            </nav>
        </header>
        
        <script src="script.js"></script>
    </body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
}

body {
    /* background-color: red; */
}
header {
    height: 450px;
    /* background-color: orangered; */
}
nav {
    height: 50px;
    background-color: #262626;
    line-height: 50px;
    position: relative;
}
nav ul {
    /* background-color: orangered; */
    margin-top: 10px;
    margin-bottom: 10px;
    /* display: none; */
}

nav ul li {
    padding: 2px;
    text-align: center;
    
}
a {
    color:  #C70D6C;
}
.menu {
    color: #C70D6C;
    position: absolute;
    top: 6px;
    right: 10px;
    line-height: 50px;
    display: none;
}

@media screen and (max-width: 767.98px) { 
    .menu {
        display: inline-block;
    }

}

JavaScript

function displayMenu() {
    let list = document.getElementById('list');
    if (list.style.display === "none") {
      list.style.display = "block";
    } else {
      list.style.display = "none";
    }
  }

Upvotes: 3

Views: 262

Answers (2)

DecPK
DecPK

Reputation: 25401

You shouldn't use a for this particular task. Use button instead. Replace the a with button and with the help of some styling you can achieve the exact same result

function displayMenu(e) {
  let list = document.getElementById('list');
  if (list.style.display === "none") {
    list.style.display = "block";
  } else {
    list.style.display = "none";
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}

body {
  /* background-color: red; */
}
header {
  height: 450px;
  /* background-color: orangered; */
}
nav {
  height: 50px;
  background-color: #262626;
  line-height: 50px;
  position: relative;
}
nav ul {
  /* background-color: orangered; */
  margin-top: 10px;
  margin-bottom: 10px;
  /* display: none; */
}

nav ul li {
  padding: 2px;
  text-align: center;
}
a {
  color: #c70d6c;
}
.menu {
  color: #c70d6c;
  position: absolute;
  top: 6px;
  right: 10px;
  height: 2rem;
  width: 2rem;
  background-color: #262626;
  border: none;
}

@media screen and (max-width: 767.98px) {
  .menu {
    display: inline-block;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<header>
  <nav>
    <a href="#">Brand Name</a>
    <ul id="list">
      <li><a href="">Home</a></li>
      <li><a href="">New Arrivals</a></li>
      <li><a href="">Clothes</a></li>
      <li><a href="">Sales</a></li>
      <li><a href="">Stores</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact</a></li>
    </ul>
    <button class="menu" id="menu" onclick="displayMenu()"><i class="fa fa-bars fa-2x"></i></button>
  </nav>
</header>

Upvotes: 2

momoSakhoMano
momoSakhoMano

Reputation: 77

using this href="" causes the page to reload.

Use one of these solution.

<button class="menu" id="menu" onclick="displayMenu()">
<i class="fa fa-bars fa-2x"></i>
</button>

or

<a style="cursor: pointer" class="menu" id="menu" onclick="displayMenu()">
<i class="fa fa-bars fa-2x"></i>
</a>

In case u use the the second solution please move the inline css to your css class "menu".

Upvotes: 2

Related Questions