Skip to content
Burger - The minimal hamburger menu with fullscreen navigation.
CSS JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 2.0.2 May 14, 2015
src 2.0.2 May 14, 2015
.gitignore
.jshintrc
.scss-lint.yml
LICENSE.md Velocity Apr 4, 2015
README.md
bower.json
gulpfile.js
package.json 2.0.2 May 14, 2015

README.md

Burger

Burger is a minimal hamburger menu with fullscreen navigation. It is created by mblode.

This project officially requires zero external bower dependencies. Woo-hoo!

Burger in action

Burger Gif

Demo on Codepen

Screenshots

Burger: Closed

Burger: Opened

Quick Start

Several quick start options are available:

if you have cloned the repo or downloaded from .zip, there are a few steps you must take within the terminal.

  1. Change directory: cd burger.
  2. Install node modules: npm install.
  3. Install scss-lint Ruby gem: gem install scss-lint.
  4. To run gulp server: gulp.
  5. To run build process: gulp build.

Running Github Pages

The gh-pages branch is built using Jekyll and must therefore be install with gem install jekyll.

  1. Checkout in to gh-pages: git checkout gh-pages.
  2. Install burger dependency: bower install.
  3. Run jekyll: jekyll serve.
  4. Open in browser: localhost:4000/burger/.

What's Included

These are the files that are generated from bower install burger

.
├── README.md
├── bower.json
└── dist
    ├── css
    │   ├── burger..min.css
    │   └── burger.min.css.map
    ├── index.html
    ├── scripts
    │   ├── burger.js
    │   ├── burger.min.js.map
    │   └── burger.min.js
    └── sass
        └── burger.scss

Documentation

HTML Markup

  <!-- Navigation -->
  <div class="b-nav">
    <li><a class="b-link b-link--active" href="#">Home</a></li>
    <li><a class="b-link" href="#">About</a></li>
    <li><a class="b-link" href="#">Portfolio</a></li>
    <li><a class="b-link" href="#">Contact</a></li>
  </div>

  <!-- Burger-Icon -->
  <div class="b-container">
    <div class="b-menu">
      <div class="b-bun b-bun--top"></div>
      <div class="b-bun b-bun--mid"></div>
      <div class="b-bun b-bun--bottom"></div>
    </div>

    <!-- Burger-Brand -->
    <a href="#" class="b-brand">Burger</a>
  </div>

Browser Compatibility

  • Safari 6.1+
  • IE 10+
  • Firefox 29+
  • Chrome 26+
  • Opera 17+

Contributing to Burger

Pull requests are the way to go.

Creators

Matthew Blode

License

MIT © Matthew Blode

You can’t perform that action at this time.