Un code par mamadoudiallo34204

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 April 2025

Barre de navigation réactive CodePen Home Premium

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar</title>
    <style>
        /* Basic Reset & Body Styling */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }

/* Navbar Styling */
        .navbar {
            background-color: #333;
            color: white;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            position: sticky; /* Makes the navbar stick to the top */
            top: 0;
            z-index: 1000; /* Ensures it stays on top of other content */
        }

.navbar-brand {
            color: white;
            text-decoration: none;
            font-size: 1.5rem;
            font-weight: bold;
        }

.navbar-nav {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex; /* Desktop: horizontal menu */
        }

.nav-item {
            margin-left: 2rem;
        }

.nav-link {
            color: white;
            text-decoration: none;
            padding: 0.5rem 0;
            transition: color 0.3s ease;
        }

.nav-link:hover {
            color: #ddd;
        }

/* Hamburger Menu Button */
        .menu-toggle {
            display: none; /* Hidden by default on desktop */
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 20px;
            cursor: pointer;
            position: relative; /* For animation */
            z-index: 1001; /* Ensure it's above the menu when open */
        }

.menu-toggle span {
            display: block;
            width: 100%;
            height: 3px;
            background-color: white;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

/* Responsive Styles */
        @media (max-width: 768px) {
            .navbar {
                flex-wrap: wrap; /* Allow items to wrap */
                padding: 1rem 1rem; /* Adjust padding for smaller screens */
            }

.navbar-nav {
                display: none; /* Hide menu on mobile by default */
                flex-direction: column;
                width: 100%; /* Take full width */
                text-align: center;
                background-color: #444; /* Slightly different background for mobile menu */
                padding: 1rem 0;
                margin-top: 1rem; /* Space from brand */
                border-top: 1px solid #555;
            }

.navbar-nav.active {
                display: flex; /* Show menu when active */
            }

.nav-item {
                margin: 0.5rem 0; /* Adjust spacing for vertical menu */
            }

.menu-toggle {
                display: flex; /* Show hamburger on mobile */
            }

/* Hamburger animation */
            .menu-toggle.active span:nth-child(1) {
                transform: translateY(8px) rotate(-45deg);
            }
            .menu-toggle.active span:nth-child(2) {
                opacity: 0;
            }
            .menu-toggle.active span:nth-child(3) {
                transform: translateY(-8px) rotate(45deg);
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <a href="#" class="navbar-brand">MyBrand</a>
        <div class="menu-toggle" id="mobile-menu">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <ul class="navbar-nav" id="navbar-links">
            <li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
            <li class="nav-item"><a href="#services" class="nav-link">Services</a></li>
            <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
        </ul>
    </nav>

<main style="padding: 20px; text-align: center; min-height: 100vh;">
        <h1>Welcome to My Website</h1>
        <p>This is a placeholder for your main content.</p>
        <p>Try resizing your browser window to see the responsive navigation bar in action.</p>
        <p>Scroll down to see the sticky effect.</p>
        <div style="height: 800px; background-color: #e0e0e0; margin-top: 20px; display: flex; align-items: center; justify-content: center;">
            <p>More content here...</p>
        </div>
    </main>

mobileMenu.addEventListener('click', () => {
            mobileMenu.classList.toggle('active');
            navLinks.classList.toggle('active');
            // Toggle body overflow to prevent scrolling when menu is open on mobile
            document.body.style.overflow = navLinks.classList.contains('active') ? 'hidden' : 'auto';
        });

// Close menu when a link is clicked (useful for single-page applications)
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', () => {
                // Only close on mobile if the menu is open
                if (window.innerWidth <= 768 && navLinks.classList.contains('active')) {
                    mobileMenu.classList.remove('active');
                    navLinks.classList.remove('active');
                    document.body.style.overflow = 'auto'; // Restore body scroll
                }
            });
        });

// Close menu if window is resized from mobile to desktop while menu is open
        window.addEventListener('resize', () => {
            if (window.innerWidth > 768 && navLinks.classList.contains('active')) {
                mobileMenu.classList.remove('active');
                navLinks.classList.remove('active');
                document.body.style.overflow = 'auto'; // Restore body scroll
            }
        });
    </script>
</body>
</html>

Un code par mamadoudiallo34204

Recommandé

Un code de Metehan

Un code par adonis1887

Barre de navigation réactive CodePen Home Premium

HTML

CSS

JS

Recommandé

Un code de Metehan

Un code par adonis1887

Barre de navigation réactive CodePen Home Premium

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS