FullBurger

example fullburger menu.

A simple and lightweight JavaScript library for burger menu

Peculiarities

• No dependencies. The library is written in pure JavaScript and does not require any other libraries to work.
• Simplicity and functionality. You can easily and quickly connect and use a library that implements important functionality for the burger menu
• Availability. The burger menu meets all accessibility rules.
• Customization with CSS. You can easily change the appearance, layout using CSS.

example of use in react js

useEffect(() => {
    new Fullburger('.fullburger', {});
  }, []);

and be sure to remove :

  <React.StrictMode>

How to work with the library in type common.js

Connect style.css and index.js from the dist folder to the page

Place the following JS code to connect the FullBurger:

const fullBurger = new Fullburger('.fullburger');

How to work with the library in type module

1. Download the latest version of the library the page

npm i fullburger

2. ways to connect the library in type module

import Fullburger from 'fullburger';
import 'fullburger/style';

3. Place the following markup in your HTML document:

<header class="fullburger">
  <div class="fullburger-container">
    <a class="fullburger-logo" href="#">
      Logo
    </a> 
    <nav class="fullburger-nav">
      <ul class="fullburger-list">
          <li class="fullburger-item">
              <a href="#" class="fullburger-link">home</a>
          </li>
          <li class="fullburger-item">
            <a href="#" class="fullburger-link">about</a>
          </li>
          <li class="fullburger-item">
              <a href="#" class="fullburger-link">contact</a>
          </li>
      </ul>
    </nav>
    <button class="fullburger-button">
        <span></span>
        <span></span>
        <span></span>
    </button>
  </div>
</header>

4. if you want to use dropdown Place the following markup in your HTML document:

<header class="fullburger">
  <div class="fullburger-container">
    <a class="logo" href="#">
        Logo
    </a> 
    <nav class="fullburger-nav">
      <ul class="fullburger-list">
        <li class="fullburger-item dropdown">
          <a href="#" class="fullburger-link">home</a>
          <button class="dropdown-button"></button>
          <ul class="fullburger-sub-list dropdown-list">
              <li class="fullburger-sub-item">subitem</li>
              <li class="fullburger-sub-item dropdown">
                  <a href="#" class="fullburger-link">contact</a>
                  <button class="dropdown-button"></button>
                  <ul class="fullburger-sub-list dropdown-list">
                      <li class="fullburger-sub-item">subitem</li>
                      <li class="fullburger-sub-item dropdown">
                          <a href="#" class="fullburger-link">contact</a>
                          <button class="dropdown-button"></button>
                          <ul class="fullburger-sub-list dropdown-list ">
                              <li class="fullburger-sub-item">subitem</li>
                              <li class="fullburger-sub-item">
                                  <a href="#" class="fullburger-link">contact</a>
                              </li>
                              <li class="fullburger-sub-item">subitem</li>
                              <li class="fullburger-sub-item">subitem</li>
                          </ul>
                      </li>
                      <li class="fullburger-sub-item">subitem</li>
                      <li class="fullburger-sub-item">subitem</li>
                  </ul>
              </li>
              <li class="fullburger-sub-item">subitem</li>
              <li class="fullburger-sub-item dropdown">
                  <a href="#" class="fullburger-link">contact</a>
                  <button class="dropdown-button"></button>
                  <ul class="fullburger-sub-list dropdown-list ">
                      <li class="fullburger-sub-item">subitem</li>
                      <li class="fullburger-sub-item">
                          <a href="#" class="fullburger-link">contact</a>
                      </li>
                      <li class="fullburger-sub-item">subitem</li>
                      <li class="fullburger-sub-item">subitem</li>
                  </ul>
              </li>
          </ul>
        </li>
        <li class="fullburger-item">
          <a href="#" class="fullburger-link">about</a>
        </li>
        <li class="fullburger-item dropdown">
          <a href="#" class="fullburger-link">contact</a>
          <button class="dropdown-button"></button>
          <ul class="fullburger-sub-list dropdown-list">
              <li class="fullburger-sub-item">subitem</li>
              <li class="fullburger-sub-item">subitem</li>
              <li class="fullburger-sub-item">subitem</li>
              <li class="fullburger-sub-item">subitem</li>
          </ul>
        </li>
        <li class="fullburger-item">
          <a href="#" class="fullburger-link">blog</a>
        </li>
        <li class="fullburger-item">
          <a href="#" class="fullburger-link">price</a>
        </li>
        <li class="fullburger-item">
          <a href="#" class="fullburger-link">sign in</a>
        </li>
      </ul>
    </nav>
    <button class="fullburger-button">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
</header>

you can change the background-color of the header by accessing this css variable --header-color, for example you can write this variable in css

:root{
--header-color:#fff;
}

Place the following JS code to connect the FullBurger:

const fullBurger = new Fullburger('.fullburger');

The library supports nine parameters:

1. params whichSide: top or left or right or bottom - The WhichSide parameter affects which side the menu is displayed on

Default

const fullBurger = new Fullburger('.fullburger', {
  ...
  whichSide: {
    top: true
  },
  ...
});

2. params position: top or left or right or bottom - The position parameter affects which side there will be a menu item. This is clearly visible when the menu width or height is less than 100%.

Default

const fullBurger = new Fullburger('.fullburger', {
  ...
  position: {
    top: true
  },
  ...
});

3. params offsetSize: maxWidth || maxHeight - The offsetSize parameter affects the width and height of the menu. By the way, you can select any unit of measurement.

Default 

const fullBurger = new Fullburger('.fullburger', {
  ...
  offsetSize: {
    maxHeight: '100vh',
    maxWidth: '100vw',
  },
  ...
});

4. params fixed: scrolling or defaultValue - The fixed parameter affects the fixed state of the menu, using the "scrolling" property you can select from what distance the menu will be fixed. Both are disabled by default.

const fullBurger = new Fullburger('.fullburger', {
  ...
  fixed: {
      scrolling: 500,
      // defaultValue: true
  },
  ...
});

5. params dropdown: click || hover - The dropdown parameter affects the operation of the dropdown, the "click" property is needed so that the dropdown only opens when clicked without hovering, the "hover" property is so that the dropdown occurs with a hover effect, these two properties can be enabled together, even I recommend doing so a dropdown worked on all devices. Both are disabled by default.

const fullBurger = new Fullburger('.fullburger', {
  ...
  dropdown: {
      click: true,
      hover: true
  }
  ...
});

6. params breakpoint: ... - Setting a breakpoint affects the distance at which the hamburger button appears and disappears. Default media query (min-width: 768px).

const fullBurger = new Fullburger('.fullburger', {
  ...
  breakpoint: 768,
  ...
});

7. params overlay: true or false - overlay affects whether an overlay will be present, Default overlay :false.

const fullBurger = new Fullburger('.fullburger', {
  ...
  overlay: true,
  ...
});

8. params speed: 1000 - The speed setting affects how long it takes for menus to appear or disappear. Default speed: 900

const fullBurger = new Fullburger('.fullburger', {
  ...
  speed: 1000,
  ...
});

9. params marker: true - adds the active class to the clicked link in the menu.Default marker: false

const fullBurger = new Fullburger('.fullburger', {
  ...
  marker: true,
  ...
});