Créer une sidebar en HTML CSS

Publié le

Besoin de faire une sidebar sur votre site internet ? Une sidebar est un élément très pratique pour votre page web car elle offre un moyen simple et efficace d’organiser le contenu. Une fois que vous aurez appris à créer et personnaliser votre sidebar, vous pourrez facilement la mettre en place sur votre site web. Alors, prêt à commencer ? C’est parti !

sidebar-html-css

Pour faire une sidebar en HTML & CSS sur votre site internet, il suffit d'insérer une <div> en utilisant la propriété position et la valeur sticky ou fixed.

Voici les 4 étapes pour créer votre sidebar en HTML CSS :

  1. Créer un bloc en HTML
  2. Ajouter des éléments
  3. Positionner le bloc
  4. Personnaliser la sidebar en CSS

Voyons tout cela un peu plus en détails :

Créer le conteneur

<div id="sidebar"> </div>

La première étape consiste simplement à créer le conteneur de votre sidebar.

Pour ce faire, vous devez utiliser l'élément HTML <div> et lui appliquer un identifiant ou une classe.

Sachez que vous pouvez également utiliser la balise <aside> pour ce type de contenu.

Ajouter des éléments

<div id="sidebar">
  <ul>
    <li><a href="#">Lien 1</a></li>
    <li><a href="#">Lien 2</a></li>
    <li><a href="#">Lien 3</a></li>
  </ul>

  <img src="image.jpg" alt="Image de la Sidebar" />

  <p>Texte de la Sidebar</p>
</div>

Vous pouvez ajouter des éléments à votre sidebar comme des liens, des images, du texte, etc...

Vous pouvez également utiliser des balises HTML tels que les listes, les paragraphes et les titres pour structurer votre sidebar.

Une fois que vous avez ajouté tous les éléments que vous voulez, vous pouvez passer à l'étape suivante.

Positionner la Sidebar

<style>
  #sidebar {
    position: sticky;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #fff;
    padding: 10px;
  }
</style>

Personnaliser en CSS

Ensuite, l'identifiant ou la classe vous permettront de cibler votre sidebar et de la personnaliser.

Vous pouvez maintenant utiliser des propriétés CSS telles que la couleur, la taille et les bordures pour personnaliser votre sidebar.

Vous pouvez ajouter des animations à votre sidebar pour lui donner plus de peps et de dynamisme !

Votre sidebar est enfin prête.

<style>
  #sidebar {
    position: sticky;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #ff0000;
    padding: 10px;
    border-radius: 10px;
    animation: fadein 3s;
  }

  @keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
  }
</style>

Félicitations ! Vous avez appris à créer une sidebar en HTML CSS et à la personnaliser selon vos besoins.

Avec ce tutoriel, vous êtes maintenant en mesure de créer facilement des sidebars pour votre site web.

Alors, à vous de jouer !