@andrewjh271/menu v2.0.0

A responsive dropdown menu. View example usage here.

$3

Install package:

``shell
$ npm install @andrewjh271/menu
`

Import the menu.scss file in your Sass manifest file:

`sass
@import "path/to/menu.scss"
`

Alternatively, reference the menu.css file in your html:

`html

`

$3

`javascript
import '@andrewjh271/menu';
`

Follow markup structure:

`html


lichess.org







Play




• Create a game


• Arena tournaments


• Swiss tournaments


• Simultaneous exhibitions








Puzzles




• Puzzles


• Puzzle Dashboard


• Puzzle Streak


• Puzzle Storm

`scss
:root {
--menu-color-main: #475480;
--dropdown-color: #f0e7ff;
--dropdown-highlight: #629cf3;
--spacing-base: 9px;
--max-height: 700px;
}
`

If you are using Sass, these variables are customizable as well:

`scss
$hamburger-padding-x: 18px !default;
$hamburger-padding-y: 5px !default;
$hamburger-layer-width: 25px !default; // default = 40px
$hamburger-layer-height: 2.5px !default; // default = 4px
$hamburger-layer-color: var(--menu-color-main) !default;
`

Customize hamburger animation by changing the class name in the html. Read more here.

`html





``

Author

Andrew Hayhurst

Acknowledgments

* Hamburgers by Jonathan Suh
* https://webpack.js.org/
* Inspired by https://lichess.org/