svizzerina

0.0.2 • Public • Published

Svizzerina

A CSS-only hamburger menu.

[[GIF]]

Usage

Include dist/index.css in your build, then add this HTML to your page:

<nav class="svizzerina">
  <input class="svizzerina__trigger" type="checkbox">

  <span class="svizzerina__glyph svizzerina__glyph1"></span>
  <span class="svizzerina__glyph svizzerina__glyph2"></span>
  <span class="svizzerina__glyph svizzerina__glyph3"></span>

  <ul class="svizzerina__menu">
    <a href="/">
      <li class="svizzerina__menu-item">Home</li>
    </a>
  </ul>
</nav>

Add any menu items you require as

  • ...
  • elements

    JS-based Setup

    If you want to avoid managing the boilerplate above, you can just set up basic navigation, and have Svizzerina's initialize() function add the remaining elements.

    Add the basic menu structure your HTML, and identify it with an id:

    <nav id="my_nav">
      <ul>
        <a href="/">
          <li>Home</li>
        </a>
      </ul>
    </nav>

    Initialize the menu:

    import {initialize} from 'svizzerina';
    
    const el = document.querySelector('#my_nav');
    initialize(el);

    Configuration

    Some configuration is available by setting CSS vars, e.g.:

    :root {
      --svizzerina-menu-width: 100px;
    }

    Vars which can be set are:

    • --svizzerina-glyph-top - default: 4px,
    • --svizzerina-link-color - default: #555,
    • --svizzerina-link-hover-color - default: black,
    • --svizzerina-menu-color - default: white,
    • --svizzerina-menu-font-size - default: 1rem,
    • --svizzerina-menu-width - default: 160px,
    • --svizzerina-z-index - default: 1.

    Readme

    Keywords

    none

    Package Sidebar

    Install

    npm i svizzerina

    Weekly Downloads

    2

    Version

    0.0.2

    License

    (MIT OR GPL-3.0)

    Unpacked Size

    4.66 kB

    Total Files

    6

    Last publish

    Collaborators

    • leanpanda