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.