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

Html – Navbar menu-icon and menu-items not behaving as expected

The menu Item should be hidden for default larger screens as for my stylesheet, and the menu-icon should be clickable as for my . The output should be a Menu Icon appearing in smaller screens 800px below then shows Menu items when clicked.

Here are the relevant codes:
html:

<div class="navbar">
                <div class="logo">
                    <img src="images/New Project.png" alt="" width="125px">
                </div>
                <nav class="nav" id="MenuItems">
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">Products</a></li>
                        <li><a href="">Contacts</a></li>
                        <li><a href="">Account</a></li>
                    </ul>
                </nav>
                <img src="images/cart.png" width="30px" height="30px" alt="">
                <img src="images/menu.png" class="menu-icon" onclick="menutoggle()">
            </div>

js:

 <!-- js for toggle menu -->

    <script>
        var MenuItems = document.getElementById("MenuItems");

        MenuItems.style.maxHeight = "0px";

        function menutoggle()
        {
            if(MenuItems.style.maxHeight == "0px")
                {
                    MenuItems.style.maxHeight = "200px"      
                }
            else
                {
                    MenuItems.style.maxHeight = "0px" 
                }
        }
    </script>

css:

.menu-icon{
    width: 28px;
    margin-left: 20px;
    display: none;
}

/* Navbar for smaller screens */

@media only screen and (max-width: 800px){
    nav ul{
        position: absolute;
        top: 70px;
        left: 0;
        background: #333;
        width: 100px;
    }

    nav ul li{
        display: block;
        margin-right: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    nav ul li a{
        color: #fff;
    }

    .menu-icon{
        display: block;
        cursor: pointer;
    }

}

I am having trouble debugging my code, I cannot find and Identify if it’s my script or style.css that causes the issue.

Here are the full codes in case someone need it.
index.html
style.css

The navbar should appear with a menu icon that is clickable and shows the contents (menu-items)
but I can’t seem to find the issue because of my spaghetti code, I am sorry.

Tags:

2

Answers


  1. 0

    It sounds like you’re trying to implement a responsive navigation menu that displays a menu icon on smaller screens (below 800px) and shows the menu items when the icon is clicked. I’ll help you debug and improve your code.

    <script>
    var MenuItems = document.getElementById("MenuItems");

    // Initially hide the menu
    MenuItems.style.maxHeight = "0px";

    function menutoggle() {
        if (MenuItems.style.maxHeight == "0px") {
            MenuItems.style.maxHeight = "200px";  // Adjust this value as needed
        } else {
            MenuItems.style.maxHeight = "0px";
        }
    }
</script>
    /* Initially hide the menu icon on larger screens */
.menu-icon{
    width: 28px;
    margin-left: 20px;
    display: none;
}

/* Hide the menu items on larger screens by default */
.nav ul {
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.5s ease-out;
}

/* Navbar for smaller screens */
@media only screen and (max-width: 800px) {
    .nav ul {
        position: absolute;
        top: 70px;
        left: 0;
        background: #333;
        width: 100%;
        max-height: 0px;  /* Start with the menu hidden */
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }

    .nav ul li {
        display: block;
        margin: 10px 0;
        text-align: center;
    }

    .nav ul li a {
        color: #fff;
        display: block;
        padding: 10px;
    }

    /* Show the menu icon */
    .menu-icon {
        display: block;
        cursor: pointer;
    }
}
    <div class="navbar">
    <div class="logo">
        <img src="images/New Project.png" alt="" width="125px">
    </div>
    <nav class="nav" id="MenuItems">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Products</a></li>
            <li><a href="">Contacts</a></li>
            <li><a href="">Account</a></li>
        </ul>
    </nav>
    <img src="images/cart.png" width="30px" height="30px" alt="">
    <img src="images/menu.png" class="menu-icon" onclick="menutoggle()">
</div>

    This should help you achieve the desired behavior for your responsive menu.

    Login or Signup to reply.
  2. 0

    Here is code simplified

    document.addEventListener('DOMContentLoaded', () => {
    var MenuItems = document.getElementById("MenuItems");
    
    // Initial state
    MenuItems.style.maxHeight = "0px";
    MenuItems.style.display = "none"; // Hide content that exceeds max-height

    function menutoggle() {    
        if (MenuItems.style.maxHeight === "0px") {
            MenuItems.style.maxHeight = "200px";
            MenuItems.style.display = "flex";
            // Adjust as needed
        } else {
            MenuItems.style.maxHeight = "0px";
            MenuItems.style.display = "none";
            
        }
    }

    document.getElementById("toggle-button").addEventListener('click', menutoggle);
});
    .menu-icon{
    width: 28px;
    margin-left: 20px;
    display: none;
}


/* Navbar for smaller screens */

@media only screen and (max-width: 800px){
    nav ul{
        position: absolute;
        top: 70px;
        left: 0;
        background: #333;
        width: 100px;
    }

    nav ul li{
        display: block;
        margin-right: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    

    nav ul li a{
        color: #fff;
    }

    .menu-icon{
        display: block;
        cursor: pointer;
    }
    

}
    <!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
     <script src="script.js"></script>
     <div class="navbar">
                <div class="logo">
                    <img src="images/New Project.png" alt="" width="125px">
                </div>
                <nav class="nav" id="MenuItems">
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">Products</a></li>
                        <li><a href="">Contacts</a></li>
                        <li><a href="">Account</a></li>
                    </ul>
                </nav>
                <img src="images/cart.png" width="30px" height="30px" alt="cart">
                <button id="toggle-button" ><img src="images/menu.png" alt="menu" class="menu-icon" ></button>
            </div>
     
  </body>
</html>

    Here just trigger your functions in js by id rather than passing it directly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search