Author: | aaronbushnell |
---|---|
Views Total: | 2,469 views |
Official Page: | Go to website |
Last Update: | November 25, 2014 |
License: | MIT |
Preview:

Description:
KoalaNav.js is a simple Javascript plugin that turns a horizontal navigation menu into a toggleable dropdown menu when the screen size reaches a certain width (breakpoint).
Basic Usage:
Load the required koalanav.css and koalanav.js in the document.
<link rel="stylesheet" href="koalanav.css"> <script src="koalanav.js"></script>
Create a regular multi-level navigation menu with Html lists.
<nav id="demo"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </li> </ul> </li> <li><a href="#">Item 4</a></li> </ul> </li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </nav>
Initialize the mobile menu with default options.
var nav1 = new KoalaNav("demo");
Available options.
var nav1 = new KoalaNav("demo",{ // The type of icon to use for the mobile toggle button. // "hamburger" or "arrow" btnIcon: 'hamburger', // The position of the mobile toggle button icon. // "left" or "right" btnPosition: 'left', // The width (in pixels) of when the mobile menu should be displayed mobileWidth: 500 });
Add some custom CSS to style the mobile menu.
.navigation-menu--is-mobile li { border-top: 1px solid #ddd; background: #eee; } .navigation-menu--is-desktop li a, .navigation-menu--is-mobile li a { padding: .5em 1em; text-decoration: none; } .navigation-menu--is-mobile li li { border-top: 1px solid #ccc; background: #ddd; } .navigation-menu--is-mobile li li li { border-top: 1px solid #bbb; background: #ccc; } .navigation-menu--is-mobile li li li li { border-top: 1px solid #aaa; background: #bbb; } .navigation-menu--is-mobile .has-child-menu span { padding: .5em 1em; } .navigation-menu--is-desktop { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } .navigation-menu--is-desktop, .navigation-menu--is-desktop ul { background: #eee; } .navigation-menu--is-desktop ul ul { background: #ccc; } .navigation-menu--is-desktop ul li:hover { background: #ccc; } .navigation-menu--is-desktop ul ul li:hover { background: #bbb; } .navigation-menu__mobile-toggle { margin: .75em 1em; }