Skip to main content

Side-Panel

Demo

Cliquez sur le bouton dans la navbar pour ouvrir le side panel.

Documentation

Importez la fonction dans votre projet

Adaptez le path selon la structure de votre projet

import { SidePanel } from "./functions/side-panel.js"

Créez et initialisez une instance - exemple

const mySidePanel = new SidePanel(".side-panel", {
  // your options here - see below
  overlaySelector: ".overlay"
})
// init your newly created instance
mySidePanel.init()

Options

  • Name
    Type
    Default
    Description
  • menuButtonSelector
    CSS Selector
    ".navbar__button--side-panel"
  • overlaySelector
    CSS Selector
    null
  • sidePanelOpenClass
    string
    "side-panel--open"
  • overlayActiveClass
    string
    "overlay--active"

Code

Dossier de base

Dossier complet

Éléments partagés requis

Overlay

Combinez avec ceci

Navbar