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
Demo on Codepen
Screenshots
Quick Start
Several quick start options are available:
- Install with Bower:
bower install 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.
- Change directory:
cd burger
. - Install node modules:
npm install
. - Install scss-lint Ruby gem:
gem install scss-lint
. - To run gulp server:
gulp
. - 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
.
- Checkout in to gh-pages:
git checkout gh-pages
. - Install burger dependency:
bower install
. - Run jekyll:
jekyll serve
. - 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