• Stars
    star
    827
  • Rank 53,611 (Top 2 %)
  • Language SCSS
  • License
    MIT License
  • Created about 9 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Burger - The minimal hamburger menu with fullscreen 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!

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

More Repositories

1

marx

The classless CSS reset (perfect for Communists).
CSS
1,674
star
2

vscode-zotero

Zotero Better Bibtex citations for VS Code
TypeScript
75
star
3

vscode-twig-language-2

VS Code extension with snippets, syntax highlighting, hover, and formatting for Twig.
JavaScript
57
star
4

vscode-twig-language

VS Code extension with snippets, syntax highlighting, hover, and formatting for Twig.
JavaScript
40
star
5

grav-theme-medium

Grav Medium Theme
SCSS
28
star
6

vscode-pretty-formatter

VS Code extension to format your files using Pretty Diff
TypeScript
26
star
7

blue-noise

Black and white image dithering using blue noise
Rust
11
star
8

svgplaceholder

A plugin which generates an invisible SVG of specific dimensions for use when lazyloading images in Craft CMS templates.
PHP
10
star
9

craft-next

JavaScript
8
star
10

alfred-trello

JavaScript
7
star
11

dotfiles

Shell
5
star
12

sprout-forms-tables

Custom tables field that integrates with Sprout Forms on Craft 3.
HTML
5
star
13

hn

Hacker News web app built using React and Redux
JavaScript
4
star
14

mblode.github.io

CSS
4
star
15

read-now

CSS
3
star
16

stark

Stark is a blazingly fast static site generator written in Rust
Rust
3
star
17

linkedin-feed-blocker

JavaScript
2
star
18

material-new-tab

A minimal new tab page for Chrome. Download it on the Chrome Web Store.
JavaScript
2
star
19

tavlin

HTML
1
star
20

roni

JavaScript
1
star
21

qr

QR code generator API
Rust
1
star
22

hayleylaurendesign

HTML
1
star
23

raycast-things

TypeScript
1
star
24

sharkdown

Markdown parser written in Rust
Rust
1
star
25

books

CSS
1
star
26

rsh

RSH is a minimal shell written in Rust
Rust
1
star
27

hydromonkeyzgarage

HTML
1
star
28

minestruck

HTML
1
star
29

rim

Minimal text editor written in Rust
Rust
1
star
30

raycast-quick-event

Create a calendar event using natural language in Raycast
TypeScript
1
star
31

raycast-google-search

TypeScript
1
star