Un código de mamadoudiallo34204

1,526 mamadoudiallo34204

Abrir en el editor Publica tu código

Recomendado

27 October 2023

Juego de Tetris Simple

14 March 2026

Hermanos del fútbol

23 June 2025

Ejemplo de formulario de inicio de sesión HTML

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>

CSS