Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

burger

Burger - The minimal hamburger menu with fullscreen navigation.

Subscribe to updates I use burger


Statistics on burger

Number of watchers on Github 824
Number of open issues 4
Average time to close an issue 2 days
Main language CSS
Average time to merge a PR about 9 hours
Open pull requests 3+
Closed pull requests 2+
Last commit over 4 years ago
Repo Created over 4 years ago
Repo Last Updated over 1 year ago
Size 1.03 MB
Homepage http://codepen.io...
Organization / Authormblode
Latest Releasev1.3.2
Contributors2
Page Updated
Do you use burger? Leave a review!
View open issues (4)
View burger activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating burger for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

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

burger open issues Ask a question     (View All Issues)
  • almost 4 years addEventListener Error
  • about 4 years Bug for Ipad and Iphone
burger open pull requests (View All Pulls)
  • ES2015ify the gulpfile.
  • Fix bower main files list
  • Update burger.scss
burger questions on Stackoverflow (View All Questions)
  • Toggling Burger Menu
  • JSF/PrimeFaces Extensions - page forward causing issues with bootsfaces burger menu
  • css and html-only burger menu not working
  • Bootstrap responsive burger menu not functioning on mobile device
  • I want to show menu, when I click burger menu on toolbar
  • animated burger icons for Multiple Bootstrap navbars
  • Floating burger menu over container block element
  • Making a CSS Animated Mobile Burger Menu
  • Menu burger animation toggle full page menu
  • Burger menu not centred properly
  • Navigation Drawer - DrawerLayout is not seen though burger animation works
  • Easiest way to have a bootstrap layout where the burger menu is always visible
  • Android burger/arrow icon dynamic change color
  • burger menu does not work in Bootstrap
  • burger menu not working second time on Safari
  • Bootstrap burger nav menu (full screen)
  • Animate bootstrap burger menu to cross
  • how to create Android Burger Button with options icon?
  • Icon and left arrow / burger with support action bar
  • Drawer icon (burger) moves Toolbar icon off center
  • Burger menu back to 3 links after menu item is clicked
  • Use Mobile menu (burger) on mobile and tablet sizes for a foundation 5 site
  • Burger menu does not load when opening viewcontroller from push
  • Burger Icon Not Completely Clickable
  • android appcompat v22 2 Global theme overrides toolbar theme for burger icon
  • ActionBarToggle burger to arrow not working
  • Android: do i need to setup Drawer "burger icon" onClickListener?
  • making a burger menu disappear on menu click
  • PHP compare 2 arrays (Mac donalds and Burger King)
  • Multiple navbars with burger menus on 1 page
burger list of languages used
More projects by mblode View all
Other projects in CSS