Skip to content

readme.md

Latest commit

 

History

History
25 lines (20 loc) · 1.17 KB

readme.md

File metadata and controls

25 lines (20 loc) · 1.17 KB

Atomic Menu

By Matt Shaw

A hamburger menu that doesn't need a breakpoint. The idea of Atomic Menu is that it'll only collapse to a hamburger when the screen width is too small to contain it.

How to set up

To use, your HTML needs to look something like this:

<nav class="atomicmenu atomicmenu-lighttheme">
    <div class="atomicmenu-container">
        <a class="atomicmenu-option" href="/" >How it Works</a> 
        <a class="atomicmenu-option" href="/" >Pricing</a> 
        <a class="atomicmenu-option" href="/" >About</a> 
        <a class="atomicmenu-option" href="/" >Careers</a> 
        <a class="atomicmenu-option" href="/" >Sign Up</a> 
    </div>
    <button class="atomicmenu-toggle">Menu</button>
</nav>
  • .atomicmenu needs to be applied to the outer container,
  • .atomicmenu-container needs to be applied to the menu
  • .atomicmenu-option needs to be applied to all the menu options
  • and .atomicmenu-toggle needs to be applied to your hamburger toggle
  • You also might need to use .atomicmenu-lighttheme or .atomicmenu-darktheme depending on the styling you want, but you may just want to set up your own custom styles.