Skip to content

Instantly share code, notes, and snippets.

@janbiasi
Created November 30, 2020 18:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save janbiasi/5ddda985ede72311776f853203c00e1e to your computer and use it in GitHub Desktop.
Save janbiasi/5ddda985ede72311776f853203c00e1e to your computer and use it in GitHub Desktop.
Simple snippet for creating a mobile navigation with pure vanilla JavaScript
// Replace this with your burger icon element ID
var trigger = document.getElementById('mobile-navigation-trigger');
// Replace this with with your navigation element ID
var navigationList = document.getElementById('navigation-list');
// open or close the mobile flyout
function toggleNavigation() {
if (navigationList.classList.contains('is-open')) {
navigationList.classList.remove('is-open');
} else {
navigationList.classList.add('is-open');
}
}
// attach the main event listener to the icon
function initMobileNavigation() {
trigger.addEventListener('click', toggleNavigation.bind(this));
}
// initialise once the document is loaded
document.addEventListener('DOMContentLoaded', initMobileNavigation.bind(this));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment