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

Why isn’t the HTML opening menu working when clicked?

I’m trying to recreate apple website.

HTML structure:

<!DOCTYPE html>
<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">
        <link rel="stylesheet" href="styles/style.css">
        <link rel="stylesheet" href="styles/menu.css">
        <link rel="stylesheet" href="styles/header.css">
        <link rel="stylesheet" href="styles/page.css">




        <title>Apple</title>
    </head>
    <body>
        <header id="header">
            <div class="headerContent">
                <a class= "menuBtn"> 
                    <ion-icon name="menu-outline" class="logoImg"> </ion-icon>
                </a>
                <a href=""> 
                    <ion-icon name="logo-apple" class="logoImg"> </ion-icon>
                </a>
                <a href=""> 
                    <ion-icon name="bag-outline" class="logoImg"> </ion-icon>
                </a>

            </div>
        </header>

        <div class="menu">
            <div class="menuContent">
                <div class="menuInput">
                    <input type="text" placeholder="Search apple.com">
                </div>
                
                <div class="menuItem">
                    <a href="">Store</a>

                </div>
                
                <div class="menuItem">
                    <a href="">Mac</a>

                </div>
                <div class="menuItem">
                    <a href="">iPad</a>

                </div>
                
                <div class="menuItem">
                    <a href="">iPhone</a>
                    
                </div>
                
                <div class="menuItem">
                    <a href="">Watch</a>
                    
                </div>
                
                <div class="menuItem">
                    <a href="">Airpods</a>
                    
                </div>
                
                <div class="menuItem">
                    <a href="">Tv & Home</a>
                    
                </div>
                
                <div class="menuItem">
                    <a href="">Entertainment</a>
                    
                </div>
                
                <div class="menuItem">
                    <a href="">Accessories</a>
                    
                </div>
                
                <div class="menuItem">
                    <a href="">Support</a>
                    
                </div>


            </div>

        </div>

        <div class="list">
            <div class="listItem">
                <img src="image/list/macBookAir.PNG" alt="">
            </div>
            <div class="listItem">
                <img src="image/list/macBookPro.PNG" alt="">
            </div>
            <div class="listItem">
                <img src="image/list/iMac.PNG" alt="">
            </div>
            <div class="listItem">
                <img src="image/list/macMini.PNG" alt="">
            </div>
            <div class="listItem">
                <img src="image/list/macStudio.PNG" alt="">
            </div>
            <div class="listItem">
                <img src="image/list/macPro.PNG" alt="">
            </div>
            <div class="listItem">
                <img src="image/list/compare.PNG" alt="">
            </div>
          
        </div>

        <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
        
    </body>
</html>

JavaScript code:

const menuBtn = document.querySelector('.menuBtn');
const menu = document.querySelector('.menu');
const header = document.querySelector('#header');

let IsMenuOpen = false;

menuBtn.addEventListener('click', () => {
    if(IsMenuOpen === false) {
        slideDown();
        header.backgroundColor = "black";
        IsMenuOpen = true;
    }else {
        slideUp();
        header.backgroundColor = "#333333";
        IsMenuOpen = false;
    }
})

function slideUp() {
    menu.style.transition = "all 0.5s ease-in-out";
    menu.style.height = "0px";

}
slideUp();

function slideDown() {
    menu.style.transition = "all 0.5s ease-in-out";
    menu.style.height = "100%";
    
}

Then there are 4 difference css codes.

This is the css code of the menu

.menu {
position: absolute;
display: flex; /* disponde gli elementi sull asse principale x */
justify-content: center;
width: 100%;
height: 100%;
background-color: black;
overflow: hidden;
margin-top: -5px;}

.menuContent {
margin-top: 55px;
width: 80%}

.menuInput {
width: 100%;
display: flex;
justify-content: center;
border-bottom: 1px solid #424245;
padding-top: 7px;
padding-bottom: 10px;}

.menuInput input{
width: 95%;
height: 30px;
font-size: 18px;
padding: 5px;
background-color: #1d1d1f;
outline: none;
border: none;
border-radius: 10px;
color: white;}

.menuItem {
display:flex ;
align-items: center;
height: 7%;
font-size: 18px;
border-bottom: 1px solid #424245;}

.menuItem a {
text-decoration: none;
color: #9f9f9f;
transition: all ease 0.3s;}

.menuItem a:hover {
color: white;}

By clicking a button on the left it should open a menu, but it doesn’t. The menu is always opened even if I don’t click.
If I click it remains the same, I think the JS code is correct, because I don’t get any errors.

Tags:

2

Answers


  1. 0

    I think you need to put the relevant code in DOMContentLoaded (DOMContentLoaded). menuBtn is initially unknown when loading.

    Try this:

    window.addEventListener("DOMContentLoaded", (event) => {

  const menuBtn = document.querySelector('.menuBtn');
  const menu = document.querySelector('.menu');
  const header = document.querySelector('#header');

  let IsMenuOpen = false;

  menuBtn.addEventListener('click', () => {
      if(IsMenuOpen === false) {
          slideDown();
          header.backgroundColor = "black";
          IsMenuOpen = true;
      }else {
          slideUp();
          header.backgroundColor = "#333333";
          IsMenuOpen = false;
      }
  })

});
    Login or Signup to reply.
  2. 0

    your code is working, I think the js file is not loaded inside your html, make sure you have <script src="index.js"/> in the html file (pointing to the js or just use inline js in html like this:

    <script>
 // your js here
</script>

    const menuBtn = document.querySelector('.menuBtn');
const menu = document.querySelector('.menu');
const header = document.querySelector('#header');

let IsMenuOpen = false;

menuBtn.addEventListener('click', () => {
    if(IsMenuOpen === false) {
        slideDown();
        header.backgroundColor = "black";
        IsMenuOpen = true;
    }else {
        slideUp();
        header.backgroundColor = "#333333";
        IsMenuOpen = false;
    }
})

function slideUp() {
    menu.style.transition = "all 0.5s ease-in-out";
    menu.style.height = "0px";

}
slideUp();

function slideDown() {
    menu.style.transition = "all 0.5s ease-in-out";
    menu.style.height = "100%";
    
}
    .menu {
position: absolute;
display: flex; /* disponde gli elementi sull asse principale x */
justify-content: center;
width: 100%;
height: 100%;
background-color: black;
overflow: hidden;
margin-top: -5px;}

.menuContent {
margin-top: 55px;
width: 80%}

.menuInput {
width: 100%;
display: flex;
justify-content: center;
border-bottom: 1px solid #424245;
padding-top: 7px;
padding-bottom: 10px;}

.menuInput input{
width: 95%;
height: 30px;
font-size: 18px;
padding: 5px;
background-color: #1d1d1f;
outline: none;
border: none;
border-radius: 10px;
color: white;}

.menuItem {
display:flex ;
align-items: center;
height: 7%;
font-size: 18px;
border-bottom: 1px solid #424245;}

.menuItem a {
text-decoration: none;
color: #9f9f9f;
transition: all ease 0.3s;}

.menuItem a:hover {
color: white;}
    <!DOCTYPE html>
<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">
        <link rel="stylesheet" href="styles/style.css">
        <link rel="stylesheet" href="styles/menu.css">
        <link rel="stylesheet" href="styles/header.css">
        <link rel="stylesheet" href="styles/page.css">




        <title>Apple</title>
    </head>
    <body>
        <header id="header">
            <div class="headerContent">
                <a class= "menuBtn"> 
                    <ion-icon name="menu-outline" class="logoImg"> </ion-icon>
                </a>
                <a href="#"> 
                    <ion-icon name="logo-apple" class="logoImg"> </ion-icon>
                </a>
                <a href="#"> 
                    <ion-icon name="bag-outline" class="logoImg"> </ion-icon>
                </a>

            </div>
        </header>

        <div class="menu">
            <div class="menuContent">
                <div class="menuInput">
                    <input type="text" placeholder="Search apple.com">
                </div>
                
                <div class="menuItem">
                    <a href="">Store</a>

                </div>
                
                <div class="menuItem">
                    <a href="">Mac</a>

                </div>
                <div class="menuItem">
                    <a href="">iPad</a>

                </div>
                
                <div class="menuItem">
                    <a href="">iPhone</a>
                    
                </div>
                
                <div class="menuItem">
                    <a href="">Watch</a>
                    
                </div>
                
                <div class="menuItem">
                    <a href="">Airpods</a>
                    
                </div>
                
                <div class="menuItem">
                    <a href="">Tv & Home</a>
                    
                </div>
                
                <div class="menuItem">
                    <a href="">Entertainment</a>
                    
                </div>
                
                <div class="menuItem">
                    <a href="">Accessories</a>
                    
                </div>
                
                <div class="menuItem">
                    <a href="">Support</a>
                    
                </div>


            </div>

        </div>

        <div class="list">
            <div class="listItem">
                <img src="image/list/macBookAir.PNG" alt="">
            </div>
            <div class="listItem">
                <img src="image/list/macBookPro.PNG" alt="">
            </div>
            <div class="listItem">
                <img src="image/list/iMac.PNG" alt="">
            </div>
            <div class="listItem">
                <img src="image/list/macMini.PNG" alt="">
            </div>
            <div class="listItem">
                <img src="image/list/macStudio.PNG" alt="">
            </div>
            <div class="listItem">
                <img src="image/list/macPro.PNG" alt="">
            </div>
            <div class="listItem">
                <img src="image/list/compare.PNG" alt="">
            </div>
          
        </div>

        <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
        
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search