astro
astro copied to clipboard
cferdinandi
Mobile-first navigation patterns.
Astro 
A mobile-first navigation pattern, with an optional expand-and-collapse menu on small screens.
Download Astro / View the demo
Want to learn how to write your own vanilla JS plugins? Check out "The Vanilla JS Guidebook" and level-up as a web developer. 🚀
Getting Started
Compiled and production-ready code can be found in the dist directory. The src directory contains development code.
1. Include Astro on your site.
<link rel="stylesheet" href="dist/css/astro.css">
<script src="dist/js/astro.js"></script>
The optional expand-and-collapse menu on smaller screens requires astro.js. Basic versions can omit this file.
2. Add the markup to your HTML.
Make sure that the [data-nav-toggle] value matches the ID of the .nav-menu section. To activate expand-and-collapse functionality, add the .nav-collapse class to the .nav-wrap element.
<nav class="nav-wrap nav-collapse">
<a class="logo" href="#">My Brand</a>
<a class="nav-toggle" data-nav-toggle="#nav-menu" href="#">Menu</a>
<div class="nav-menu" id="nav-menu">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>
3. Initialize Astro.
If you're using the expand-and-collapse menu for smaller screens, initialize Astro in the footer of your page, after the content. And that's it, you're done. Nice work!
<script>
astro.init();
</script>
Installing with Package Managers
You can install Astro with your favorite package manager.
-
NPM:
npm install cferdinandi/astro -
Bower:
bower install https://github.com/cferdinandi/astro.git -
Component:
component install cferdinandi/astro
Working with the Source Files
If you would prefer, you can work with the development code in the src directory using the included Gulp build system. This compiles, lints, and minifies code.
Dependencies
Make sure these are installed first.
Quick Start
- In bash/terminal/command line,
cdinto your project directory. - Run
npm installto install required files. - When it's done installing, run one of the task runners to get going:
-
gulpmanually compiles files. -
gulp watchautomatically compiles files and applies changes using LiveReload.
-
Active Link Styling
There's a placeholder in the CSS to add styling to the current page in the navigation menu.
/* Placeholder for active link styling */
/* .nav > li.active > a { */
/* Add your styles here */
/* } */
Note: If you're using WordPress, check out this great tutorial by Todd Motto on how to add the .active class using a simple PHP function.
Options and Settings
Astro includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.
Global Settings
You can pass options and callbacks into Astro through the init() function:
astro.init({
selector: '[data-nav-toggle]', // Navigation toggle selector
toggleActiveClass: 'active', // Class added to active dropdown toggles on small screens
navActiveClass: 'active', // Class added to active dropdown content areas on small screens
initClass: 'js-astro', // Class added to `<html>` element when initiated
callback: function ( toggle, navID ) {} // Function that's run after a dropdown is toggled
});
Note: If you change the selector, you still need to include the [data-nav-toggle] attribute in order to pass in the selector for the navigation menu.
Use Astro events in your own scripts
You can also call Astro's navigation toggle event in your own scripts.
toggleNav()
Expand or collapse a navigation menu.
astro.toggleNav(
toggle, // Node that toggles the dropdown action. ex. document.querySelector('#toggle')
navID, // ID of the navigation content wrapper. ex. '#nav-menu'
options, // Classes and callbacks. Same options as those passed into the init() function.
event // Optional, if a DOM event was triggered.
);
Example
astro.toggleNav( null, '#nav-menu' );
destroy()
Destroy the current astro.init(). This is called automatically during the init function to remove any existing initializations.
astro.destroy();
Browser Compatibility
Astro works in all modern browsers, and IE 10 and above. You can extend browser support back to IE 9 with the classList.js polyfill.
Astro is built with modern JavaScript APIs, and uses progressive enhancement. If the JavaScript file fails to load, or if your site is viewed on older and less capable browsers, the Basic navigation patterns will be displayed instead of the Plus versions.
How to Contribute
In lieu of a formal style guide, take care to maintain the existing coding style. Please apply fixes to both the development and production code. Don't forget to update the version number, and when applicable, the documentation.
License
The code is available under the MIT License.
cferdinandi