日本語

How to use & FAQ

Using the Hamburger Menu CSS Gallery, and answers to common questions

🖱️ Getting started

  1. Use the tabs at the top to switch between Icon morph (60) and Open / close (30)
  2. Click the hamburger button inside a card to play the animation. Click again to close it
  3. Narrow things down with the category chips — classic, spin, slide, arrows & signs, frame & fill, advanced for icons; drawer, fullscreen, item reveal, dropdown, advanced for open patterns
  4. When you find one you like, hit HTML+CSS+JS to copy it. Clicking a card shows the full code in the sidebar
  5. Change the accent and secondary colors in the sidebar — the preview and the copied code both update, and your choice is saved
  6. Left too many cards open? Use Close every open menu to reset them all at once

🧩 Dropping it into an existing site

  1. Move the contents of the copied <style> into your CSS file
  2. Move the contents of the copied <script> into your JS file (load it with defer, or just before </body>)
  3. Apply the same class names to the button and nav already in your header
  4. Replace the placeholder links (<a href="#">Home</a> and friends) with your real navigation

Always start the button at aria-expanded="false". That attribute doubles as the CSS selector and as the announcement to assistive technology, so leaving it out means the menu starts in the open state.

<button class="hb-cross" aria-label="Menu" aria-expanded="false">
  <span></span><span></span><span></span>
</button>

📐 Combining an icon with an open pattern

The two tabs give you separate snippets, but they are designed to be mixed. Swap the button styles of an open pattern (the ◯◯__btn rules) for the icon morph you prefer.

  1. Copy the open pattern you want first
  2. Copy an icon morph, then use its span rules to override the button part
  3. Keep the class name from the open pattern (◯◯__btn)

❓ FAQ

Q. How do I use the copied code?
A. You get a set of three things: CSS wrapped in a <style> tag, the HTML, and three lines of JavaScript that handle the toggle. Paste it as-is first to confirm the animation, then move the <style> contents into your CSS file and the <script> contents into your JS file. On the HTML side, apply the same class names to the button and nav already in your header.
Q. Is JavaScript required?
A. Only three lines that flip aria-expanded between true and false. Every visual movement is pure CSS and no external library is loaded. A checkbox hack would remove the JavaScript entirely, but screen readers would no longer announce it as a button, so every effect here uses a real button element instead.
Q. Why use aria-expanded instead of toggling a class?
A. aria-expanded is the attribute that tells screen readers whether the menu is open. Using it as the CSS selector too means the state lives in exactly one place, so what assistive technology announces can never drift from what is on screen. There is no need for a separate is-open class.
Q. Can I match the colors to my own site?
A. Use the color settings in the sidebar to change the accent and secondary colors — both the preview and the copied code update. Your choice is saved in the browser for next time. Other values such as bar thickness and text color can be edited in the CSS after copying.
Q. Can I use the open/close patterns with position: fixed as they are?
A. Yes. In the gallery each demo appears to stay inside its card, but that is only because the demo frame has a transform, which makes it the reference for fixed positioning. The copied code keeps the real position: fixed for your site. Note that the same rule applies in reverse: if you place the menu inside a parent that has transform or filter, it will not cover the whole screen, so keep it high in the document, right under your header.
Q. Can I use these on commercial sites?
A. Yes. The copied code is free to use in personal and commercial projects, and no attribution is required.
Q. Are there browsers where some animations do not run?
A. Accordion height reveal animates grid-template-rows, the frosted glass drawer and glass button use backdrop-filter, and the circle reveal uses clip-path. All of these work in current Chrome, Edge, Safari and Firefox, but older browsers may skip the motion. Even then the menu still opens and closes, so nothing breaks functionally.

🔗 Related tools

← Back to the gallery