Cómo crear una barra lateral de cuadrícula en CSS

2,391 ledoc

Abrir en el editor Publica tu código

Cómo crear una barra lateral de cuadrícula en CSS

Recomendado

19 January 2026

Código HTML para insertar en el juego Parking Fury

25 June 2024

Información sobre herramientas Mario Bros.

3 February 2026

Puerto de juego HTML5 de Yume Nikki con controles táctiles

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