उत्तरदायी HTML और CSS नेवबार टेम्पलेट

अनुशंसित

16 October 2025

कोड प्रभाव के साथ CSS एनिमेटेड लोडिंग स्क्रीन

16 September 2025

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Navbar</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      font-family: Arial, sans-serif;
    }

nav {
      background-color: #333;
      color: white;
      padding: 0.75rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.logo {
      font-size: 1.5rem;
      font-weight: bold;
    }

.nav-links {
      display: flex;
      gap: 1.5rem;
    }

.nav-links a {
      color: white;
      text-decoration: none;
      transition: color 0.3s;
    }

.nav-links a:hover {
      color: #f0a500;
    }

.hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
    }

.hamburger div {
      width: 25px;
      height: 3px;
      background-color: white;
      margin: 4px 0;
    }

@media (max-width: 768px) {
      .nav-links {
        display: none;
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        text-align: center;
      }

.nav-links.active {
        display: flex;
      }

.hamburger {
        display: flex;
      }
    }
  </style>
</head>
<body>

<nav>
  <div class="logo">MySite</div>
  <div class="hamburger" onclick="toggleMenu()">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="nav-links" id="navLinks">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>
</nav>

</body>
</html>

उत्तरदायी HTML और CSS नेवबार टेम्पलेट

अनुशंसित

कोड प्रभाव के साथ CSS एनिमेटेड लोडिंग स्क्रीन

CSS आकृतियाँ एनीमेशन उदाहरण

CSS ब्लॉब अधिसूचना एनीमेशन

HTML

CSS

JS

अनुशंसित

कोड प्रभाव के साथ CSS एनिमेटेड लोडिंग स्क्रीन

CSS आकृतियाँ एनीमेशन उदाहरण

CSS ब्लॉब अधिसूचना एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS