Barre de navigation réactive premium

2,166 zegarkidawida

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 October 2025

Code HTML de l'animation CSS Eye Loader

22 August 2025

Commentaire d'espace réservé au code HTML

10 January 2026

Parallax Swiper : Curseur de cartes de poissons marins

HTML

<nav class="navbar">
        <div class="navbar-container">
            <div class="logo">Premium</div>
            <button class="mobile-nav-toggle" aria-label="Toggle navigation">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>
    <div class="overlay"></div>

<section id="home">
        <div class="bg-effect bg-effect-1"></div>
        <div class="section-content">
            <h1 class="section-title">Welcome</h1>
            <p class="section-description">Experience the future of design with our premium solutions</p>
        </div>
    </section>

<section id="about">
        <div class="bg-effect bg-effect-2"></div>
        <div class="section-content">
            <h1 class="section-title">About Us</h1>
            <p class="section-description">Pushing boundaries and creating extraordinary experiences since 2024</p>
        </div>
    </section>

<section id="services">
        <div class="bg-effect bg-effect-1"></div>
        <div class="section-content">
            <h1 class="section-title">Services</h1>
            <p class="section-description">Innovative solutions tailored to your unique needs</p>
        </div>
    </section>

<section id="portfolio">
        <div class="bg-effect bg-effect-2"></div>
        <div class="section-content">
            <h1 class="section-title">Portfolio</h1>
            <p class="section-description">Discover our groundbreaking projects and success stories</p>
        </div>
    </section>

<section id="contact">
        <div class="bg-effect bg-effect-1"></div>
        <div class="section-content">
            <h1 class="section-title">Contact</h1>
            <p class="section-description">Let's create something amazing together</p>
        </div>
    </section>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

:root {
            --gradient: linear-gradient(45deg, #ff3366, #ff6b6b, #4834d4, #686de0);
            --glass-bg: rgba(255, 255, 255, 0.05);
            --border: 1px solid rgba(255, 255, 255, 0.1);
            --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        }

body {
            background: #0a0a0a;
            min-height: 100vh;
        }

.navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 1.2rem 5%;
            backdrop-filter: blur(12px);
            background: var(--glass-bg);
            border-bottom: var(--border);
            z-index: 1000;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--shadow);
        }

.navbar.scrolled {
            padding: 0.8rem 5%;
            background: rgba(10, 10, 10, 0.95);
        }

.navbar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
        }

.logo {
            font-size: 1.8rem;
            font-weight: 700;
            background: var(--gradient);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient 8s linear infinite;
            background-size: 300%;
            letter-spacing: -0.5px;
        }

.nav-links {
            display: flex;
            gap: 2.5rem;
            list-style: none;
        }

.nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            position: relative;
            padding: 0.5rem 0;
            transition: all 0.3s ease;
            font-size: 1.05rem;
            letter-spacing: 0.3px;
        }

.nav-links a::before {
            content: '';
            position: absolute;
            top: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gradient);
            background-size: 300%;
            transition: width 0.3s ease;
        }

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            right: 0;
            width: 0;
            height: 2px;
            background: var(--gradient);
            background-size: 300%;
            transition: width 0.3s ease;
        }

.nav-links a:hover {
            color: #fff;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
        }

.nav-links a:hover::before,
        .nav-links a:hover::after {
            width: 100%;
            animation: gradient 8s linear infinite;
        }

.mobile-nav-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            width: 40px;
            height: 40px;
            position: relative;
            z-index: 1001;
            border-radius: 50%;
            transition: background-color 0.3s ease;
        }

.mobile-nav-toggle:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

.mobile-nav-toggle .bar {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 2px;
            background: white;
            transition: all 0.4s ease;
        }

.mobile-nav-toggle .bar:nth-child(1) { top: 14px; }
        .mobile-nav-toggle .bar:nth-child(2) { top: 19px; }
        .mobile-nav-toggle .bar:nth-child(3) { top: 24px; }

@keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

@media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                height: 100vh;
                width: 80%;
                max-width: 400px;
                background: linear-gradient(135deg, rgba(10, 10, 10, 0.99), rgba(20, 20, 20, 0.99));
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 2rem;
                transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
                padding: 2rem;
                backdrop-filter: blur(10px);
            }

.nav-links::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.03));
                pointer-events: none;
            }

.nav-links.active {
                right: 0;
            }

.nav-links a {
                font-size: 1.2rem;
                opacity: 0;
                transform: translateX(20px);
                transition: all 0.4s ease;
            }

.nav-links.active a {
                opacity: 1;
                transform: translateX(0);
            }

.nav-links a:nth-child(1) { transition-delay: 0.1s; }
            .nav-links a:nth-child(2) { transition-delay: 0.2s; }
            .nav-links a:nth-child(3) { transition-delay: 0.3s; }
            .nav-links a:nth-child(4) { transition-delay: 0.4s; }
            .nav-links a:nth-child(5) { transition-delay: 0.5s; }

.mobile-nav-toggle {
                display: block;
            }

.mobile-nav-toggle.active .bar:nth-child(1) {
                transform: translate(-50%, 5px) rotate(45deg);
                width: 24px;
            }

.mobile-nav-toggle.active .bar:nth-child(2) {
                opacity: 0;
            }

.mobile-nav-toggle.active .bar:nth-child(3) {
                transform: translate(-50%, -5px) rotate(-45deg);
                width: 24px;
            }

.overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                opacity: 0;
                visibility: hidden;
                transition: all 0.4s ease;
                backdrop-filter: blur(4px);
            }

.overlay.active {
                opacity: 1;
                visibility: visible;
            }
        }

.section-title {
                font-size: 3rem;
            }

.section-description {
                font-size: 1rem;
                padding: 0 1rem;
            }

section {
            min-height: 100vh;
            padding: 120px 5% 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

section:nth-child(even) {
            background: var(--section-bg);
        }

.section-content {
            max-width: 1400px;
            width: 100%;
            text-align: center;
            position: relative;
            z-index: 1;
        }

.section-title {
            font-size: 8vw;
            font-weight: 800;
            margin-bottom: 2rem;
            background: var(--gradient);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient 8s linear infinite;
            background-size: 300%;
            line-height: 1.1;
            text-transform: uppercase;
            letter-spacing: -2px;
        }

.section-description {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
            opacity: 0.8;
          color: white;
        }

const navbar = document.querySelector('.navbar');
        const mobileNavToggle = document.querySelector('.mobile-nav-toggle');
        const navLinks = document.querySelector('.nav-links');
        const overlay = document.querySelector('.overlay');
        let isMenuOpen = false;

// Scroll effect
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

// Toggle mobile menu
        function toggleMenu() {
            isMenuOpen = !isMenuOpen;
            mobileNavToggle.classList.toggle('active');
            navLinks.classList.toggle('active');
            overlay.classList.toggle('active');
            document.body.style.overflow = isMenuOpen ? 'hidden' : '';
        }

mobileNavToggle.addEventListener('click', toggleMenu);
        overlay.addEventListener('click', toggleMenu);

// Close mobile menu when clicking a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                if (isMenuOpen) toggleMenu();
            });
        });

// Close menu on escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && isMenuOpen) toggleMenu();
        });

// Prevent scroll when menu is open
        window.addEventListener('resize', () => {
            if (window.innerWidth > 768 && isMenuOpen) {
                toggleMenu();
            }
        });