drawerNavigation

This is an implementation of a drawer navigation inspired by Karan Sahah's Navigation Drawer Concept. This library created as a Web Component, so you can easily get started using it, just include tag in your HTML-markup.

Css variables

You can easily change the appearance of the component through CSS variables. Put them on the tag in your CSS. For example:

HTML:

<drawer-navigation id="navigation">
    <a href="#">Menu item 1</a>
    <a href="#">Menu item 2</a>
    <a href="#">Menu item 3</a>
</drawer-navigation>

CSS:

#navigation {
  --font-color: "yellow";
  --menu-color-primary: #c0b0e5;
}

List of all CSS variables

...via which you can change the appearance of this component

CSS variable | Meaning --- | --- --font-color | color of the font and images --font-size | font size --menu-color-primary | primary color of the component --menu-color-secondary | secondary color of the component --scrollbar-hover-color | color of the scrollbar on hover --handle-svg-color | color of the svg image in the handle --handle-svg-dimension | dimensions of the handle in px --default-z-index | z-index that the component will use (default is 1)

Note

All elements that placed inside the will have some additional styles. You can rewrite them in your CSS if you like.