Flexible Mobile Hamburger Navigation With 4 Styles – Kin Menu

Preview:

Description:

Kin Menu is a JavaScript library to generate a flexible, mobile-friendly hamburger navigation menu from the existing site navigation.

How to use it:

1. Load the Kin Menu’s JavaScript and CSS files in the document.

<!-- Basic Style -->
<link rel="stylesheet" href="dist/css/kin-menu.base.css" />
<!-- Additional Styles -->
<link rel="stylesheet" href="dist/css/kin-menu.styles.css" />
<!-- OR All In One -->
<link rel="stylesheet" href="dist/css/kin-menu.all.css" />
<!-- JavaScript -->
<script src="dist/js/kin-menu.min.js"></script>

2. Hide your site nav when the Kin Menu is activated.

<nav class="site-menu">
  <ul>
    <li>Your Site Nav</li>
  </ul>
</nav>

body.kin-is--loaded .site-menu {
  display:none
}

3. Create a new KinMenu instance and specify the site nav you want to clone from.

const kinOptions = {
      groups: [
        {
          element: 'ul',
          class: 'additionalClass',
          clones: [
              'nav > ul > li'
          ]
        },
      ]
};

const kin = new KinMenu(kinOptions);

4. You can also merge multiple nav menus into the Kin Menu.

const kinOptions = {
      groups: [
        {
          element: 'ul',
          class: 'additionalClass',
          clones: [
              'nav > ul > li'
          ]
        },
        {
          element: 'ul',
          class: 'anotherClass',
          clones: [
            'nav.another-menu > ul > li'
          ]
        },
      ]
};

5. Determine the maximum width of the viewport to activate the Kin Menu. Default: 960.

const kinOptions = {
      windowWidth: 1024
};

6. Customize the hamburger toggle button.

const kinOptions = {
      toggleButton: {
      hasWrapper: true,
      wrapperContent: [
        '.site-logo'
      ],
      text: ''
    }
};

7. Activate the Kin Menu and done.

kin.init();

8. Set the menu style to: ‘Angled Sidebar’.

kin.setStyle("side-angled");

9. Set the menu style to: ‘Circle Expand’.

kin.setStyle("circle-expand");

10. Set the menu style to: ‘Transition’.

kin.setStyle("transition");

11. Set the menu style to: ‘Sidebar’.

kin.setStyle("side");