Esempio di barra di navigazione HTML CSS: menu orizzontale reattivo

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

13 June 2025

codice di ballo

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>

Esempio di barra di navigazione HTML CSS: menu orizzontale reattivo

Consigliato

Un codice di ashimadison8

Un codice di Metehan

codice di ballo

HTML

CSS

JS

Consigliato

Un codice di ashimadison8

Un codice di Metehan

codice di ballo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS