Un código de mamadoudiallo34204

Abrir en el editor Publica tu código

Recomendado

6 November 2024

Animación de introducción de Netflix CSS puro

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 código de mamadoudiallo34204

Recomendado

Animación de texto

Código de menú lateral HTML

Animación de introducción de Netflix CSS puro

HTML

CSS

JS

Recomendado

Animación de texto

Código de menú lateral HTML

Animación de introducción de Netflix CSS puro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS