Responsive Scrolling Navigation In JavaScript – Bungie Bar

Category: Javascript , Menu & Navigation | August 1, 2018
Author:pbaity
Views Total:1,758 views
Official Page:Go to website
Last Update:August 1, 2018
License:MIT

Preview:

Responsive Scrolling Navigation In JavaScript – Bungie Bar

Description:

Bungie Bar is an Apple.com inspired responsive navigation that collapses the long horizontal nav into a scrollable menu with left/right navigation arrows on mobile devices.

How to use it:

Insert the Bungie Bar’s JavaScript and Stylesheet into the html document.

<link rel="stylesheet" href="bungie.css">
<script src="bungie.js"></script>

Wrap the regular nav list into a container with the CSS class of ‘bungie’. That’s it.

<div id="bungie">
  <ul>
    <li><a>home</a></li>
    <li><a>messages</a></li>
    <li><a>notifications</a></li>
    <li><a>favorites</a></li>
    <li><a>profile</a></li>
    <li><a>about us</a></li>
    <li><a>more info</a></li>
    <li><a>settings</a></li>
    <li><a>privacy policy</a></li>
    <li><a>extras</a></li>
    <li><a>menu</a></li>
  </ul>
</div>

Changelog:

08/01/2018

  • Cleaner scrolling increments: Removed scrolling animation for now, but each step in scrolling is measured by the width of the leftmost visible element, so that elements don’t get partially covered on the left.

You Might Be Interested In:


Leave a Reply