@nichoth/hamburger
v0.0.5
Published
A hamburger menu, implemented as a web component
Downloads
7
Readme
hamburger
A hamburger menu, implemented as a web component.
install
npm i -S @nichoth/hamburgeruse
This is a web component. Just import the JS and CSS, then you can use the tag in your HTML.
example
- see code in ./example
- See a live demonstration
bundler
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'HTML only
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.
JS
cp ./node_modules/@nichoth/hamburger/dist/index.min.js ./public/hamburger.jsCSS
cp ./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>API
attributes
transition
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.
CSS variables
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 */
}credits
Based on this codepen page.