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' |