एचटीएमएल सीएसएस नेविगेशन बार उदाहरण: रिस्पॉन्सिव हॉरिजॉन्टल मेनू

379 portfolio7

संपादक में खोलें Video अपना कोड प्रकाशित करें

एचटीएमएल सीएसएस नेविगेशन बार उदाहरण: रिस्पॉन्सिव हॉरिजॉन्टल मेनू

अनुशंसित

7 March 2025

सीएसएस त्रिकोणमिति के साथ अनंत कक्षा एनीमेशन

9 November 2024

नेविगेशन पट्टी

28 November 2024

स्लाइडिंग मेनू के साथ शुद्ध क्षैतिज स्लाइडर

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>

अनुशंसित

सीएसएस त्रिकोणमिति के साथ अनंत कक्षा एनीमेशन

नेविगेशन पट्टी

स्लाइडिंग मेनू के साथ शुद्ध क्षैतिज स्लाइडर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS