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 delivered tons of new features and a rewrite from the ground up!
Version 1.3.0 release introduces Left & Right side layout support and Accessibility updates. Read more here.
- No dependencies.
- Fully responsive.
- Built using Flexbox & vanilla JavaScript only.
- Easy close mobile menu. Closable via the close X button and the alt-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 selecting 'Example'.
- 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.
- Breakpoint variable - default at 800px.
- Sticky navigation bar available.
- To enable a fixed nav bar, add class
-sticky
to thenav-main
element.
- To enable a fixed nav bar, add class
- Traditional or offset hamburger menu icons.
- For traditional menu button, remove the
-offset
class from theburger
element.
- For traditional menu button, remove the
- Bottom mobile nav bar option.
- To enable the bottom mobile nav bar, add classes
-bottom
&-sticky
to thenav-main
element.
- To enable the bottom mobile nav bar, add classes
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.
- File can be placed into your project or the anonymous function inside can be pasted into an existing JS file or
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.
- File can be placed into your project or pasted into an existing CSS file or
- Markup structure can be found in
index.html
- The
nav-main
element contains all necessary markup for Simply Navigation to function.
- The
- Standalone HTML file will be making a comeback in a future version.
Sass files provide for best customizability.
Tested on the latest 2 versions of the following browsers:
Firefox, Chrome, Edge, Safari
Android - Chrome, Firefox iOS - Safari