JS plugin adding a functionality of adaptive navigation to any navigation menus on a site.
The plugin tries to fit menu items in a navigation container according to the viewport width. To test it by yourself you can resize the browser window and have fun.
Download the zip file from Github repository or run the command in a terminal: npm install adaptive-nav
The usage is simple. Just include the adaptive-nav.js
script into your HTML code, the following way:
<script src="src/js/adaptive-nav.js"></script>
And also, add the CSS file with basic styling:
<link rel="stylesheet" href="src/css/adaptive-nav.css">
The basic HTML structure for the navigation nav is:
<nav class="adaptive-nav">
<ul class="adaptive-nav__list">
<li class="adaptive-nav__list__item">Item 1</li>
<li class="adaptive-nav__list__item">Item 2</li>
<li class="adaptive-nav__list__item">Item 3</li>
[...]
<li class="adaptive-nav__list__item">Item n</li>
</ul>
</nav>
Then you can run the script with the following code:
<script>
new AdaptiveNav();
</script>
If you have your own navigation structure you can customize the way the AdaptiveNav plugin works by setting custom properties.
It's a selector of the nav container. By default it's .adaptive-nav
It's a selector of the list with menu items. By default it's .adaptive-nav__list
It's a selector of the list item. By default it's .adaptive-nav__list__item
You can pass the properties, listed above, as an configuration object when creating a new instance of AdaptiveNav.
<script>
var adaptiveNav = new AdaptiveNav({
navSelector: '.nav-container',
navListSelector: '.nav-list',
navItemSelector: '.nav-item'
});
</script>
When you create a new instance of AdaptiveNav it returns an object with the following methods. In the example above, the object with methods is called adaptiveNav
.
The method updates the nav items alignment on demand.
It takes no additional parameters.
You can use it the following way: adaptiveNav.update();