@substrate-system/hamburger-two

v0.0.13

Published

3 days ago

[![tests](https://img.shields.io/github/actions/workflow/status/substrate-system/hamburger-two/nodejs.yml?style=flat-square)](https://github.com/substrate-system/hamburger-two/actions/workflows/nodejs.yml) [![types](https://img.shields.io/npm/types/@subst

0High
0Medium
0Low

nichoth

hamburger two

Another hamburger menu, as a web component. This extends @susbtrate-system/web-component.

See a live demo

[!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.

Install

npm i -S @substrate-system/hamburger-two

Use

Just import; the library code calls window.customElements.define. 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.

HTML

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>

Javascript

import { HamburgerTwo } from '@substrate-system/hamburger-two'
import '@substrate-system/hamburger-two/css'

// 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')
})

// or use .on, because this extends @substrate-system/web-component
el.on('open', ev => {
    // ...
})

el?.addEventListener(HamburgerTwo.event('close'), () => {
    debug('menu is closed...')
    document.querySelector('.mobile-nav-menu')!.classList.remove('open')
})

CSS

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;
    }
}

events

Typically you would use the tag in the DOM, then listen for events and show/hide a menu element in response.

open

HamburgerTwo.event('open')
// => 'hamburger-two:open'

document.querySelector('hamburger-two')
    .addEventListener(HamburgerTwo.event('open'), () => {
        document
            .querySelector('.mobile-nav-menu')
            .classList
            .add('open')
    })

close

HamburgerTwo.event('close')
// => 'hamburger-two:close'

document.querySelector('hamburger-two')
    .addEventListener(HamburgerTwo.event('close'), () => {
        document
            .querySelector('.mobile-nav-menu')
            .classList
            .remove('open')
    })

Example

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')
})

Modules

This exposes ESM and common JS via package.json exports field.

ESM

import { HamburgerTwo } from '@substrate-system/hamburger-two'

Common JS

require('@substrate-system/hamburger-two')

pre-built

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.

copy

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

HTML

<head>
    <link rel="stylesheet" href="./hamburger-two.css">
</head>
<body>
    <!-- ... -->
    <script type="module" src="./hamburger-two.min.js"></script>
</body>

CSS

Import CSS

import '@substrate-system/hamburger-two/css'

Or minified:

import '@substrate-system/hamburger-two/css/min'

Customize CSS via variables

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;
}

test

Run some tests locally with tape-run.

npm test

Develop

Start a localhost server of the example page.

npm start

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

hamburger two

Install

Use

HTML

Javascript

CSS

events

open

close

Example

Modules

ESM

Common JS

pre-built

copy

HTML

CSS

Import CSS

Customize CSS via variables

test

Develop

See also