├── .github └── FUNDING.yml ├── .gitignore ├── .jshintrc ├── .scss-lint.yml ├── LICENSE.md ├── README.md ├── bower.json ├── dist ├── css │ ├── burger.min.css │ └── burger.min.css.map ├── index.html ├── sass │ └── burger.scss └── scripts │ ├── bundle.js │ ├── bundle.min.js │ ├── bundle.min.js.map │ ├── burger.js │ ├── burger.min.js │ └── burger.min.js.map ├── gulpfile.js ├── package-lock.json ├── package.json └── src ├── index.html ├── sass └── burger.scss └── scripts └── burger.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [mblode] 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components 3 | .DS_Store 4 | _sass 5 | _site 6 | _layouts 7 | _includes 8 | .sass-cache 9 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | /* 3 | * ENVIRONMENTS 4 | * ================= 5 | */ 6 | 7 | // Define globals exposed by modern browsers. 8 | "browser": true, 9 | 10 | // Define globals exposed by jQuery. 11 | "jquery": true, 12 | 13 | // Define globals exposed by Node.js. 14 | "node": true, 15 | 16 | // Allow ES6. 17 | "esnext": true, 18 | 19 | /* 20 | * ENFORCING OPTIONS 21 | * ================= 22 | */ 23 | 24 | // Force all variable names to use either camelCase style or UPPER_CASE 25 | // with underscores. 26 | "camelcase": true, 27 | 28 | // Prohibit use of == and != in favor of === and !==. 29 | "eqeqeq": true, 30 | 31 | // Enforce tab width of 2 spaces. 32 | "indent": 2, 33 | 34 | // Prohibit use of a variable before it is defined. 35 | "latedef": true, 36 | 37 | // Require capitalized names for constructor functions. 38 | "newcap": true, 39 | 40 | // Enforce use of single quotation marks for strings. 41 | "quotmark": "single", 42 | 43 | // Enforce placing 'use strict' at the top function scope 44 | "strict": true, 45 | 46 | // Prohibit use of explicitly undeclared variables. 47 | "undef": true, 48 | 49 | // Warn when variables are defined but never used. 50 | "unused": true, 51 | 52 | /* 53 | * RELAXING OPTIONS 54 | * ================= 55 | */ 56 | 57 | // Suppress warnings about == null comparisons. 58 | "eqnull": true 59 | } 60 | -------------------------------------------------------------------------------- /.scss-lint.yml: -------------------------------------------------------------------------------- 1 | scss_files: "**/*.scss" 2 | 3 | linters: 4 | BangFormat: 5 | enabled: true 6 | space_before_bang: true 7 | space_after_bang: false 8 | 9 | BorderZero: 10 | enabled: true 11 | convention: zero # or `none` 12 | 13 | ColorKeyword: 14 | enabled: false 15 | 16 | ColorVariable: 17 | enabled: false 18 | 19 | Comment: 20 | enabled: true 21 | 22 | DebugStatement: 23 | enabled: true 24 | 25 | DeclarationOrder: 26 | enabled: true 27 | 28 | DuplicateProperty: 29 | enabled: true 30 | 31 | ElsePlacement: 32 | enabled: true 33 | style: same_line # or 'new_line' 34 | 35 | EmptyLineBetweenBlocks: 36 | enabled: true 37 | ignore_single_line_blocks: true 38 | 39 | EmptyRule: 40 | enabled: true 41 | 42 | FinalNewline: 43 | enabled: true 44 | present: true 45 | 46 | HexLength: 47 | enabled: true 48 | style: short # or 'long' 49 | 50 | HexNotation: 51 | enabled: true 52 | style: lowercase # or 'uppercase' 53 | 54 | HexValidation: 55 | enabled: true 56 | 57 | IdSelector: 58 | enabled: true 59 | 60 | ImportantRule: 61 | enabled: false 62 | 63 | ImportPath: 64 | enabled: true 65 | leading_underscore: false 66 | filename_extension: false 67 | 68 | Indentation: 69 | enabled: true 70 | allow_non_nested_indentation: false 71 | character: space # or 'tab' 72 | width: 2 73 | 74 | LeadingZero: 75 | enabled: true 76 | style: exclude_zero # or 'include_zero' 77 | 78 | MergeableSelector: 79 | enabled: true 80 | force_nesting: true 81 | 82 | NameFormat: 83 | enabled: true 84 | allow_leading_underscore: true 85 | convention: hyphenated_lowercase # or 'BEM', or a regex pattern 86 | 87 | NestingDepth: 88 | enabled: true 89 | max_depth: 3 90 | 91 | PlaceholderInExtend: 92 | enabled: true 93 | 94 | PropertyCount: 95 | enabled: false 96 | include_nested: false 97 | max_properties: 10 98 | 99 | PropertyUnits: 100 | enabled: true 101 | global: [ 102 | 'ch', 'em', 'ex', 'rem', # Font-relative lengths 103 | 'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths 104 | 'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths 105 | 'deg', 'grad', 'rad', 'turn', # Angle 106 | 'ms', 's', # Duration 107 | 'Hz', 'kHz', # Frequency 108 | 'dpi', 'dpcm', 'dppx', # Resolution 109 | '%', # Other 110 | ] 111 | properties: {} 112 | 113 | PropertySortOrder: 114 | enabled: true 115 | ignore_unspecified: false 116 | separate_groups: false 117 | 118 | PropertySpelling: 119 | enabled: true 120 | extra_properties: [] 121 | 122 | QualifyingElement: 123 | enabled: false 124 | allow_element_with_attribute: false 125 | allow_element_with_class: false 126 | allow_element_with_id: false 127 | 128 | SelectorDepth: 129 | enabled: true 130 | max_depth: 3 131 | 132 | SelectorFormat: 133 | enabled: true 134 | convention: hyphenated_BEM # or 'BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern 135 | 136 | Shorthand: 137 | enabled: true 138 | 139 | SingleLinePerProperty: 140 | enabled: true 141 | allow_single_line_rule_sets: true 142 | 143 | SingleLinePerSelector: 144 | enabled: true 145 | 146 | SpaceAfterComma: 147 | enabled: true 148 | 149 | SpaceAfterPropertyColon: 150 | enabled: true 151 | style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned' 152 | 153 | SpaceAfterPropertyName: 154 | enabled: true 155 | 156 | SpaceBeforeBrace: 157 | enabled: true 158 | style: space # or 'new_line' 159 | allow_single_line_padding: false 160 | 161 | SpaceBetweenParens: 162 | enabled: true 163 | spaces: 0 164 | 165 | StringQuotes: 166 | enabled: true 167 | style: single_quotes # or double_quotes 168 | 169 | TrailingSemicolon: 170 | enabled: true 171 | 172 | TrailingZero: 173 | enabled: false 174 | 175 | UnnecessaryMantissa: 176 | enabled: true 177 | 178 | UnnecessaryParentReference: 179 | enabled: true 180 | 181 | UrlFormat: 182 | enabled: true 183 | 184 | UrlQuotes: 185 | enabled: true 186 | 187 | VariableForProperty: 188 | enabled: false 189 | properties: [] 190 | 191 | VendorPrefix: 192 | enabled: true 193 | identifier_list: base 194 | additional_identifiers: [] 195 | excluded_identifiers: [] 196 | 197 | ZeroUnit: 198 | enabled: true 199 | 200 | Compass::*: 201 | enabled: false 202 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2023 Matthew Blode 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Burger 2 | 3 | Burger is a minimal hamburger menu with fullscreen navigation. It is created by mblode. 4 | 5 | This project officially requires zero external bower dependencies. Woo-hoo! 6 | 7 | ## [Demo on Codepen](http://codepen.io/mblode/pen/qEGWwB) 8 | 9 | ## Screenshots 10 | 11 | ![Burger: Closed](http://i.imgur.com/eElVkQI.png) 12 | 13 | ![Burger: Opened](http://i.imgur.com/tI0ZeNw.png) 14 | 15 | ## Quick Start 16 | 17 | Several quick start options are available: 18 | 19 | - Install with npm: `npm install the-burger` (recommended). 20 | - [Download the latest release](https://github.com/mblode/burger/archive/master.zip). 21 | - Clone the repo: `git clone https://github.com/mblode/burger.git`. 22 | 23 | if you have cloned the repo or downloaded from .zip, there are a few steps you must take within the terminal. 24 | 25 | 1. Change directory: `cd burger`. 26 | 2. Install node modules: `npm install`. 27 | 3. Install scss-lint Ruby gem: `gem install scss-lint`. 28 | 4. To run gulp server: `gulp`. 29 | 5. To run build process: `gulp build`. 30 | 31 | ## Running Github Pages 32 | 33 | The gh-pages branch is built using Jekyll and must therefore be install with `gem install jekyll`. 34 | 35 | 1. Checkout in to gh-pages: `git checkout gh-pages`. 36 | 2. Install burger dependency: `bower install`. 37 | 3. Run jekyll: `jekyll serve`. 38 | 4. Open in browser: `localhost:4000/burger/`. 39 | 40 | ## What's Included 41 | 42 | These are the files that are generated from `bower install burger` 43 | 44 | ``` 45 | . 46 | ├── README.md 47 | ├── bower.json 48 | └── dist 49 | ├── css 50 | │   ├── burger..min.css 51 | │   └── burger.min.css.map 52 | ├── index.html 53 | ├── scripts 54 | │   ├── burger.js 55 | │   ├── burger.min.js.map 56 | │   └── burger.min.js 57 | └── sass 58 | └── burger.scss 59 | ``` 60 | 61 | ## Documentation 62 | 63 | ### HTML Markup 64 | 65 | ``` 66 | 67 |
68 |
  • Home
    • 69 |
  • About
    • 70 |
  • Portfolio
    • 71 |
  • Contact
    • 72 |
    73 | 74 | 75 |
    76 |
    77 |
    78 |
    79 |
    80 |
    81 | 82 | 83 | Burger 84 |
    85 | ``` 86 | 87 | ## Browser Compatibility 88 | 89 | - Safari 6.1+ 90 | 91 | - IE 10+ 92 | - Firefox 29+ 93 | - Chrome 26+ 94 | - Opera 17+ 95 | 96 | ## Contributing to Burger 97 | 98 | Pull requests are the way to go. 99 | 100 | ## Creators 101 | 102 | **Matthew Blode** 103 | 104 | - 105 | - 106 | - 107 | 108 | ## License 109 | 110 | MIT © [Matthew Blode](http://mblode.github.io) 111 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "burger", 3 | "version": "2.0.2", 4 | "homepage": "https://github.com/mblode/burger", 5 | "authors": [ 6 | "mblode " 7 | ], 8 | "keywords": [ 9 | "burger", 10 | "mblode", 11 | "menu", 12 | "hamburger", 13 | "css", 14 | "jquery", 15 | "javascript", 16 | "navigation", 17 | "fullscreen" 18 | ], 19 | "main": [ 20 | "dist/css/burger.min.css", 21 | "dist/css/burger.css", 22 | "dist/scripts/burger.min.js", 23 | "dist/index.html", 24 | "dist/scss/burger.scss" 25 | ], 26 | "license": "MIT", 27 | "ignore": [ 28 | "**/.*", 29 | "node_modules", 30 | "bower_components", 31 | "test", 32 | "tests", 33 | "src", 34 | "gulpfile.js", 35 | "package.json" 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /dist/css/burger.min.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInLeft { 2 | 0% { 3 | transform: translate3d(-250px, 0, 0); 4 | visibility: visible; 5 | } 6 | 100% { 7 | transform: translate3d(0, 0, 0); 8 | } 9 | } 10 | @keyframes slideOutLeft { 11 | 0% { 12 | transform: translate3d(0, 0, 0); 13 | } 14 | 100% { 15 | transform: translate3d(-250px, 0, 0); 16 | visibility: hidden; 17 | } 18 | } 19 | * { 20 | box-sizing: border-box; 21 | } 22 | 23 | body:after { 24 | background: #2196f3; 25 | content: ""; 26 | height: 110%; 27 | visibility: hidden; 28 | left: 0; 29 | opacity: 0; 30 | overflow: hidden; 31 | padding: 0; 32 | position: absolute; 33 | top: 0; 34 | visibility: hidden; 35 | transition: all 0.4s ease; 36 | width: 100%; 37 | } 38 | body.open { 39 | overflow: hidden; 40 | } 41 | body.open:after { 42 | opacity: 1; 43 | visibility: visible; 44 | } 45 | 46 | .b-nav { 47 | position: absolute; 48 | z-index: 11; 49 | } 50 | .b-nav:not(.open) { 51 | visibility: hidden; 52 | } 53 | .b-nav li { 54 | color: white; 55 | list-style-type: none; 56 | padding: 10px; 57 | text-align: left; 58 | transform: translateX(-250px); 59 | } 60 | .b-nav li:not(.open) { 61 | animation-duration: 0.4s; 62 | animation-fill-mode: both; 63 | animation-name: slideOutLeft; 64 | } 65 | .b-nav li:first-child { 66 | padding-top: 120px; 67 | } 68 | .b-nav.open { 69 | visibility: visible; 70 | } 71 | .b-nav.open li { 72 | animation-duration: 0.4s; 73 | animation-fill-mode: both; 74 | animation-name: slideInLeft; 75 | } 76 | 77 | .b-link { 78 | background: transparent; 79 | border-left: rgba(255, 255, 255, 0) solid 2px; 80 | color: white; 81 | font-family: Helvetica-Neue, Helvetica, Arial, sans-serif; 82 | font-size: 24px; 83 | font-weight: 300; 84 | margin-left: 30px; 85 | -webkit-text-decoration: none; 86 | text-decoration: none; 87 | transition: all 0.4s ease; 88 | width: auto; 89 | } 90 | .b-link:hover, .b-link--active { 91 | border-left: white solid 2px; 92 | padding-left: 30px; 93 | } 94 | 95 | .b-menu { 96 | background: #2196f3; 97 | border: #2196f3 solid 2px; 98 | border-radius: 50%; 99 | cursor: pointer; 100 | display: inline-block; 101 | height: 60px; 102 | padding-left: 15.5px; 103 | padding-top: 17.5px; 104 | position: relative; 105 | transition: all 0.4s ease; 106 | -webkit-user-select: none; 107 | -moz-user-select: none; 108 | user-select: none; 109 | width: 60px; 110 | z-index: 12; 111 | } 112 | .b-menu:hover { 113 | border: white solid 2px; 114 | } 115 | 116 | .b-bun { 117 | background: white; 118 | position: relative; 119 | transition: all 0.4s ease; 120 | } 121 | .b-bun--top { 122 | height: 2px; 123 | top: 0; 124 | width: 25px; 125 | } 126 | .b-bun--mid { 127 | height: 2px; 128 | top: 8px; 129 | width: 25px; 130 | } 131 | .b-bun--bottom { 132 | height: 2px; 133 | top: 16px; 134 | width: 25px; 135 | } 136 | 137 | .b-brand { 138 | color: #2196f3; 139 | font-family: Helvetica-Neue, Helvetica, Arial, sans-serif; 140 | font-size: 24px; 141 | font-weight: 300; 142 | margin-left: 30px; 143 | position: relative; 144 | -webkit-text-decoration: none; 145 | text-decoration: none; 146 | top: -21.4285714286px; 147 | transition: all 0.4s ease; 148 | z-index: 13; 149 | } 150 | 151 | .b-container { 152 | height: 60px; 153 | left: 30px; 154 | position: absolute; 155 | top: 30px; 156 | } 157 | .b-container:hover:not(.open) .bun-top, 158 | .b-container:hover:not(.open) .bun-mid, 159 | .b-container:hover:not(.open) .bun-bottom { 160 | background: #2196f3; 161 | } 162 | .b-container.open .b-main { 163 | border: white solid 2px; 164 | } 165 | .b-container.open .b-bun--top { 166 | background: white; 167 | top: 9px; 168 | transform: rotate(45deg); 169 | } 170 | .b-container.open .b-bun--mid { 171 | opacity: 0; 172 | } 173 | .b-container.open .b-bun--bottom { 174 | background: white; 175 | top: 5px; 176 | transform: rotate(-45deg); 177 | } 178 | .b-container.open .b-brand { 179 | color: white; 180 | } 181 | /*# sourceMappingURL=burger.min.css.map */ 182 | -------------------------------------------------------------------------------- /dist/css/burger.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["burger.scss","burger.css"],"names":[],"mappings":"AAoCA;EACE;IACE,oCAAA;IACA,mBAAA;ECnCF;EDsCA;IACE,+BAAA;ECpCF;AACF;ADuCA;EACE;IACE,+BAAA;ECrCF;EDwCA;IACE,oCAAA;IACA,kBAAA;ECtCF;AACF;ADyCA;EACE,sBAAA;ACvCF;;AD2CE;EACE,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,OAAA;EACA,UAAA;EACA,gBAAA;EACA,UAAA;EACA,kBAAA;EACA,MAAA;EACA,kBAAA;EACA,yBApDW;EAqDX,WAAA;ACxCJ;AD2CE;EACE,gBAAA;ACzCJ;AD4CE;EACE,UAAA;EACA,mBAAA;AC1CJ;;AD8CA;EACE,kBAAA;EACA,WAAA;AC3CF;AD6CE;EACE,kBAAA;AC3CJ;AD8CE;EACE,YAAA;EACA,qBAAA;EACA,aAAA;EACA,gBAAA;EACA,6BAAA;AC5CJ;AD+CE;EACE,wBApFY;EAqFZ,yBAAA;EACA,4BAAA;AC7CJ;ADgDE;EACE,kBAjFY;ACmChB;ADiDE;EACE,mBAAA;AC/CJ;ADiDI;EACE,wBAjGU;EAkGV,yBAAA;EACA,2BAAA;AC/CN;;ADoDA;EACE,uBAAA;EACA,6CAAA;EACA,YAAA;EACA,yDAxGc;EAyGd,eA1GY;EA2GZ,gBAzGc;EA0Gd,iBArHc;EAsHd,6BAAA;EAAA,qBAAA;EACA,yBAhHa;EAiHb,WAAA;ACjDF;ADmDE;EAEE,4BAAA;EACA,kBAjHQ;AC+DZ;;ADsDA;EACE,mBAAA;EACA,yBAAA;EACA,kBAhIgB;EAiIhB,eAAA;EACA,qBAAA;EACA,YAzIS;EA0IT,oBAvHW;EAwHX,mBAvHU;EAwHV,kBAAA;EACA,yBApIa;EAqIb,yBAAA;KAAA,sBAAA;UAAA,iBAAA;EACA,WA/IS;EAgJT,WAAA;ACnDF;ADqDE;EACE,uBAAA;ACnDJ;;ADuDA;EACE,iBAAA;EACA,kBAAA;EACA,yBAjJa;AC6Ff;ADsDE;EACE,WA1Ja;EA2Jb,MAAA;EACA,WA3JU;ACuGd;ADuDE;EACE,WAhKa;EAiKb,QAAA;EACA,WAjKU;AC4Gd;ADwDE;EACE,WAtKa;EAuKb,SAAA;EACA,WAvKU;ACiHd;;AD0DA;EACE,cAAA;EACA,yDArKc;EAsKd,eAvKY;EAwKZ,gBAtKc;EAuKd,iBAtKU;EAuKV,kBAAA;EACA,6BAAA;EAAA,qBAAA;EACA,qBAAA;EACA,yBA/Ka;EAgLb,WAAA;ACvDF;;AD0DA;EACE,YA7LS;EA8LT,UA5Lc;EA6Ld,kBAAA;EACA,SA/La;ACwIf;AD0DI;;;EAGE,mBAAA;ACxDN;AD6DI;EACE,uBAAA;AC3DN;AD8DI;EACE,iBAAA;EACA,QAAA;EACA,wBAAA;AC5DN;AD+DI;EACE,UAAA;AC7DN;ADgEI;EACE,iBAAA;EACA,QAAA;EACA,yBAAA;AC9DN;ADiEI;EACE,YAAA;AC/DN","file":"burger.min.css","sourcesContent":["$color-stack:\n (group: primary, id: normal, color: #2196f3),\n (group: complement, id: normal, color: #fff);\n\n@function color($group, $shade:normal, $transparency:1) {\n @each $color in $color-stack {\n $c-group: map-get($color, group);\n $c-shade: map-get($color, id);\n @if($group == map-get($color, group) and $shade == map-get($color, id)){\n @return rgba(map-get($color, color), $transparency);\n }\n }\n}\n\n$b-height: 60px; //Height (and width) of the burger menu\n$b-margin-top: 30px; //Burger menu margin (distance from top)\n$b-margin-left: 30px; //Burger menu margin (distance from left)\n$b-border-width: 2px; //Width of the borders and 'buns'\n$b-bun-width: 25px; //Width of the 'buns'\n$b-bun-height: $b-border-width; //Height of the 'buns'\n$b-border-radius: 50%; //Change the border radius of the menu\n\n$b-trans-speed: .4s; //Transition speed settings\n$b-transition: all $b-trans-speed ease; //Transitions\n\n$b-font-size: 24px; //Font size of brand and links\n$b-font-family: Helvetica-Neue, Helvetica, Arial, sans-serif; //Font family of the brand and links\n$b-font-weight: 300; //Font weight of brand and links\n$b-txt-pad: 30px; //Left padding on both brand and links\n\n$b-line-height: ($b-height / 2 - ($b-font-size / 2.8)); //Vertically centers brand to menu\n$b-txt-pad-top: ($b-margin-top + $b-height + $b-txt-pad); //Top margin for first link element\n$b-bun-width-half: ($b-bun-width / 2); //Half bun width used for calculation\n$b-pad-left: ($b-height / 2 - $b-bun-width-half - 2); //Horizontally centers bun in menu\n$b-pad-top: ($b-height / 2 - $b-bun-width-half); //Vertically centers bun in menu\n\n@keyframes slideInLeft {\n 0% {\n transform: translate3d(-250px, 0, 0);\n visibility: visible;\n }\n\n 100% {\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes slideOutLeft {\n 0% {\n transform: translate3d(0, 0, 0);\n }\n\n 100% {\n transform: translate3d(-250px, 0, 0);\n visibility: hidden;\n }\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n &:after {\n background: color(primary);\n content: '';\n height: 110%;\n visibility: hidden;\n left: 0;\n opacity: 0;\n overflow: hidden;\n padding: 0;\n position: absolute;\n top: 0;\n visibility: hidden;\n transition: $b-transition;\n width: 100%;\n }\n\n &.open {\n overflow: hidden;\n }\n\n &.open:after {\n opacity: 1;\n visibility: visible;\n }\n}\n\n.b-nav {\n position: absolute;\n z-index: 11;\n\n &:not(.open) {\n visibility: hidden;\n }\n\n li {\n color: color(complement);\n list-style-type: none;\n padding: 10px;\n text-align: left;\n transform: translateX(-250px);\n }\n\n li:not(.open) {\n animation-duration: $b-trans-speed;\n animation-fill-mode: both;\n animation-name: slideOutLeft;\n }\n\n li:first-child {\n padding-top: $b-txt-pad-top;\n }\n\n &.open {\n visibility: visible;\n\n li {\n animation-duration: $b-trans-speed;\n animation-fill-mode: both;\n animation-name: slideInLeft;\n }\n }\n}\n\n.b-link {\n background: transparent;\n border-left: color(complement, normal, 0) solid $b-border-width;\n color: color(complement);\n font-family: $b-font-family;\n font-size: $b-font-size;\n font-weight: $b-font-weight;\n margin-left: $b-margin-left;\n text-decoration: none;\n transition: $b-transition;\n width: auto;\n\n &:hover,\n &--active {\n border-left: color(complement) solid $b-border-width;\n padding-left: $b-txt-pad;\n }\n}\n\n.b-menu {\n background: color(primary);\n border: color(primary) solid $b-border-width;\n border-radius: $b-border-radius;\n cursor: pointer;\n display: inline-block;\n height: $b-height;\n padding-left: $b-pad-left;\n padding-top: $b-pad-top;\n position: relative;\n transition: $b-transition;\n user-select: none;\n width: $b-height;\n z-index: 12;\n\n &:hover {\n border: color(complement) solid $b-border-width;\n }\n}\n\n.b-bun {\n background: color(complement);\n position: relative;\n transition: $b-transition;\n\n &--top {\n height: $b-bun-height;\n top: 0;\n width: $b-bun-width;\n }\n\n &--mid {\n height: $b-bun-height;\n top: 8px;\n width: $b-bun-width;\n }\n\n &--bottom {\n height: $b-bun-height;\n top: 16px;\n width: $b-bun-width;\n }\n}\n\n.b-brand {\n color: color(primary);\n font-family: $b-font-family;\n font-size: $b-font-size;\n font-weight: $b-font-weight;\n margin-left: $b-txt-pad;\n position: relative;\n text-decoration: none;\n top: -$b-line-height;\n transition: $b-transition;\n z-index: 13;\n}\n\n.b-container {\n height: $b-height;\n left: $b-margin-left;\n position: absolute;\n top: $b-margin-top;\n\n &:hover:not(.open) {\n .bun-top,\n .bun-mid,\n .bun-bottom {\n background: color(primary);\n }\n }\n\n &.open {\n .b-main {\n border: color(complement) solid $b-border-width;\n }\n\n .b-bun--top {\n background: color(complement);\n top: 9px;\n transform: rotate(45deg);\n }\n\n .b-bun--mid {\n opacity: 0;\n }\n\n .b-bun--bottom {\n background: color(complement);\n top: 5px;\n transform: rotate(-45deg);\n }\n\n .b-brand {\n color: color(complement);\n }\n }\n}\n","@keyframes slideInLeft {\n 0% {\n transform: translate3d(-250px, 0, 0);\n visibility: visible;\n }\n 100% {\n transform: translate3d(0, 0, 0);\n }\n}\n@keyframes slideOutLeft {\n 0% {\n transform: translate3d(0, 0, 0);\n }\n 100% {\n transform: translate3d(-250px, 0, 0);\n visibility: hidden;\n }\n}\n* {\n box-sizing: border-box;\n}\n\nbody:after {\n background: #2196f3;\n content: \"\";\n height: 110%;\n visibility: hidden;\n left: 0;\n opacity: 0;\n overflow: hidden;\n padding: 0;\n position: absolute;\n top: 0;\n visibility: hidden;\n transition: all 0.4s ease;\n width: 100%;\n}\nbody.open {\n overflow: hidden;\n}\nbody.open:after {\n opacity: 1;\n visibility: visible;\n}\n\n.b-nav {\n position: absolute;\n z-index: 11;\n}\n.b-nav:not(.open) {\n visibility: hidden;\n}\n.b-nav li {\n color: white;\n list-style-type: none;\n padding: 10px;\n text-align: left;\n transform: translateX(-250px);\n}\n.b-nav li:not(.open) {\n animation-duration: 0.4s;\n animation-fill-mode: both;\n animation-name: slideOutLeft;\n}\n.b-nav li:first-child {\n padding-top: 120px;\n}\n.b-nav.open {\n visibility: visible;\n}\n.b-nav.open li {\n animation-duration: 0.4s;\n animation-fill-mode: both;\n animation-name: slideInLeft;\n}\n\n.b-link {\n background: transparent;\n border-left: rgba(255, 255, 255, 0) solid 2px;\n color: white;\n font-family: Helvetica-Neue, Helvetica, Arial, sans-serif;\n font-size: 24px;\n font-weight: 300;\n margin-left: 30px;\n text-decoration: none;\n transition: all 0.4s ease;\n width: auto;\n}\n.b-link:hover, .b-link--active {\n border-left: white solid 2px;\n padding-left: 30px;\n}\n\n.b-menu {\n background: #2196f3;\n border: #2196f3 solid 2px;\n border-radius: 50%;\n cursor: pointer;\n display: inline-block;\n height: 60px;\n padding-left: 15.5px;\n padding-top: 17.5px;\n position: relative;\n transition: all 0.4s ease;\n user-select: none;\n width: 60px;\n z-index: 12;\n}\n.b-menu:hover {\n border: white solid 2px;\n}\n\n.b-bun {\n background: white;\n position: relative;\n transition: all 0.4s ease;\n}\n.b-bun--top {\n height: 2px;\n top: 0;\n width: 25px;\n}\n.b-bun--mid {\n height: 2px;\n top: 8px;\n width: 25px;\n}\n.b-bun--bottom {\n height: 2px;\n top: 16px;\n width: 25px;\n}\n\n.b-brand {\n color: #2196f3;\n font-family: Helvetica-Neue, Helvetica, Arial, sans-serif;\n font-size: 24px;\n font-weight: 300;\n margin-left: 30px;\n position: relative;\n text-decoration: none;\n top: -21.4285714286px;\n transition: all 0.4s ease;\n z-index: 13;\n}\n\n.b-container {\n height: 60px;\n left: 30px;\n position: absolute;\n top: 30px;\n}\n.b-container:hover:not(.open) .bun-top,\n.b-container:hover:not(.open) .bun-mid,\n.b-container:hover:not(.open) .bun-bottom {\n background: #2196f3;\n}\n.b-container.open .b-main {\n border: white solid 2px;\n}\n.b-container.open .b-bun--top {\n background: white;\n top: 9px;\n transform: rotate(45deg);\n}\n.b-container.open .b-bun--mid {\n opacity: 0;\n}\n.b-container.open .b-bun--bottom {\n background: white;\n top: 5px;\n transform: rotate(-45deg);\n}\n.b-container.open .b-brand {\n color: white;\n}"]} -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Burger 10 | 11 | 12 | 13 | 14 | 15 |
    16 |
  • Home
    • 17 |
  • About
    • 18 |
  • Portfolio
    • 19 |
  • Contact
    • 20 |
    21 | 22 | 23 |
    24 |
    25 |
    26 |
    27 |
    28 |
    29 | 30 | 31 | Burger 32 |
    33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /dist/sass/burger.scss: -------------------------------------------------------------------------------- 1 | $color-stack: 2 | (group: primary, id: normal, color: #2196f3), 3 | (group: complement, id: normal, color: #fff); 4 | 5 | @function color($group, $shade:normal, $transparency:1) { 6 | @each $color in $color-stack { 7 | $c-group: map-get($color, group); 8 | $c-shade: map-get($color, id); 9 | @if($group == map-get($color, group) and $shade == map-get($color, id)){ 10 | @return rgba(map-get($color, color), $transparency); 11 | } 12 | } 13 | } 14 | 15 | $b-height: 60px; //Height (and width) of the burger menu 16 | $b-margin-top: 30px; //Burger menu margin (distance from top) 17 | $b-margin-left: 30px; //Burger menu margin (distance from left) 18 | $b-border-width: 2px; //Width of the borders and 'buns' 19 | $b-bun-width: 25px; //Width of the 'buns' 20 | $b-bun-height: $b-border-width; //Height of the 'buns' 21 | $b-border-radius: 50%; //Change the border radius of the menu 22 | 23 | $b-trans-speed: .4s; //Transition speed settings 24 | $b-transition: all $b-trans-speed ease; //Transitions 25 | 26 | $b-font-size: 24px; //Font size of brand and links 27 | $b-font-family: Helvetica-Neue, Helvetica, Arial, sans-serif; //Font family of the brand and links 28 | $b-font-weight: 300; //Font weight of brand and links 29 | $b-txt-pad: 30px; //Left padding on both brand and links 30 | 31 | $b-line-height: ($b-height / 2 - ($b-font-size / 2.8)); //Vertically centers brand to menu 32 | $b-txt-pad-top: ($b-margin-top + $b-height + $b-txt-pad); //Top margin for first link element 33 | $b-bun-width-half: ($b-bun-width / 2); //Half bun width used for calculation 34 | $b-pad-left: ($b-height / 2 - $b-bun-width-half - 2); //Horizontally centers bun in menu 35 | $b-pad-top: ($b-height / 2 - $b-bun-width-half); //Vertically centers bun in menu 36 | 37 | @keyframes slideInLeft { 38 | 0% { 39 | transform: translate3d(-250px, 0, 0); 40 | visibility: visible; 41 | } 42 | 43 | 100% { 44 | transform: translate3d(0, 0, 0); 45 | } 46 | } 47 | 48 | @keyframes slideOutLeft { 49 | 0% { 50 | transform: translate3d(0, 0, 0); 51 | } 52 | 53 | 100% { 54 | transform: translate3d(-250px, 0, 0); 55 | visibility: hidden; 56 | } 57 | } 58 | 59 | * { 60 | box-sizing: border-box; 61 | } 62 | 63 | body { 64 | &:after { 65 | background: color(primary); 66 | content: ''; 67 | height: 100%; 68 | left: 0; 69 | opacity: 0; 70 | overflow: hidden; 71 | padding: 0; 72 | position: absolute; 73 | top: 0; 74 | visibility: hidden; 75 | transition: $b-transition; 76 | width: 100%; 77 | } 78 | 79 | &.open { 80 | overflow: hidden; 81 | } 82 | 83 | &.open:after { 84 | opacity: 1; 85 | visibility: visible; 86 | } 87 | } 88 | 89 | .b-nav { 90 | position: absolute; 91 | z-index: 11; 92 | 93 | &:not(.open) { 94 | visibility: hidden; 95 | } 96 | 97 | li { 98 | color: color(complement); 99 | list-style-type: none; 100 | padding: 10px; 101 | text-align: left; 102 | transform: translateX(-250px); 103 | } 104 | 105 | li:not(.open) { 106 | animation-duration: $b-trans-speed; 107 | animation-fill-mode: both; 108 | animation-name: slideOutLeft; 109 | } 110 | 111 | li:first-child { 112 | padding-top: $b-txt-pad-top; 113 | } 114 | 115 | &.open { 116 | visibility: visible; 117 | 118 | li { 119 | animation-duration: $b-trans-speed; 120 | animation-fill-mode: both; 121 | animation-name: slideInLeft; 122 | } 123 | } 124 | } 125 | 126 | .b-link { 127 | background: transparent; 128 | border-left: color(complement, normal, 0) solid $b-border-width; 129 | color: color(complement); 130 | font-family: $b-font-family; 131 | font-size: $b-font-size; 132 | font-weight: $b-font-weight; 133 | margin-left: $b-margin-left; 134 | text-decoration: none; 135 | transition: $b-transition; 136 | width: auto; 137 | 138 | &:hover, 139 | &--active { 140 | border-left: color(complement) solid $b-border-width; 141 | padding-left: $b-txt-pad; 142 | } 143 | } 144 | 145 | .b-menu { 146 | background: color(primary); 147 | border: color(primary) solid $b-border-width; 148 | border-radius: $b-border-radius; 149 | cursor: pointer; 150 | display: inline-block; 151 | height: $b-height; 152 | padding-left: $b-pad-left; 153 | padding-top: $b-pad-top; 154 | position: relative; 155 | transition: $b-transition; 156 | user-select: none; 157 | width: $b-height; 158 | z-index: 12; 159 | 160 | &:hover { 161 | border: color(complement) solid $b-border-width; 162 | } 163 | } 164 | 165 | .b-bun { 166 | background: color(complement); 167 | position: relative; 168 | transition: $b-transition; 169 | 170 | &--top { 171 | height: $b-bun-height; 172 | top: 0; 173 | width: $b-bun-width; 174 | } 175 | 176 | &--mid { 177 | height: $b-bun-height; 178 | top: 8px; 179 | width: $b-bun-width; 180 | } 181 | 182 | &--bottom { 183 | height: $b-bun-height; 184 | top: 16px; 185 | width: $b-bun-width; 186 | } 187 | } 188 | 189 | .b-brand { 190 | color: color(primary); 191 | font-family: $b-font-family; 192 | font-size: $b-font-size; 193 | font-weight: $b-font-weight; 194 | margin-left: $b-txt-pad; 195 | position: relative; 196 | text-decoration: none; 197 | top: -$b-line-height; 198 | transition: $b-transition; 199 | z-index: 13; 200 | } 201 | 202 | .b-container { 203 | height: $b-height; 204 | left: $b-margin-left; 205 | position: absolute; 206 | top: $b-margin-top; 207 | 208 | &:hover:not(.open) { 209 | .bun-top, 210 | .bun-mid, 211 | .bun-bottom { 212 | background: color(primary); 213 | } 214 | } 215 | 216 | &.open { 217 | .b-main { 218 | border: color(complement) solid $b-border-width; 219 | } 220 | 221 | .b-bun--top { 222 | background: color(complement); 223 | top: 9px; 224 | transform: rotate(45deg); 225 | } 226 | 227 | .b-bun--mid { 228 | opacity: 0; 229 | } 230 | 231 | .b-bun--bottom { 232 | background: color(complement); 233 | top: 5px; 234 | transform: rotate(-45deg); 235 | } 236 | 237 | .b-brand { 238 | color: color(complement); 239 | } 240 | } 241 | } 242 | -------------------------------------------------------------------------------- /dist/scripts/bundle.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var body = document.body; 5 | var burgerMenu = document.getElementsByClassName('b-menu')[0]; 6 | var burgerContain = document.getElementsByClassName('b-container')[0]; 7 | var burgerNav = document.getElementsByClassName('b-nav')[0]; 8 | 9 | burgerMenu.addEventListener('click', function toggleClasses() { 10 | [body, burgerContain, burgerNav].forEach(function (el) { 11 | el.classList.toggle('open'); 12 | }); 13 | }, false); 14 | })(); 15 | -------------------------------------------------------------------------------- /dist/scripts/bundle.min.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){var e=document.body,n=document.getElementsByClassName("b-menu")[0],t=document.getElementsByClassName("b-container")[0],s=document.getElementsByClassName("b-nav")[0];n.addEventListener("click",function(){[e,t,s].forEach(function(e){e.classList.toggle("open")})},!1)}(); 2 | //# sourceMappingURL=bundle.min.js.map 3 | -------------------------------------------------------------------------------- /dist/scripts/bundle.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["burger.js"],"names":["body","document","burgerMenu","getElementsByClassName","burgerContain","burgerNav","addEventListener","forEach","el","classList","toggle"],"mappings":"AAAA,aAEA,CAAA,WACA,IAAAA,EAAAC,SAAAD,KACAE,EAAAD,SAAAE,uBAAA,QAAA,EAAA,GACAC,EAAAH,SAAAE,uBAAA,aAAA,EAAA,GACAE,EAAAJ,SAAAE,uBAAA,OAAA,EAAA,GAEAD,EAAAI,iBAAA,QAAA,WACA,CAAAN,EAAAI,EAAAC,GAAAE,QAAA,SAAAC,GACAA,EAAAC,UAAAC,OAAA,MAAA,CACA,CAAA,CACA,EAAA,CAAA,CAAA,CACA,EAAA","file":"bundle.min.js","sourcesContent":["'use strict';\n\n(function() {\n var body = document.body;\n var burgerMenu = document.getElementsByClassName('b-menu')[0];\n var burgerContain = document.getElementsByClassName('b-container')[0];\n var burgerNav = document.getElementsByClassName('b-nav')[0];\n\n burgerMenu.addEventListener('click', function toggleClasses() {\n [body, burgerContain, burgerNav].forEach(function (el) {\n el.classList.toggle('open');\n });\n }, false);\n})();\n"]} -------------------------------------------------------------------------------- /dist/scripts/burger.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var body = document.body; 5 | var burgerMenu = document.getElementsByClassName('b-menu')[0]; 6 | var burgerContain = document.getElementsByClassName('b-container')[0]; 7 | var burgerNav = document.getElementsByClassName('b-nav')[0]; 8 | 9 | burgerMenu.addEventListener('click', function toggleClasses() { 10 | [body, burgerContain, burgerNav].forEach(function (el) { 11 | el.classList.toggle('open'); 12 | }); 13 | }, false); 14 | })(); 15 | -------------------------------------------------------------------------------- /dist/scripts/burger.min.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){var e=document.body,n=document.getElementsByClassName("b-menu")[0],t=document.getElementsByClassName("b-container")[0],s=document.getElementsByClassName("b-nav")[0];n.addEventListener("click",function(){[e,t,s].forEach(function(e){e.classList.toggle("open")})},!1)}(); 2 | //# sourceMappingURL=burger.min.js.map -------------------------------------------------------------------------------- /dist/scripts/burger.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["burger.js"],"names":["body","document","burgerMenu","getElementsByClassName","burgerContain","burgerNav","addEventListener","forEach","el","classList","toggle"],"mappings":"AAAA,cAEA,WACA,GAAAA,GAAAC,SAAAD,KACAE,EAAAD,SAAAE,uBAAA,UAAA,GACAC,EAAAH,SAAAE,uBAAA,eAAA,GACAE,EAAAJ,SAAAE,uBAAA,SAAA,EAEAD,GAAAI,iBAAA,QAAA,YACAN,EAAAI,EAAAC,GAAAE,QAAA,SAAAC,GACAA,EAAAC,UAAAC,OAAA,YAEA","file":"burger.min.js","sourcesContent":["'use strict';\n\n(function() {\n var body = document.body;\n var burgerMenu = document.getElementsByClassName('b-menu')[0];\n var burgerContain = document.getElementsByClassName('b-container')[0];\n var burgerNav = document.getElementsByClassName('b-nav')[0];\n\n burgerMenu.addEventListener('click', function toggleClasses() {\n [body, burgerContain, burgerNav].forEach(function (el) {\n el.classList.toggle('open');\n });\n }, false);\n})();\n"],"sourceRoot":"/source/"} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const { src, dest, watch, series, parallel } = require('gulp'); 2 | const gulpLoadPlugins = require('gulp-load-plugins'); 3 | const browserSync = require('browser-sync').create(); 4 | const sass = require('gulp-sass')(require('sass')); 5 | const postcss = require('gulp-postcss'); 6 | const postcssPresetEnv = require('postcss-preset-env'); 7 | 8 | // Load all Gulp plugins into the variable g 9 | const g = gulpLoadPlugins(); 10 | 11 | // Styles Task 12 | function styles() { 13 | return src('src/sass/**/*.scss') 14 | .pipe(g.plumber({ 15 | errorHandler: function (error) { 16 | console.log(error.message); 17 | this.emit('end'); 18 | } 19 | })) 20 | .pipe(g.sourcemaps.init()) 21 | .pipe(sass().on('error', sass.logError)) 22 | // Use PostCSS with preset-env 23 | .pipe(postcss([ 24 | postcssPresetEnv(/* plugin options */) 25 | ])) 26 | .pipe(g.rename({ suffix: '.min' })) 27 | .pipe(g.sourcemaps.write('.')) 28 | .pipe(dest('dist/css/')) 29 | .pipe(browserSync.stream()); 30 | } 31 | 32 | // Scripts Task 33 | function scripts() { 34 | return src('src/scripts/**/*.js') 35 | .pipe(g.plumber({ 36 | errorHandler: function (error) { 37 | console.log(error.message); 38 | this.emit('end'); 39 | } 40 | })) 41 | .pipe(g.sourcemaps.init()) 42 | .pipe(g.concat('bundle.js')) 43 | .pipe(dest('dist/scripts/')) 44 | .pipe(g.rename({ suffix: '.min' })) 45 | .pipe(g.uglify()) 46 | .pipe(g.sourcemaps.write('.')) 47 | .pipe(dest('dist/scripts/')) 48 | .pipe(browserSync.stream()); 49 | } 50 | 51 | // HTML Task 52 | function html() { 53 | return src('src/*.html') 54 | .pipe(dest('dist/')) 55 | .pipe(browserSync.stream()); 56 | } 57 | 58 | // Browser Sync Task 59 | function serve() { 60 | browserSync.init({ 61 | server: { 62 | baseDir: './dist/' 63 | } 64 | }); 65 | } 66 | 67 | // Watch Task 68 | function watchFiles() { 69 | watch('src/sass/**/*.scss', styles); 70 | watch('src/scripts/**/*.js', scripts); 71 | watch('src/*.html', html); 72 | // Reloads the browser whenever HTML or JS files change 73 | watch('src/**/*.html').on('change', browserSync.reload); 74 | watch('src/scripts/**/*.js').on('change', browserSync.reload); 75 | } 76 | 77 | // Default Gulp Task 78 | exports.default = series( 79 | parallel(html, styles, scripts), 80 | parallel(serve, watchFiles) 81 | ); 82 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "the-burger", 3 | "version": "2.0.2", 4 | "description": "Burger is a minimal hamburger menu with fullscreen navigation.", 5 | "main": "", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "gulp": "gulp" 9 | }, 10 | "repository": "https://github.com/mblode/burger.git", 11 | "author": "Matthew Blode", 12 | "license": "MIT", 13 | "devDependencies": { 14 | "browser-sync": "^2.29.3", 15 | "gulp": "^4.0.2", 16 | "gulp-autoprefixer": "^9.0.0", 17 | "gulp-cache": "^1.1.3", 18 | "gulp-concat": "^2.6.1", 19 | "gulp-imagemin": "^9.0.0", 20 | "gulp-jshint": "^2.1.0", 21 | "gulp-load-plugins": "^2.0.8", 22 | "gulp-minify-css": "^1.1.1", 23 | "gulp-plumber": "^1.2.1", 24 | "gulp-postcss": "^9.0.1", 25 | "gulp-rename": "^2.0.0", 26 | "gulp-sass": "^5.1.0", 27 | "gulp-scss-lint": "^1.0.0", 28 | "gulp-sourcemaps": "^3.0.0", 29 | "gulp-uglify": "^3.0.2", 30 | "jshint-stylish": "^2.2.1", 31 | "postcss-preset-env": "^9.3.0", 32 | "sass": "^1.69.5" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Burger 10 | 11 | 12 | 13 | 14 | 15 |
    16 |
  • Home
    • 17 |
  • About
    • 18 |
  • Portfolio
    • 19 |
  • Contact
    • 20 |
    21 | 22 | 23 |
    24 |
    25 |
    26 |
    27 |
    28 |
    29 | 30 | 31 | Burger 32 |
    33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/sass/burger.scss: -------------------------------------------------------------------------------- 1 | $color-stack: 2 | (group: primary, id: normal, color: #2196f3), 3 | (group: complement, id: normal, color: #fff); 4 | 5 | @function color($group, $shade:normal, $transparency:1) { 6 | @each $color in $color-stack { 7 | $c-group: map-get($color, group); 8 | $c-shade: map-get($color, id); 9 | @if($group == map-get($color, group) and $shade == map-get($color, id)){ 10 | @return rgba(map-get($color, color), $transparency); 11 | } 12 | } 13 | } 14 | 15 | $b-height: 60px; //Height (and width) of the burger menu 16 | $b-margin-top: 30px; //Burger menu margin (distance from top) 17 | $b-margin-left: 30px; //Burger menu margin (distance from left) 18 | $b-border-width: 2px; //Width of the borders and 'buns' 19 | $b-bun-width: 25px; //Width of the 'buns' 20 | $b-bun-height: $b-border-width; //Height of the 'buns' 21 | $b-border-radius: 50%; //Change the border radius of the menu 22 | 23 | $b-trans-speed: .4s; //Transition speed settings 24 | $b-transition: all $b-trans-speed ease; //Transitions 25 | 26 | $b-font-size: 24px; //Font size of brand and links 27 | $b-font-family: Helvetica-Neue, Helvetica, Arial, sans-serif; //Font family of the brand and links 28 | $b-font-weight: 300; //Font weight of brand and links 29 | $b-txt-pad: 30px; //Left padding on both brand and links 30 | 31 | $b-line-height: ($b-height / 2 - ($b-font-size / 2.8)); //Vertically centers brand to menu 32 | $b-txt-pad-top: ($b-margin-top + $b-height + $b-txt-pad); //Top margin for first link element 33 | $b-bun-width-half: ($b-bun-width / 2); //Half bun width used for calculation 34 | $b-pad-left: ($b-height / 2 - $b-bun-width-half - 2); //Horizontally centers bun in menu 35 | $b-pad-top: ($b-height / 2 - $b-bun-width-half); //Vertically centers bun in menu 36 | 37 | @keyframes slideInLeft { 38 | 0% { 39 | transform: translate3d(-250px, 0, 0); 40 | visibility: visible; 41 | } 42 | 43 | 100% { 44 | transform: translate3d(0, 0, 0); 45 | } 46 | } 47 | 48 | @keyframes slideOutLeft { 49 | 0% { 50 | transform: translate3d(0, 0, 0); 51 | } 52 | 53 | 100% { 54 | transform: translate3d(-250px, 0, 0); 55 | visibility: hidden; 56 | } 57 | } 58 | 59 | * { 60 | box-sizing: border-box; 61 | } 62 | 63 | body { 64 | &:after { 65 | background: color(primary); 66 | content: ''; 67 | height: 110%; 68 | visibility: hidden; 69 | left: 0; 70 | opacity: 0; 71 | overflow: hidden; 72 | padding: 0; 73 | position: absolute; 74 | top: 0; 75 | visibility: hidden; 76 | transition: $b-transition; 77 | width: 100%; 78 | } 79 | 80 | &.open { 81 | overflow: hidden; 82 | } 83 | 84 | &.open:after { 85 | opacity: 1; 86 | visibility: visible; 87 | } 88 | } 89 | 90 | .b-nav { 91 | position: absolute; 92 | z-index: 11; 93 | 94 | &:not(.open) { 95 | visibility: hidden; 96 | } 97 | 98 | li { 99 | color: color(complement); 100 | list-style-type: none; 101 | padding: 10px; 102 | text-align: left; 103 | transform: translateX(-250px); 104 | } 105 | 106 | li:not(.open) { 107 | animation-duration: $b-trans-speed; 108 | animation-fill-mode: both; 109 | animation-name: slideOutLeft; 110 | } 111 | 112 | li:first-child { 113 | padding-top: $b-txt-pad-top; 114 | } 115 | 116 | &.open { 117 | visibility: visible; 118 | 119 | li { 120 | animation-duration: $b-trans-speed; 121 | animation-fill-mode: both; 122 | animation-name: slideInLeft; 123 | } 124 | } 125 | } 126 | 127 | .b-link { 128 | background: transparent; 129 | border-left: color(complement, normal, 0) solid $b-border-width; 130 | color: color(complement); 131 | font-family: $b-font-family; 132 | font-size: $b-font-size; 133 | font-weight: $b-font-weight; 134 | margin-left: $b-margin-left; 135 | text-decoration: none; 136 | transition: $b-transition; 137 | width: auto; 138 | 139 | &:hover, 140 | &--active { 141 | border-left: color(complement) solid $b-border-width; 142 | padding-left: $b-txt-pad; 143 | } 144 | } 145 | 146 | .b-menu { 147 | background: color(primary); 148 | border: color(primary) solid $b-border-width; 149 | border-radius: $b-border-radius; 150 | cursor: pointer; 151 | display: inline-block; 152 | height: $b-height; 153 | padding-left: $b-pad-left; 154 | padding-top: $b-pad-top; 155 | position: relative; 156 | transition: $b-transition; 157 | user-select: none; 158 | width: $b-height; 159 | z-index: 12; 160 | 161 | &:hover { 162 | border: color(complement) solid $b-border-width; 163 | } 164 | } 165 | 166 | .b-bun { 167 | background: color(complement); 168 | position: relative; 169 | transition: $b-transition; 170 | 171 | &--top { 172 | height: $b-bun-height; 173 | top: 0; 174 | width: $b-bun-width; 175 | } 176 | 177 | &--mid { 178 | height: $b-bun-height; 179 | top: 8px; 180 | width: $b-bun-width; 181 | } 182 | 183 | &--bottom { 184 | height: $b-bun-height; 185 | top: 16px; 186 | width: $b-bun-width; 187 | } 188 | } 189 | 190 | .b-brand { 191 | color: color(primary); 192 | font-family: $b-font-family; 193 | font-size: $b-font-size; 194 | font-weight: $b-font-weight; 195 | margin-left: $b-txt-pad; 196 | position: relative; 197 | text-decoration: none; 198 | top: -$b-line-height; 199 | transition: $b-transition; 200 | z-index: 13; 201 | } 202 | 203 | .b-container { 204 | height: $b-height; 205 | left: $b-margin-left; 206 | position: absolute; 207 | top: $b-margin-top; 208 | 209 | &:hover:not(.open) { 210 | .bun-top, 211 | .bun-mid, 212 | .bun-bottom { 213 | background: color(primary); 214 | } 215 | } 216 | 217 | &.open { 218 | .b-main { 219 | border: color(complement) solid $b-border-width; 220 | } 221 | 222 | .b-bun--top { 223 | background: color(complement); 224 | top: 9px; 225 | transform: rotate(45deg); 226 | } 227 | 228 | .b-bun--mid { 229 | opacity: 0; 230 | } 231 | 232 | .b-bun--bottom { 233 | background: color(complement); 234 | top: 5px; 235 | transform: rotate(-45deg); 236 | } 237 | 238 | .b-brand { 239 | color: color(complement); 240 | } 241 | } 242 | } 243 | -------------------------------------------------------------------------------- /src/scripts/burger.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function() { 4 | var body = document.body; 5 | var burgerMenu = document.getElementsByClassName('b-menu')[0]; 6 | var burgerContain = document.getElementsByClassName('b-container')[0]; 7 | var burgerNav = document.getElementsByClassName('b-nav')[0]; 8 | 9 | burgerMenu.addEventListener('click', function toggleClasses() { 10 | [body, burgerContain, burgerNav].forEach(function (el) { 11 | el.classList.toggle('open'); 12 | }); 13 | }, false); 14 | })(); 15 | --------------------------------------------------------------------------------