Author: | madebygrant |
---|---|
Views Total: | 1,165 views |
Official Page: | Go to website |
Last Update: | March 8, 2021 |
License: | MIT |
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");