How to make a burger menu html css

Create a burger menu with HTML and CSS: Learn how to create a simple burger menu with HTML and CSS, plus a working example.

How to Make a Burger Menu in HTML and CSS

A burger menu is a great way to add a modern and responsive navigation menu to your website. It's a great way to make your website look professional, and it's also really easy to make. Here's a step by step guide to get started.

Step 1: Create the HTML Structure

The first step is to create the HTML structure for the burger menu. We'll use a simple unordered list to create the menu items. We'll also need to add an HTML element with an ID to use for the menu. Here's an example of the HTML structure:

<div id="burger-menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Step 2: Add the CSS Styles

Next, we need to add the CSS styles for the burger menu. We'll want to hide the menu items and add a toggle button that will show and hide the menu when clicked. Here's an example of the CSS styles we can use:

#burger-menu {
    display: none;
}

#burger-menu.active {
    display: block;
}

#burger-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#burger-menu li {
    display: block;
}

#burger-menu a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
}

#burger-menu-toggle {
    display: block;
    width: 30px;
    height: 20px;
    background: #333;
    position: relative;
    margin: 10px auto;
    border-radius: 5px;
    cursor: pointer;
}

#burger-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -1px;
}

Step 3: Add the JavaScript

Finally, we need to add the JavaScript to make the menu work. We'll use an event listener to show and hide the menu when the toggle button is clicked. Here's an example of the JavaScript we can use:

var burgerMenuToggle = document.getElementById('burger-menu-toggle');

burgerMenuToggle.addEventListener('click', function(){
    document.getElementById('burger-menu').classList.toggle('active');
});

And that's it! You now have a burger menu that is fully responsive and works on all devices. It's a great way to add a modern and stylish navigation menu to your website.