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

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

20 June 2025

Interfaz de usuario de iconos de reproductor y aplicación CSS Glassmorphism

14 October 2024

<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>

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

Recomendado

Interfaz de usuario de iconos de reproductor y aplicación CSS Glassmorphism

Formulario de registro

Un código de JEBJEB

HTML

CSS

JS

Recomendado

Interfaz de usuario de iconos de reproductor y aplicación CSS Glassmorphism

Formulario de registro

Un código de JEBJEB

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS