Skip to content
Simple lightweight & fully responsive mobile navigation built with flexbox and vanilla JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets 1.2.1 - docs update, license, nav.css created, footer Feb 11, 2019
.gitignore
CHANGELOG.md website: fixed link bot nav note Feb 21, 2019
LICENSE
README.md 1.2.1 - docs update, license, nav.css created, footer Feb 11, 2019
index.html website: fixed link bot nav note Feb 21, 2019
package-lock.json
package.json
standalone_ver.html initial commit Oct 12, 2018

README.md


Maintained? Last commit Version info

Simply Navigation

This is a dead simple lightweight navigation built with flexbox and vanilla JavaScript

Demo it here https://obscuredetour.github.io/simply-nav/

Read the Documentation for how to use and relevant information.

Version 1.2.0 delivers new features and a rewrite from the ground up! Read more here.

Features

  • No dependencies.
  • Fully responsive.
  • Built using Flexbox & vanilla JavaScript only.
  • Easy close mobile menu. Closable via the close X button and the right side page overlay.
  • Mobile menu closes when link is selected. Useful so the mobile user doesn't have to close the menu after choosing a link. Try by opening the mobile menu and click on the 'Last Section'.
  • Menu button animates to a close 'X' button. Thanks animated-burgers
  • Mobile menu scrollable (if its content goes beyond the screen). Page and body are not scrollable.
  • Rewritten using SCSS with RCSS guidelines.

Customizable

  • Breakpoint variable - default at 800px.
  • Sticky navigation bar available.
    • To enable a fixed nav bar, add class -sticky to the nav-wrapper element.
  • Traditional or offset hamburger menu icons.
    • For traditional menu button, remove the -offset class from the burger element.
  • Bottom mobile nav bar option.
    • To enable the bottom mobile nav bar, add classes -bottom & -sticky to the nav-wrapper element.

How to use

Clone or download the repository to build a static website. Or alternatively insert the respective files into your project.

  • simply-nav.js - has all necessary JS functions
    • File can be placed into your project or the anonymous function inside can be pasted into an existing JS file or <script> tag within an HTML file.
  • nav.css - has all necessary CSS styles for the navigation
    • File can be placed into your project or pasted into an existing CSS file or <style> tag within an HTML file.
  • Markup structure can be found in index.html
    • The nav-wrapper element contains all necessary markup for Simply Navigation to function.
  • Standalone HTML file will be making a comeback in a future version.

Sass files provide for best customizability.

You can’t perform that action at this time.