A hamburger menu, implemented as a web component.
npm i -S @nichoth/hamburgerThis is a web component. Just import the JS and CSS, then you can use the tag in your HTML.
- see code in ./example
- See a live demonstration
With a bundler such as vite,
// just import, then we can use the tag in HTML
import '@nichoth/hamburger'
import '@nichoth/hamburger/style.css'
// import the application CSS, because we are defining some CSS variables
import './index.css'You can use the files in this module directly by linking in your HTML.
First, copy the files to a location accessible to your web server. This package includes minified files.
cp ./node_modules/@nichoth/hamburger/dist/index.min.js ./public/hamburger.jscp ./node_modules/@nichoth/hamburger/dist/style.min.css ./public/style.cssThen link to them in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- the style -->
<link rel="stylesheet" href="/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<!-- use the element -->
<hamburger-menu transition=800>
<a href="#example">example link</a>
<a href="#example">example two</a>
</hamburger-menu>
<!-- the JS -->
<script type="module" src="/hamburger.js"></script>
</body>
</html>Take an attribute transition to set the time, in milliseconds that it takes
for the menu to transition in and out of the viewport.
Default is 200ms.
This corresponds to a CSS variable, --hamburger-transition, which is the
transition time as a CSS property. Eg, in CSS,
:root {
--hamburger-transition: .8s
}corresponds with this HTML:
<hamburger-menu transition=800>
<a href="#example">example link</a>
<a href="#example">example two</a>
</hamburger-menu>[!NOTE]
800 milliseconds is 0.8 seconds.
Define several CSS variables to customize the appearance.
:root {
--hamburger-bgc: var(--white); /* hamburger background color */
--hamburger-color: var(--purple);
--hamburger-hover-color: var(--bright-white);
--menu-bgc: var(--white);
--menu-color: var(--purple);
--menu-hover-bgc: var(--purple);
--menu-hover-color: var(--white);
--menu-width: 200px;
--hamburger-transition: .8s; /* default is .2s */
}Based on this codepen page.