1.0.2 • Published 3 years ago
@pavel-yakovlev/drawer-navigation-web-component v1.0.2
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.