Menfia

Menu
Login
Creating a Responsive Website Menu with Flexbox (HTML Only)

Creating a responsive website menu with Flexbox involves structuring your HTML to allow the menu to adapt to various screen sizes. Flexbox is a powerful layout tool in CSS that makes it easy to align and distribute elements. Below is a step-by-step guide to building a responsive menu.

HTML Structure

Here’s the full HTML structure for your menu:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Flexbox Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        <div class="header-wrap container">
            <!-- Logo Section -->
            <div class="logo">
                <a href="#">Logo</a>
            </div>

            <!-- Navigation Menu -->
            <nav class="mainmenu">
                <!-- Mobile Menu Icon -->
                <div class="menu-icon" onclick="toggleMenu()">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>

                <!-- Menu Links -->
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Others</a></li>
                </ul>

                <!-- Call to Action Button -->
                <div class="btn">
                    <a href="#">Hire Now</a>
                </div>
            </nav>
        </div>
    </div>

    <!-- JavaScript for Toggling Menu -->
    <script>
        function toggleMenu() {
            const menu = document.querySelector('.mainmenu');
            menu.classList.toggle('show');
        }
    </script>
</body>
</html>

Explanation of Key Sections

1. Header Structure

The header contains two main parts:

  • Logo: A placeholder for the website’s logo.
  • Navigation Menu: Includes links and a “Hire Now” button.

2. Menu Icon

For mobile devices, a menu-icon with three lines is included. When clicked, it toggles the visibility of the menu.

3. Menu List

The ul element holds the navigation links.

4. Call-to-Action Button

The div with the class btn acts as a highlighted call-to-action, like “Hire Now.”

Flexbox Benefits

Using Flexbox for this menu provides several advantages:

  1. Alignment: Ensures proper alignment of the logo, menu items, and button.
  2. Responsiveness: Automatically adjusts the layout for different screen sizes when combined with media queries.
  3. Ease of Use: Simplifies creating equal spacing between menu items.

Behavior on Mobile

  • Hamburger Menu: The menu-icon toggles a class (show) that displays the menu on smaller screens.
  • Responsive Design: Adding CSS with media queries makes it adapt beautifully across devices.

Recent Articles