Another hamburger menu, as a web component.
Note
In the example page, you must be in mobile view to see the component.
See @substrate-system/hamburger for something similar but with different style.
npm i -S @substrate-system/hamburger-twoImport, then call .define to register the element with the default tag name,
hamburger-two.
Note
This module only has client-side code. There is no provision for server-side rendering, because this element is only useful on the client-side.
Application code should listen for hamburger events, and show/hide the menu.
<hamburger-two></hamburger-two>
<div class="mobile-nav-menu">
<ul>
<li><a href="/hello">hello</a></li>
<li><a href="/abc">abc</a></li>
<li><a href="/def">def</a></li>
</ul>
</div>import { HamburgerTwo } from '@substrate-system/hamburger-two'
import '@substrate-system/hamburger-two/css'
HamburgerTwo.define()
// tag name is exposed as .TAG
const el = document.querySelector(HamburgerTwo.TAG)
// programmatically open the menu
el?.isOpen = true
// listen for events, then change the class on our navigation element
el?.addEventListener(HamburgerTwo.event('open'), () => {
debug('menu is open...')
document.querySelector('.mobile-nav-menu')!.classList.add('open')
})
el?.addEventListener(HamburgerTwo.event('close'), () => {
debug('menu is closed...')
document.querySelector('.mobile-nav-menu')!.classList.remove('open')
})Only display on small screens. This needs to be part of the application code; it is not in this library.
hamburger-two {
display: none;
}
/* show/hide our menu */
.mobile-nav-menu {
display: none;
&.open {
display: flex;
}
}
@media (width < 680px) {
hamburger-two {
display: block;
}
}Typically you would use the tag in the DOM, then listen for events and show/hide a menu element in response.
HamburgerTwo.event('open')
// => 'hamburger-two:open'document.querySelector('hamburger-two')
.addEventListener(HamburgerTwo.event('open'), () => {
document
.querySelector('.mobile-nav-menu')
.classList
.add('open')
})HamburgerTwo.event('close')
// => 'hamburger-two:close'document.querySelector('hamburger-two')
.addEventListener(HamburgerTwo.event('close'), () => {
document
.querySelector('.mobile-nav-menu')
.classList
.remove('open')
})See ./example.
// after registering the component
document.body.innerHTML += `
<hamburger-two></hamburger-two>
`
const el = document.querySelector('hamburger-two')
el?.addEventListener(HamburgerTwo.event('open'), () => {
debug('menu is open...')
document.querySelector('.mobile-nav-menu')!.classList.add('open')
})
el?.addEventListener(HamburgerTwo.event('close'), () => {
debug('menu is closed...')
document.querySelector('.mobile-nav-menu')!.classList.remove('open')
})This exposes ESM and common JS via
package.json exports field.
import { HamburgerTwo } from '@substrate-system/hamburger-two'require('@substrate-system/hamburger-two')This package exposes minified JS and CSS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.
cp ./node_modules/@substrate-system/hamburger-two/dist/index.min.js ./public/hamburger-two.min.js
cp ./node_modules/@substrate-system/hamburger-two/dist/style.min.css ./public/hamburger-two.css<head>
<link rel="stylesheet" href="./hamburger-two.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./hamburger-two.min.js"></script>
</body>import '@substrate-system/hamburger-two/css'Or minified:
import '@substrate-system/hamburger-two/css/min'You can redefine some CSS variables. --burger-open-color sets the color of
the close "x" button when the menu is open. Default is "white".
:root {
--burger-open-color: white;
--fade-in-time: 0.4s;
}Run some tests locally with tape-run.
npm testStart a localhost server of the example page.
npm start- @substrate-system/hamburger The same thing, different style.