Barre de navigation réactive CodePen Home Premium

1587 zegarkidawida

Ouvrir dans l'éditeur Publiez votre code

Barre de navigation réactive CodePen Home Premium

Recommandé

11 October 2025

Extrait d'animation de chargement CSS

3 July 2025

Exemple de code de menu déroulant HTML

8 September 2024

Écran de connexion avancé

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;
        }

JS

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();
            }
        });

Recommandé

Extrait d'animation de chargement CSS

Exemple de code de menu déroulant HTML

Écran de connexion avancé

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS