Comment créer une barre latérale de grille en CSS

1169 ledoc

Ouvrir dans l'éditeur Publiez votre code

Comment créer une barre latérale de grille en CSS

Recommandé

18 June 2023

Formulaire de connexion simple

27 October 2024

Portfolio général (Étape par étape)

5 December 2024

Un code de JEBJEB

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>

Recommandé

Formulaire de connexion simple

Portfolio général (Étape par étape)

Un code de JEBJEB

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS