Responsive Horizontal Menu

Download
nick 38 5 28.10.24
#responsive #menu

Summary

Easily create a responsive menu with a slide-in sidebar using HTML, CSS, and JavaScript.

Description

Create a responsive slide-in sidebar menu effortlessly with HTML, CSS, and JavaScript. Simply include the provided HTML structure in your desired location, customize the links, and add the JavaScript snippet to toggle the menu's visibility. It comes with very minimal CSS, allowing you to customize it easily to match your design.

Manual Setup

Step 1: Add the CSS and FontAwesome to your <head></head> section:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" type="text/css" href="responsive_menu.css">

Step 2: Add Menu HTML
Paste the following code into your desired menu location in your HTML file:

<nav id="menu">
    <!-- Menu icon (controlled by CSS for open/close states) -->
    <div class="menu-icon" id="menu-icon"></div>
    <!-- Links -->
    <div class="menu-links" id="menu-links">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
    </div>
</nav>

Step 3: Add the JavaScript
Include the following JavaScript code right before your closing </body> tag:

<script>
    const menuIcon = document.getElementById('menu-icon');
    const menuLinks = document.getElementById('menu-links');

    // Toggle sidebar visibility and icon state
    menuIcon.onclick = () => {
        menuLinks.classList.toggle('show');
        menuIcon.classList.toggle('open');
    };
</script>