Um Código de mamadoudiallo34204

1066 mamadoudiallo34204

Abrir no Editor Video Publique Seu Código

Recomendado

22 June 2025

Exemplo de formulário de login em HTML

25 April 2025

Um Código de Yotva

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>

Um Código de mamadoudiallo34204

Recomendado

Exemplo de formulário de login em HTML

Calculadora de Impostos Robux

Um Código de Yotva

HTML

CSS

JS

Recomendado

Exemplo de formulário de login em HTML

Calculadora de Impostos Robux

Um Código de Yotva

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS