Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
May 14, 2015
src
May 14, 2015
Apr 7, 2015
May 14, 2015
May 14, 2015
Apr 4, 2015
May 14, 2015
May 14, 2015
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.