Skip to content

Instantly share code, notes, and snippets.

@jamiebergen
Last active May 29, 2018 04:09
Show Gist options
  • Save jamiebergen/d08164cbf17671732782fd4e807599a3 to your computer and use it in GitHub Desktop.
Save jamiebergen/d08164cbf17671732782fd4e807599a3 to your computer and use it in GitHub Desktop.
[Responsive, accessible menu with submenus] Based on responsive-nav.js
Original responsive menu:
https://github.com/viljamis/responsive-nav.js
Forked to allow for submenus with different class names
https://github.com/samikeijonen/responsive-nav.js/tree/dropdowns
-> See usage instructions
Demo: http://samikeijonen.github.io/responsive-nav.js/demos/multiple-levels/
More info: https://foxland.fi/accessible-multi-level-dropdown-navigation/
CSS Files:
* responsive-nav.css (from responsive-nav.js 1.0.39 by @viljamis)
* styles.css (from multiple-levels folder of forked version) - starting from line 121
Implementation:
-In header.php, modified the structure of the header nav menu using args in wp_nav_menu() to match the structure required for responsive-nav.js
-In functions.php, enqueued js/responsive-nav.js (forked version) and updated js/navigation.js to initialize the responsive-nav script
-In sass/navigation/_menus.scss, added CSS from files mentioned in previous section
-Updated CSS to match desired styling for the theme
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment