โ— PHANTOM
๐Ÿ‡ฎ๐Ÿ‡ณ IN
โœ•
Skip to content
/ burger Public

Burger - The minimal hamburger menu with fullscreen navigation.

License

Notifications You must be signed in to change notification settings

mblode/burger

Repository files navigation

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!

Screenshots

Burger: Closed

Burger: Opened

Quick Start

Several quick start options are available:

  • Install with npm: npm install the-burger (recommended).
  • Download the latest release.
  • Clone the repo: git clone https://github.com/mblode/burger.git.

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

About

Burger - The minimal hamburger menu with fullscreen navigation.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Contributors 3

  •  
  •  
  •