CSS में ग्रिड साइडबार कैसे बनाएं

1838 ledoc

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

अनुशंसित

24 September 2025

CSS ब्रेन एनिमेशन HTML स्निपेट

22 August 2025

CSS हार्ट एनीमेशन कोड स्निपेट

23 August 2025

वेब डेवलपर पोर्टफोलियो: HTML, CSS, JavaScript

HTML

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    .sidebar {
      height: 100%;
      width: 0;
      position: fixed;
      top: 0;
      left: 0;
      background-color: lightblue;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }

.sidebar div {
      padding: 8px 8px 8px 30px;
      font-size: 24px;
      display: block;
      transition: 0.5s;
      cursor: pointer;
    }

.sidebar .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
    }

.openbtn {
      font-size: 24px;
      cursor: pointer;
      background-color: lightblue;
    }

#main {
      transition: margin-left .5s;
    }
  </style>
</head>
<body>
  <div id="mySidebar" class="sidebar">
    <div class="closebtn" onclick="closeNav()">×</div>
    <div>About</div>
    <div>Services</div>
    <div>Clients</div>
  </div>

<div id="main">
    <button class="openbtn" onclick="openNav()">Open Sidebar</button>
    <p>(your body text here)</p>
  </div>

function closeNav() {
      document.getElementById("mySidebar").style.width = "0";
      document.getElementById("main").style.marginLeft = "0";
    }
  </script>
</body>
</html>

अनुशंसित

CSS ब्रेन एनिमेशन HTML स्निपेट

CSS हार्ट एनीमेशन कोड स्निपेट

वेब डेवलपर पोर्टफोलियो: HTML, CSS, JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS