Burger - The minimal hamburger menu with fullscreen navigation.
CSS JavaScript HTML
Latest commit 93d4e87 May 14, 2015 @mblode 2.0.2
Permalink
Failed to load latest commit information.
dist 2.0.2 May 14, 2015
src 2.0.2 May 14, 2015
.gitignore 1.3.0 Apr 7, 2015
.jshintrc 2.0.0 May 14, 2015
.scss-lint.yml 2.0.0 May 14, 2015
LICENSE.md Velocity Apr 4, 2015
README.md 2.0.1 May 14, 2015
bower.json 2.0.2 May 14, 2015
gulpfile.js Changes on changes May 14, 2015
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