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

Abrir en el editor Video Publica tu código

Recomendado

28 May 2025

Un código de hunganh

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

Un código de Metehan

Calculadora de iPhone

Un código de hunganh

HTML

CSS

JS

Recomendado

Un código de Metehan

Calculadora de iPhone

Un código de hunganh

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS