Lil Regie's front-end workshop


Menu button

A button to toggle the visibility of the mobile menu.

Example

0 375 640 768 1024

Open in a new window

Code sample

1
2
3
<a href="#main_menu" data-action="toggle-menu#toggle" class="button_menu">
  Menu
</a>

Usage notes

  • This button triggers the main menu on mobile, but only when placed within the Site header strap

  • This element is usually contained within a <template> element.

  • This pattern uses a Sass abstract class since we use it in many disparate places. See the abstraction file below.

  • Relies on a progressively-enhancing script to initialise and invoke.

  • See Site header for more context

Source files