A responsive dropdown menu. View example usage here.
Install package:
$ npm install @andrewjh271/menuImport the menu.scss file in your Sass manifest file:
@import "path/to/menu.scss"Alternatively, reference the menu.css file in your html:
<link rel="stylesheet" href="path/to/menu.css" />import '@andrewjh271/menu';Follow markup structure:
<ul class="menu">
<button class="hamburger hamburger--spin-r" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<h1 class="title"><a href="">lichess.org</a></h1>
<div class="dropdown-container hide-mobile">
<li class="dropdown">
<div class="dropdown-header">Play</div>
<ul>
<li><a href="">Create a game</a></li>
<li><a href="">Arena tournaments</a></li>
<li><a href="">Swiss tournaments</a></li>
<li><a href="">Simultaneous exhibitions</a></li>
</ul>
</li>
<li class="dropdown">
<div class="dropdown-header">Puzzles</div>
<ul>
<li><a href="">Puzzles</a></li>
<li><a href="">Puzzle Dashboard</a></li>
<li><a href="">Puzzle Streak</a></li>
<li><a href="">Puzzle Storm</a></li>
</ul>
</li>
</div>
</ul> Variables in sass/menu.scss or stylesheets/menu.css
: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:
$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.
<button class="hamburger hamburger--emphatic-r" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>