https://github.com/center-key/hamburger-menu
☰ A responsive CSS solution ☰
https://github.com/center-key/hamburger-menu
css hamburger hamburger-menu menu mobile-first mobile-web responsive ui
Last synced: 3 months ago
JSON representation
☰ A responsive CSS solution ☰
- Host: GitHub
- URL: https://github.com/center-key/hamburger-menu
- Owner: center-key
- License: mit
- Created: 2016-10-13T05:24:35.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2026-01-23T08:43:07.000Z (5 months ago)
- Last Synced: 2026-01-24T01:28:11.588Z (5 months ago)
- Topics: css, hamburger, hamburger-menu, menu, mobile-first, mobile-web, responsive, ui
- Language: HTML
- Homepage: https://hamburger-menu.js.org
- Size: 438 KB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# ☰ HamburgerMenu ☰
_A responsive CSS solution_
[](https://github.com/center-key/hamburger-menu/blob/main/LICENSE.txt)
[](https://www.npmjs.com/package/hamburger-menu)
[](https://www.jsdelivr.com/package/npm/hamburger-menu)
[](https://github.com/center-key/hamburger-menu/actions/workflows/run-spec-on-push.yaml)
Hamburger button menus should be used with caution as they can impair user interaction.
As they say, *"Out of sight, out of mind"*.
When you do need a hamburger button menu, this solution uses CSS to replace the navigation menu
with a tappable hamburger icon on mobile devices or any browser with a sufficiently narrow screen.
Tapping the hamburger reveals the navigation menu with smooth CSS animation.
## A) Try It Out
Interactive example:
https://hamburger-menu.js.org
## B) Setup
Include the **HamburgerMenu** CSS and JavaScript:
```html
...
...
...
```
...or from the [jsDelivr CDN](https://www.jsdelivr.com/package/npm/hamburger-menu):
```html
...
...
...
```
...the **HamburgerMenu** files can be installed using **npm**:
```terminal
$ npm install hamburger-menu
```
## C) Usage
See the
[**x3000.html**](https://github.com/center-key/hamburger-menu/blob/main/spec/multipage/products/x3000.html)
test page for an example or follow the instructions below.
Insert the following HTML into your web page and modify the menu items (`
for your website:
```html
```
## D) Customize
Change the width and colors by adding the CSS below into your website and modifying it:
```css
/* HamburgerMenu ☰ Custom width and colors */
body {
padding-right: 50px; /* gutter on left and right sides of page */
padding-left: 200px; /* set to "padding-right" + "width"(aside) */
}
nav.hamburger-menu aside {
width: 150px; /* menu width */
}
nav.hamburger-menu {
color: gainsboro; /* menu font color */
background-color: teal; /* menu background color */
}
nav.hamburger-menu aside ul li.current {
border-color: white; /* border color for selected menu item */
}
nav.hamburger-menu aside ul li.current >span,
nav.hamburger-menu aside ul li.current >a,
nav.hamburger-menu aside ul li >span:hover,
nav.hamburger-menu aside ul li >a:hover {
color: white; /* menu font highlight color */
background-color: darkcyan; /* menu background highlight color */
}
```
## E) Highlight Menu Item for Current Page
**HamburgerMenu** automatically highlights the selected menu item.
Turn off automatic highlighting by *either*:
1. Not loading the `hamburger-menu.js` file
1. Adding the class `disable-auto-highlight` to the `` element
A menu item can be highlighted by adding the class `current` to the appropriate `
the HTML or programmatically after the page has been loaded.
Example of highlighting the menu item for "**Page 2**":
```html
```
**Note:**
To support old legacy web browsers, add a polyfill for
[URL](https://www.npmjs.com/package/url-polyfill)
to your website.
## F) hamburger-menu.js File is Optional
You can the `hamburger-menu.js` file by incorporating this one line of JavaScript in your website:
```javascript
document.addEventListener('click', () => {}); //workaround for sticky hover on mobile
```
## G) Issues
This library has been tested on iPhone and Android mobile devices.
If you encounter a bug or have a question, submit an
[issue](https://github.com/center-key/hamburger-menu/issues).
---
[MIT License](LICENSE.txt)