Ejemplo de barra de navegación HTML CSS: Menú horizontal adaptable

Abrir en el editor Video Publica tu código

Recomendado

16 August 2024

Tienda de zapatos

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML/CSS Navbar Example</title>
    <style>
        /* Basic Reset and Font */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

/* Navbar Container (The UL) */
        .navbar ul {
            list-style-type: none; /* Remove bullet points */
            margin: 0;
            padding: 0;
            overflow: hidden; /* Important for containing floated elements */
            background-color: #333; /* Dark background color */
        }

/* Navbar List Items (The LI) */
        .navbar li {
            float: left; /* Makes items horizontal */
        }

/* Navbar Links (The A) */
        .navbar li a {
            display: block; /* Makes the entire area clickable */
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none; /* Remove underline */
        }

/* Hover effect */
        .navbar li a:hover {
            background-color: #111;
        }

/* Optional: Active link styling */
        .navbar .active {
            background-color: #04AA6D;
        }
    </style>
</head>
<body>

<nav class="navbar">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
            <li style="float:right"><a href="#login">Login</a></li>
        </ul>
    </nav>

<div style="padding: 20px;">
        <h1>Welcome to the Page</h1>
        <p>This is a simple responsive horizontal navigation bar built using HTML and CSS.</p>
    </div>

</body>
</html>

Ejemplo de barra de navegación HTML CSS: Menú horizontal adaptable

Recomendado

Tienda de tokens de Discord

Generador de contraseñas

Tienda de zapatos

HTML

CSS

JS

Recomendado

Tienda de tokens de Discord

Generador de contraseñas

Tienda de zapatos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS