svelte-burger-menu
Simple burger menu for Svelte with CSS transformations and transitions. Tested in Chrome, Edge, Firefox.
Demo: svelte-burger-menu
This package uses typescript since 2.0.0, use 1.0.5 for the latest non-typescript version.
How to use
To import the Burgermenu, install the component using
npm install svelte-burger-menu
And in the file where you want to use it:
<script>
import BurgerMenu from 'svelte-burger-menu';
</script>
<BurgerMenu>
<h2>Home</h2>
<h2>About</h2>
<h2>Contact</h2>
</BurgerMenu>
Props
| Name | Description | Default |
|---|---|---|
| duration | Duration of the opening transition in seconds as a number | 0.4 |
| width | Width of the opened menu, accepts CSS values such as '300px' and '50%' | '300px' |
| backgroundColor | Background color of the opened menu, accepts CSS colors | 'rgb(1, 0, 74)' |
| menuColor | Color of the text in the menu and the close menu button, accepts CSS colors | 'rgb(180, 180, 180)' |
| burgerColor | Color of the burger when the menu is not open, accepts CSS colors | 'rgb(18.4, 18.4, 18.4)' |
| padding | padding inside the menu for the props within, accepts CSS values such as '30px' and '10%' | '25px' |
| paddingTop | padding inside the menu for the top to prevent items comign underneath the close menu button, accepts CSS values | '50px' |
