Simply Navigation

Lightweight simple navigation built with flexbox and vanilla JavaScript

Features

• No dependencies.
• Fully responsive.
• Built using Flexbox & vanilla JavaScript only.
• Mobile menu closes when a link is selected.
• Easy close mobile menu. Closable via 'X' and alt-side page overlay.
• Buttons & links made for mobile. Large footprint for optimal finger usage.
• Menu button animates to a close button 'X' (CSS only - thx march08)
• Mobile menu scrollable (if its content goes beyond the screen)
• Page and body are not scrollable (when mobile menu open).
• Written in SCSS.
• Written using RSCSS guidelines.
• Left & Right side layouts now supported.
• ARIA/Accessibility updates, keyboard navigation.

Features

Customizable

• Breakpoint variable - default at 800px
• Sticky (fixed) navigation bar available. See below.
• Traditional or offset hamburger menu icons. See below
• Bottom mobile nav bar for the bold! See below

Sticky (fixed) navigation

To enable a fixed nav bar, add class -sticky to the nav-main element.

Note: Sticky navigation bar requires padding and/or margin on the parent or adjacent element. For example, on this page the adjacent main HTML element has a top padding of 6.5rem (nav height is 4.5rem).

Menu icon

To enable the traditional menu icon, remove class -offset from the burger element.

Bottom mobile nav bar

To enable the bottom mobile nav bar, add class -bottom on the nav-main element.

Note: Bottom mobile nav bar requires a sticky navigation bar. To enable a fixed nav bar, add class -sticky to the nav-main element. See the Sticky navigation section for additional info.

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 JavaScript 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-main element contains all necessary markup for Simply Navigation to function.
• Standalone HTML file will be making a comeback in a future version.

Example Link

This is an example that demonstrates an anchor link on the same page. The mobile menu closes when this link is chosen. This provides a more seamless experience for the user without requiring them to close the mobile menu after choosing a link.