Como criar uma barra lateral de grade em CSS

1977 ledoc

Abrir no Editor Video Publique Seu Código

Como criar uma barra lateral de grade em CSS

Recomendado

13 June 2025

Um Código de Metehan

6 September 2025

Modelo HTML de Portfólio do Desenvolvedor

17 February 2026

Modelo HTML da página inicial do Roblox

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>

Recomendado

Um Código de Metehan

Modelo HTML de Portfólio do Desenvolvedor

Modelo HTML da página inicial do Roblox

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS