├── .gitignore ├── README.md ├── css ├── base.css ├── demo1.css └── demo2.css ├── favicon.ico ├── img ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── bg.jpg ├── bg1.jpg ├── bg2.jpg ├── bg3.jpg ├── bg4.jpg └── bg5.jpg ├── index.html ├── index2.html └── js ├── anime.min.js ├── demo.js ├── imagesloaded.pkgd.min.js ├── menu.js └── menu2.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Grid Menu 2 | 3 | A CSS Grid powered menu with a box look inspired by the effect seen in the [Ableton Live 10: What's New](https://www.youtube.com/watch?v=Z9Ku5ptjzKw) video. 4 | 5 | ![Grid Menu](https://tympanus.net/codrops/wp-content/uploads/2018/03/GridMenu_featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=34419) 8 | 9 | [Demo](http://tympanus.net/Development/GridMenu/) 10 | 11 | ## Credits 12 | 13 | - Images by [Unsplash.com](http://unsplash.com) 14 | - [anime.js](http://anime-js.com/) by Julian Garnier 15 | - [imagesLoaded](http://imagesloaded.desandro.com/) by Dave DeSandro 16 | 17 | ## License 18 | This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used. 19 | 20 | ## Misc 21 | 22 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/) 23 | 24 | 25 | [© Codrops 2018](http://www.codrops.com) 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} 2 | *, 3 | *::after, 4 | *::before { 5 | box-sizing: border-box; 6 | } 7 | 8 | html { 9 | background: #000; 10 | } 11 | 12 | body { 13 | min-height: 100vh; 14 | color: #57585c; 15 | color: var(--color-text); 16 | background: #fff; 17 | background: var(--color-bg); 18 | -webkit-font-smoothing: antialiased; 19 | -moz-osx-font-smoothing: grayscale; 20 | } 21 | 22 | /* Fade effect */ 23 | .js body { 24 | opacity: 0; 25 | transition: opacity 0.3s; 26 | } 27 | 28 | .js body.render { 29 | opacity: 1; 30 | } 31 | 32 | /* Page Loader */ 33 | .js .loading::before { 34 | content: ''; 35 | position: fixed; 36 | z-index: 100000; 37 | top: 0; 38 | left: 0; 39 | width: 100%; 40 | height: 100%; 41 | background: var(--color-bg); 42 | } 43 | 44 | .js .loading::after { 45 | content: ''; 46 | position: fixed; 47 | z-index: 100000; 48 | top: 50%; 49 | left: 50%; 50 | width: 60px; 51 | height: 60px; 52 | margin: -30px 0 0 -30px; 53 | pointer-events: none; 54 | border-radius: 50%; 55 | opacity: 0.4; 56 | background: var(--color-text); 57 | animation: loaderAnim 0.7s linear infinite alternate forwards; 58 | } 59 | 60 | @keyframes loaderAnim { 61 | to { 62 | opacity: 1; 63 | transform: scale3d(0.5,0.5,1); 64 | } 65 | } 66 | 67 | a { 68 | text-decoration: none; 69 | color: var(--color-link); 70 | outline: none; 71 | } 72 | 73 | a:hover, 74 | a:focus { 75 | color: var(--color-link-hover); 76 | outline: none; 77 | } 78 | 79 | button:focus { 80 | outline: none; 81 | } 82 | 83 | .hidden { 84 | position: absolute; 85 | overflow: hidden; 86 | width: 0; 87 | height: 0; 88 | pointer-events: none; 89 | } 90 | 91 | .content { 92 | flex-direction: column; 93 | height: auto; 94 | min-height: 0; 95 | } 96 | 97 | .content--fixed { 98 | position: relative; 99 | z-index: 1000; 100 | display: block; 101 | padding: 0.85em; 102 | } 103 | 104 | .codrops-header { 105 | flex-direction: column; 106 | align-items: center; 107 | } 108 | 109 | .codrops-header__title { 110 | font-weight: bold; 111 | padding-bottom: 0.25em; 112 | text-align: center; 113 | } 114 | 115 | .info { 116 | margin: 0; 117 | } 118 | 119 | .codrops-links { 120 | margin: 0; 121 | } 122 | 123 | .message { 124 | position: relative; 125 | z-index: 100; 126 | padding: 1em; 127 | text-align: center; 128 | color: var(--color-bg); 129 | background: var(--color-text); 130 | } 131 | 132 | /* Icons */ 133 | .icon { 134 | display: block; 135 | width: 1.5em; 136 | height: 1.5em; 137 | margin: 0 auto; 138 | fill: currentColor; 139 | } 140 | 141 | main { 142 | position: relative; 143 | width: 100%; 144 | } 145 | 146 | /* Header */ 147 | .codrops-header { 148 | position: relative; 149 | z-index: 100; 150 | display: flex; 151 | } 152 | 153 | .codrops-header__title { 154 | font-size: 1em; 155 | font-weight: bold; 156 | margin: 0; 157 | padding: 0.75em 0; 158 | } 159 | 160 | .info { 161 | color: var(--color-info); 162 | text-align: center; 163 | } 164 | 165 | /* Top Navigation Style */ 166 | .codrops-links { 167 | position: relative; 168 | display: flex; 169 | justify-content: center; 170 | text-align: center; 171 | white-space: nowrap; 172 | } 173 | 174 | .codrops-icon { 175 | display: inline-block; 176 | margin: 0.15em; 177 | padding: 0.25em; 178 | } 179 | 180 | .demos { 181 | text-align: center; 182 | line-height: 2; 183 | margin: 1rem 0 0 0; 184 | } 185 | 186 | .github { 187 | display: block; 188 | } 189 | 190 | .content { 191 | position: relative; 192 | display: flex; 193 | justify-content: center; 194 | align-items: center; 195 | } 196 | 197 | .content--switch { 198 | padding: 2.5rem 1rem; 199 | } 200 | 201 | .demo--current { 202 | opacity: 0.5; 203 | } 204 | 205 | @media screen and (min-width: 55em) { 206 | .message { 207 | display: none; 208 | } 209 | 210 | .codrops-header { 211 | flex-direction: row; 212 | align-items: flex-start; 213 | align-items: center; 214 | align-self: start; 215 | grid-area: header; 216 | justify-self: start; 217 | } 218 | 219 | .codrops-links { 220 | margin-right: 1rem; 221 | } 222 | 223 | .info { 224 | text-align: left; 225 | margin: 0 0 0 1.25em; 226 | } 227 | 228 | .content { 229 | margin: 0 auto; 230 | min-height: 100vh; 231 | } 232 | 233 | .js .content--switch { 234 | display: none; 235 | } 236 | 237 | .js .content--switch-current { 238 | display: flex; 239 | } 240 | 241 | .content--fixed { 242 | position: fixed; 243 | z-index: 10; 244 | top: 0; 245 | left: 0; 246 | display: grid; 247 | align-content: space-between; 248 | width: 100%; 249 | max-width: none; 250 | min-height: 0; 251 | height: 100vh; 252 | padding: 1.5em; 253 | pointer-events: none; 254 | grid-template-columns: 70% 30%; 255 | grid-template-rows: auto auto 4em; 256 | grid-template-areas: 'header ...' 257 | '... ...' 258 | 'menu demos'; 259 | } 260 | 261 | .content--fixed a { 262 | pointer-events: auto; 263 | } 264 | 265 | .demos { 266 | grid-area: demos; 267 | align-self: end; 268 | justify-self: end; 269 | display: flex; 270 | align-items: center; 271 | justify-content: center; 272 | margin: 0; 273 | } 274 | 275 | .demo:nth-child(2) { 276 | margin: 0 3rem 0 1.5rem; 277 | } 278 | } 279 | -------------------------------------------------------------------------------- /css/demo1.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,700'); 2 | 3 | .demo-1 { 4 | font-family: 'Josefin Sans', sans-serif; 5 | --color-text: #fff; 6 | --color-bg: #101010; 7 | --color-link: #f8d05d; 8 | --color-link-hover: #949494; 9 | --color-info: #f0f0f0; 10 | } 11 | 12 | .content__title { 13 | font-size: 2rem; 14 | margin: 0; 15 | } 16 | 17 | .content__date { 18 | font-size: 1rem; 19 | padding: 1rem 0; 20 | } 21 | 22 | .content__location { 23 | font-size: 1rem; 24 | } 25 | 26 | .content__text { 27 | max-width: 600px; 28 | font-size: 1.25rem; 29 | line-height: 1.4; 30 | text-align: center; 31 | } 32 | 33 | #content-2 { 34 | background-color: #383f4b; 35 | } 36 | 37 | #content-3 { 38 | background-color: #3d384b; 39 | } 40 | 41 | #content-4 { 42 | background-color: #4b384a; 43 | } 44 | 45 | #content-5 { 46 | background-color: #394b38; 47 | } 48 | 49 | #content-6 { 50 | background-color: #4b4238; 51 | } 52 | 53 | .menu-trigger { 54 | display: none; 55 | } 56 | 57 | .grim { 58 | display: none; 59 | } 60 | 61 | @media screen and (min-width: 55em) { 62 | .content__title { 63 | font-size: 8vw; 64 | } 65 | .content__date, 66 | .content__location { 67 | font-size: 1rem; 68 | } 69 | .menu-trigger { 70 | display: inline-block; 71 | background: none; 72 | border: 0; 73 | grid-area: menu; 74 | justify-self: start; 75 | align-self: end; 76 | cursor: pointer; 77 | pointer-events: auto; 78 | font-family: inherit; 79 | color: inherit; 80 | position: relative; 81 | padding: 0; 82 | white-space: nowrap; 83 | } 84 | 85 | .menu-trigger--close { 86 | align-self: center; 87 | } 88 | 89 | .grim { 90 | display: grid; 91 | position: fixed; 92 | z-index: 1000; 93 | bottom: 0; 94 | left: 0; 95 | width: 100%; 96 | height: 100vh; 97 | grid-template-columns: repeat(32,3.125vw); 98 | grid-template-rows: repeat(32,3.125vh); 99 | pointer-events: none; 100 | } 101 | 102 | .grim--open { 103 | pointer-events: auto; 104 | } 105 | 106 | .grim__item { 107 | position: relative; 108 | overflow: hidden; 109 | display: flex; 110 | justify-content: center; 111 | align-items: center; 112 | } 113 | 114 | .grim__item:first-child { 115 | grid-area: 31 / 1 / 33 / 2; 116 | } 117 | 118 | .grim__item:nth-child(2) { 119 | grid-area: 31 / 2 / 33 / 3; 120 | } 121 | 122 | .grim__item:nth-child(3) { 123 | grid-area: 29 / 1 / 31 / 3; 124 | } 125 | 126 | .grim__item:nth-child(4) { 127 | grid-area: 29 / 3 / 33 / 5; 128 | } 129 | 130 | .grim__item:nth-child(5) { 131 | grid-area: 25 / 1 / 29 / 5; 132 | } 133 | 134 | .grim__item:nth-child(6) { 135 | grid-area: 25 / 5 / 33 / 9; 136 | } 137 | 138 | .grim__item:nth-child(7) { 139 | grid-area: 17 / 1 / 25 / 9; 140 | } 141 | 142 | .grim__item:nth-child(8) { 143 | grid-area: 17 / 9 / 33 / 17; 144 | } 145 | 146 | .grim__item:nth-child(9) { 147 | grid-area: 1 / 1 / 17 / 17; 148 | } 149 | 150 | .grim__item:nth-child(10) { 151 | grid-area: 1 / 17 / 33 / 33; 152 | } 153 | 154 | .grim__item-bg { 155 | position: absolute; 156 | width: 100%; 157 | height: 100%; 158 | top: 0; 159 | left: 0; 160 | transform: scale3d(0,0,1); 161 | opacity: 0; 162 | box-shadow: 0 0 0 2px currentColor; 163 | background: currentColor; 164 | } 165 | 166 | .grim__item-bg--1 { color: #F8D05D; } 167 | .grim__item-bg--2 { color: #da3b35; } 168 | .grim__item-bg--3 { color: #302d29; } 169 | .grim__item-bg--4 { color: #4600f2; } 170 | .grim__item-bg--5 { color: #f8d15b; } 171 | .grim__item-bg--6 { color: #4CAF50; } 172 | .grim__item-bg--7 { color: #1bdde6; } 173 | .grim__item-bg--8 { color: #da3b35; } 174 | .grim__item-bg--9 { color: #4600f1; } 175 | .grim__item-bg--10 { color: #F8D05D; } 176 | 177 | .grim__item-content { 178 | position: relative; 179 | color: #fff; 180 | transition: color 0.3s; 181 | overflow: hidden; 182 | } 183 | 184 | .grim__item-content:hover, 185 | .grim__item-content:focus { 186 | opacity: 0.8; 187 | color: inherit; 188 | transition: opacity 0.3s; 189 | } 190 | 191 | .grim__item-inner { 192 | display: flex; 193 | flex-direction: column; 194 | justify-content: center; 195 | align-items: center; 196 | text-align: center; 197 | position: relative; 198 | opacity: 0; 199 | } 200 | 201 | .grim__item-title { 202 | font-weight: normal; 203 | margin: 0; 204 | font-size: 1.85rem; 205 | letter-spacing: 0.15rem; 206 | } 207 | 208 | .grim__item:nth-child(6) .grim__item-title { 209 | font-size: 2rem; 210 | } 211 | 212 | .grim__item:nth-child(7) .grim__item-title { 213 | font-size: 2.25rem; 214 | } 215 | 216 | .grim__item:nth-child(8) .grim__item-title { 217 | font-size: 2.45rem; 218 | } 219 | 220 | .grim__item:nth-child(9) .grim__item-title { 221 | font-size: 2.65rem; 222 | } 223 | 224 | .grim__item:nth-child(10) .grim__item-title { 225 | font-size: 3.85rem; 226 | } 227 | 228 | .grim__item-desc { 229 | font-size: 0.85rem; 230 | margin: 0.5rem 0 0 0; 231 | } 232 | 233 | .grim__item-desc::after { 234 | content: '...'; 235 | position: relative; 236 | display: block; 237 | font-size: 1.75rem; 238 | } 239 | } -------------------------------------------------------------------------------- /css/demo2.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,700|Playfair+Display'); 2 | 3 | .demo-2 { 4 | font-family: 'Josefin Sans', sans-serif; 5 | --color-text: #000; 6 | --color-bg: #9c9c9c; 7 | --color-link: #8958b1; 8 | --color-link-hover: #fff; 9 | --color-info: #000; 10 | } 11 | 12 | .content__title { 13 | font-family: 'Playfair Display', serif; 14 | font-size: 8vw; 15 | margin: 0; 16 | position: relative; 17 | font-weight: normal; 18 | } 19 | 20 | .content__subtitle { 21 | font-size: 1.45rem; 22 | padding: 1rem 0; 23 | letter-spacing: 2px; 24 | text-indent: 2px; 25 | } 26 | 27 | .content__subtitle::after { 28 | content: '\2014'; 29 | position: relative; 30 | display: block; 31 | font-size: 2.75rem; 32 | text-align: center; 33 | } 34 | 35 | .menu-trigger { 36 | display: none; 37 | } 38 | 39 | .grim { 40 | display: none; 41 | } 42 | 43 | .content--switch { 44 | background-size: cover; 45 | } 46 | 47 | .content--switch::after { 48 | content: ''; 49 | pointer-events: none; 50 | position: absolute; 51 | width: 100%; 52 | height: 20%; 53 | bottom: 0; 54 | background: linear-gradient(transparent, #000); 55 | } 56 | 57 | #content-1 { 58 | background-image: url(../img/bg.jpg); 59 | } 60 | 61 | #content-2 { 62 | background-image: url(../img/bg1.jpg); 63 | } 64 | 65 | #content-3 { 66 | background-image: url(../img/bg2.jpg); 67 | } 68 | 69 | #content-4 { 70 | background-image: url(../img/bg3.jpg); 71 | } 72 | 73 | #content-5 { 74 | background-image: url(../img/bg4.jpg); 75 | } 76 | 77 | #content-6 { 78 | background-image: url(../img/bg5.jpg); 79 | } 80 | 81 | @media screen and (min-width: 55em) { 82 | .menu-trigger { 83 | display: inline-block; 84 | background: none; 85 | border: 0; 86 | grid-area: menu; 87 | justify-self: start; 88 | align-self: end; 89 | cursor: pointer; 90 | pointer-events: auto; 91 | font-family: inherit; 92 | color: inherit; 93 | position: relative; 94 | padding: 0; 95 | color: #fff; 96 | white-space: nowrap; 97 | } 98 | 99 | .menu-trigger--close { 100 | color: #000; 101 | align-self: center; 102 | } 103 | 104 | .grim { 105 | display: grid; 106 | position: fixed; 107 | z-index: 1000; 108 | bottom: 0; 109 | left: 0; 110 | width: 100%; 111 | height: 100vh; 112 | grid-template-columns: repeat(32,3.125vw); 113 | grid-template-rows: repeat(32,3.125vh); 114 | pointer-events: none; 115 | } 116 | 117 | .grim--open { 118 | pointer-events: auto; 119 | } 120 | 121 | .grim__item { 122 | position: relative; 123 | overflow: hidden; 124 | display: flex; 125 | justify-content: center; 126 | align-items: center; 127 | } 128 | 129 | .grim__item:first-child { 130 | grid-area: 31 / 1 / 33 / 2; 131 | } 132 | 133 | .grim__item:nth-child(2) { 134 | grid-area: 31 / 2 / 33 / 3; 135 | } 136 | 137 | .grim__item:nth-child(3) { 138 | grid-area: 29 / 1 / 31 / 3; 139 | } 140 | 141 | .grim__item:nth-child(4) { 142 | grid-area: 29 / 3 / 33 / 5; 143 | } 144 | 145 | .grim__item:nth-child(5) { 146 | grid-area: 25 / 1 / 29 / 5; 147 | } 148 | 149 | .grim__item:nth-child(6) { 150 | grid-area: 25 / 5 / 33 / 9; 151 | } 152 | 153 | .grim__item:nth-child(7) { 154 | grid-area: 17 / 1 / 25 / 9; 155 | } 156 | 157 | .grim__item:nth-child(8) { 158 | grid-area: 17 / 9 / 33 / 17; 159 | } 160 | 161 | .grim__item:nth-child(9) { 162 | grid-area: 1 / 1 / 17 / 17; 163 | } 164 | 165 | .grim__item:nth-child(10) { 166 | grid-area: 1 / 17 / 33 / 33; 167 | } 168 | 169 | .grim__item-bg { 170 | position: absolute; 171 | width: 100%; 172 | height: 100%; 173 | top: 0; 174 | left: 0; 175 | opacity: 0; 176 | box-shadow: 0 0 0 2px currentColor; 177 | background: currentColor; 178 | } 179 | 180 | .grim__item-bg--1 { color: #f1d3b9; } 181 | .grim__item-bg--2 { color: #df9e98; } 182 | .grim__item-bg--3 { color: #fcfdff; } 183 | .grim__item-bg--4 { color: #9ed4d4; } 184 | .grim__item-bg--5 { color: #000; } 185 | 186 | .grim__item-bg--6 { color: #7296de; } 187 | .grim__item-bg--7 { color: #7c95b5; } 188 | .grim__item-bg--8 { color: #86bfbf; } 189 | .grim__item-bg--9 { color: #af9b9b; } 190 | .grim__item-bg--10 { color: #c57d76; } 191 | 192 | .grim__item-img { 193 | position: absolute; 194 | width: 100%; 195 | height: 100%; 196 | opacity: 0; 197 | background-repeat: no-repeat; 198 | background-size: 100% auto; 199 | background-position: 50% 100%; 200 | background-color: currentColor; 201 | } 202 | 203 | .grim__item-img--1 { color: #fcfdff; } 204 | .grim__item-img--2 { color: #a9bdd6; } 205 | .grim__item-img--3 { color: #9ed4d4; } 206 | .grim__item-img--4 { color: #d0bebe; } 207 | .grim__item-img--5 { color: #df9e98; } 208 | 209 | .grim__item-content { 210 | position: relative; 211 | color: #000; 212 | overflow: hidden; 213 | } 214 | 215 | .grim__item-content:hover, 216 | .grim__item-content:focus { 217 | opacity: 0.8; 218 | color: inherit; 219 | transition: opacity 0.3s; 220 | } 221 | 222 | .grim__item-inner { 223 | padding: 0 1rem; 224 | display: flex; 225 | flex-direction: column; 226 | justify-content: center; 227 | align-items: center; 228 | text-align: center; 229 | position: relative; 230 | opacity: 0; 231 | } 232 | 233 | .grim__item-title { 234 | font-weight: normal; 235 | margin: 0; 236 | font-size: 4vmax; 237 | font-family: 'Playfair Display', serif; 238 | } 239 | 240 | .grim__item:nth-child(-n+6) .grim__item-title { 241 | font-size: 2vmax; 242 | } 243 | 244 | .grim__item:nth-child(5) .grim__item-title { 245 | color: #fff; 246 | } 247 | 248 | .grim__item-desc { 249 | font-size: 0.85rem; 250 | margin: 0.5rem 0 0 0; 251 | } 252 | 253 | .grim__item-desc::after { 254 | content: '\2014'; 255 | position: relative; 256 | display: block; 257 | font-size: 1.75rem; 258 | } 259 | } -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridMenu/f1449f834aedf1d85c67e07ce57df77e12f13ded/favicon.ico -------------------------------------------------------------------------------- /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridMenu/f1449f834aedf1d85c67e07ce57df77e12f13ded/img/1.jpg -------------------------------------------------------------------------------- /img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridMenu/f1449f834aedf1d85c67e07ce57df77e12f13ded/img/2.jpg -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridMenu/f1449f834aedf1d85c67e07ce57df77e12f13ded/img/3.jpg -------------------------------------------------------------------------------- /img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridMenu/f1449f834aedf1d85c67e07ce57df77e12f13ded/img/4.jpg -------------------------------------------------------------------------------- /img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridMenu/f1449f834aedf1d85c67e07ce57df77e12f13ded/img/5.jpg -------------------------------------------------------------------------------- /img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridMenu/f1449f834aedf1d85c67e07ce57df77e12f13ded/img/bg.jpg -------------------------------------------------------------------------------- /img/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridMenu/f1449f834aedf1d85c67e07ce57df77e12f13ded/img/bg1.jpg -------------------------------------------------------------------------------- /img/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridMenu/f1449f834aedf1d85c67e07ce57df77e12f13ded/img/bg2.jpg -------------------------------------------------------------------------------- /img/bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridMenu/f1449f834aedf1d85c67e07ce57df77e12f13ded/img/bg3.jpg -------------------------------------------------------------------------------- /img/bg4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridMenu/f1449f834aedf1d85c67e07ce57df77e12f13ded/img/bg4.jpg -------------------------------------------------------------------------------- /img/bg5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridMenu/f1449f834aedf1d85c67e07ce57df77e12f13ded/img/bg5.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Grid Menu | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 26 |
27 |
To see the menu, please view on a larger screen.
28 |
29 |
30 |
31 | 32 | 33 |
34 |

Grid Menu

35 | Inspired by Ableton Live 10: What's New 36 |
37 | 42 | 43 |
44 |
45 |

Dev Event

46 |
22 - 28 August 2018
47 |
Blackpool, UK
48 |
49 |
50 |

Venue

51 |

Synchronising customer experience and possibly increase viewability. Driving bleeding edge with the aim to make users into advocates. Generating below the line so that as an end result, we increase viewability. Executing thought leadership and try to improve overall outcomes. Growing below the fold so that we create actionable insights. Considering responsive websites yet make users into advocates.

52 |
53 |
54 |

Sponsors

55 |

Informing vertical integration while remembering to funnel users. Take thought leadership with the possibility to surprise and delight. Target analytics to in turn infiltrate new markets. Demonstrate audience segments so that as an end result, we think outside the box. Create analytics in order to make the logo bigger.

56 |
57 |
58 |

Speakers

59 |

Utilising growth hacking in order to get buy in. Repurposing stakeholder management while remembering to re-target key demographics. Grow vertical integration to, consequently, create synergy. Synchronising custom solutions with the aim to gain traction. Amplifying branding to, consequently, re-target key demographics.

60 |
61 |
62 |

Tickets

63 |

Leverage outside the box thinking to in turn re-target key demographics. Build empathy maps with the possibility to re-target key demographics. Informing key demographics yet make users into advocates. Leveraging customer journeys and above all, maximise share of voice. Amplifying awareness with a goal to re-target key demographics.

64 |
65 |
66 |

Schedule

67 |

Amplifying below the fold in order to think outside the box. Leveraging innovation and above all, build ROI. Synchronise responsive websites but disrupt the balance. Synchronise innovation to, consequently, funnel users. Create above the fold in order to be on brand. Amplify awareness with a goal to infiltrate new markets.

68 |
69 | 141 |
142 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Grid Menu | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 26 |
27 |
To see the menu, please view on a larger screen.
28 |
29 |
30 |
31 | 32 | 33 |
34 |

Grid Menu

35 | Inspired by Ableton Live 10: What's New 36 |
37 | 42 | 43 |
44 |
45 |

Escape

46 |
explore nature
47 |
48 |
49 |

Beach

50 |
Lift your spirits
51 |
52 |
53 |

Desert

54 |
Find yourself
55 |
56 |
57 |

Ocean

58 |
Uncover beauty
59 |
60 |
61 |

Jungle

62 |
Feel nature
63 |
64 |
65 |

Mountains

66 |
Explore your limits
67 |
68 | 150 |
151 | 152 | 153 | 154 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /js/anime.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | 2017 Julian Garnier 3 | Released under the MIT license 4 | */ 5 | var $jscomp={scope:{}};$jscomp.defineProperty="function"==typeof Object.defineProperties?Object.defineProperty:function(e,r,p){if(p.get||p.set)throw new TypeError("ES3 does not support getters and setters.");e!=Array.prototype&&e!=Object.prototype&&(e[r]=p.value)};$jscomp.getGlobal=function(e){return"undefined"!=typeof window&&window===e?e:"undefined"!=typeof global&&null!=global?global:e};$jscomp.global=$jscomp.getGlobal(this);$jscomp.SYMBOL_PREFIX="jscomp_symbol_"; 6 | $jscomp.initSymbol=function(){$jscomp.initSymbol=function(){};$jscomp.global.Symbol||($jscomp.global.Symbol=$jscomp.Symbol)};$jscomp.symbolCounter_=0;$jscomp.Symbol=function(e){return $jscomp.SYMBOL_PREFIX+(e||"")+$jscomp.symbolCounter_++}; 7 | $jscomp.initSymbolIterator=function(){$jscomp.initSymbol();var e=$jscomp.global.Symbol.iterator;e||(e=$jscomp.global.Symbol.iterator=$jscomp.global.Symbol("iterator"));"function"!=typeof Array.prototype[e]&&$jscomp.defineProperty(Array.prototype,e,{configurable:!0,writable:!0,value:function(){return $jscomp.arrayIterator(this)}});$jscomp.initSymbolIterator=function(){}};$jscomp.arrayIterator=function(e){var r=0;return $jscomp.iteratorPrototype(function(){return rb&&(b+=1);1b?c:b<2/3?a+(c-a)*(2/3-b)*6:a}var d=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(a);a=parseInt(d[1])/360;var b=parseInt(d[2])/100,f=parseInt(d[3])/100,d=d[4]||1;if(0==b)f=b=a=f;else{var n=.5>f?f*(1+b):f+b-f*b,k=2*f-n,f=c(k,n,a+1/3),b=c(k,n,a);a=c(k,n,a-1/3)}return"rgba("+ 13 | 255*f+","+255*b+","+255*a+","+d+")"}function y(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(a))return a[2]}function V(a){if(-1=g.currentTime)for(var G=0;G=w||!k)g.began||(g.began=!0,f("begin")),f("run");if(q>n&&q=k&&r!==k||!k)b(k),x||e();f("update");a>=k&&(g.remaining?(t=h,"alternate"===g.direction&&(g.reversed=!g.reversed)):(g.pause(),g.completed||(g.completed=!0,f("complete"),"Promise"in window&&(p(),m=c()))),l=0)}a=void 0===a?{}:a;var h,t,l=0,p=null,m=c(),g=fa(a);g.reset=function(){var a=g.direction,c=g.loop;g.currentTime= 25 | 0;g.progress=0;g.paused=!0;g.began=!1;g.completed=!1;g.reversed="reverse"===a;g.remaining="alternate"===a&&1===c?2:c;b(0);for(a=g.children.length;a--;)g.children[a].reset()};g.tick=function(a){h=a;t||(t=h);k((l+h-t)*q.speed)};g.seek=function(a){k(d(a))};g.pause=function(){var a=v.indexOf(g);-1=c&&0<=b&&1>=b){var e=new Float32Array(11);if(c!==d||b!==f)for(var k=0;11>k;++k)e[k]=a(.1*k,c,b);return function(k){if(c===d&&b===f)return k;if(0===k)return 0;if(1===k)return 1;for(var h=0,l=1;10!==l&&e[l]<=k;++l)h+=.1;--l;var l=h+(k-e[l])/(e[l+1]-e[l])*.1,n=3*(1-3*b+3*c)*l*l+2*(3*b-6*c)*l+3*c;if(.001<=n){for(h=0;4>h;++h){n=3*(1-3*b+3*c)*l*l+2*(3*b-6*c)*l+3*c;if(0===n)break;var m=a(l,c,b)-k,l=l-m/n}k=l}else if(0=== 29 | n)k=l;else{var l=h,h=h+.1,g=0;do m=l+(h-l)/2,n=a(m,c,b)-k,0++g);k=m}return a(k,d,f)}}}}(),Q=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var c="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),d={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],a],Out:[[.25, 30 | .46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},b={linear:A(.25,.25,.75,.75)},f={},e;for(e in d)f.type=e,d[f.type].forEach(function(a){return function(d,f){b["ease"+a.type+c[f]]=h.fnc(d)? 31 | d:A.apply($jscomp$this,d)}}(f)),f={type:f.type};return b}(),ha={css:function(a,c,d){return a.style[c]=d},attribute:function(a,c,d){return a.setAttribute(c,d)},object:function(a,c,d){return a[c]=d},transform:function(a,c,d,b,f){b[f]||(b[f]=[]);b[f].push(c+"("+d+")")}},v=[],B=0,ia=function(){function a(){B=requestAnimationFrame(c)}function c(c){var b=v.length;if(b){for(var d=0;db&&(c.duration=d.duration);c.children.push(d)});c.seek(0);c.reset();c.autoplay&&c.restart();return c};return c};q.random=function(a,c){return Math.floor(Math.random()*(c-a+1))+a};return q}); -------------------------------------------------------------------------------- /js/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * demo.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2017, Codrops 9 | * http://www.codrops.com 10 | */ 11 | { 12 | setTimeout(() => document.body.classList.add('render'), 60); 13 | const navdemos = Array.from(document.querySelectorAll('nav.demos > .demo')); 14 | const total = navdemos.length; 15 | const current = navdemos.findIndex(el => el.classList.contains('demo--current')); 16 | const navigate = (linkEl) => { 17 | document.body.classList.remove('render'); 18 | document.body.addEventListener('transitionend', () => window.location = linkEl.href); 19 | }; 20 | navdemos.forEach(link => link.addEventListener('click', (ev) => { 21 | ev.preventDefault(); 22 | navigate(ev.target); 23 | })); 24 | document.addEventListener('keydown', (ev) => { 25 | const keyCode = ev.keyCode || ev.which; 26 | let linkEl; 27 | if ( keyCode === 37 ) { 28 | linkEl = current > 0 ? navdemos[current-1] : navdemos[total-1]; 29 | } 30 | else if ( keyCode === 39 ) { 31 | linkEl = current < total-1 ? navdemos[current+1] : navdemos[0]; 32 | } 33 | else { 34 | return false; 35 | } 36 | navigate(linkEl); 37 | }); 38 | } 39 | -------------------------------------------------------------------------------- /js/imagesloaded.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v4.1.4 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | 7 | !function(e,t){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",t):"object"==typeof module&&module.exports?module.exports=t():e.EvEmitter=t()}("undefined"!=typeof window?window:this,function(){function e(){}var t=e.prototype;return t.on=function(e,t){if(e&&t){var i=this._events=this._events||{},n=i[e]=i[e]||[];return n.indexOf(t)==-1&&n.push(t),this}},t.once=function(e,t){if(e&&t){this.on(e,t);var i=this._onceEvents=this._onceEvents||{},n=i[e]=i[e]||{};return n[t]=!0,this}},t.off=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){var n=i.indexOf(t);return n!=-1&&i.splice(n,1),this}},t.emitEvent=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){i=i.slice(0),t=t||[];for(var n=this._onceEvents&&this._onceEvents[e],o=0;o .grim__item-inner'); 17 | this.DOM.link = this.DOM.el.querySelector('a.grim__link'); 18 | this.pos = pos; 19 | } 20 | open() { 21 | return new Promise((resolve, reject) => { 22 | this.DOM.bg.style.transformOrigin = this.pos % 2 === 0 ? '50% 100%' : '0% 50%'; 23 | 24 | anime.remove(this.DOM.bg); 25 | anime({ 26 | targets: this.DOM.bg, 27 | duration: this.DOM.bg.dataset.duration || 30+this.pos*20, // increment as more boxes get revealed.. 28 | easing: this.DOM.bg.dataset.easing || 'easeInOutQuad', 29 | opacity: { 30 | value: 1, 31 | duration: 1 32 | }, 33 | scaleY: this.pos % 2 === 0 ? [0,1] : 1, 34 | scaleX: Math.abs(this.pos % 2) == 1 ? [0,1] : 1, 35 | complete: resolve 36 | }); 37 | 38 | if ( this.DOM.inner ) { 39 | anime.remove(this.DOM.inner); 40 | anime({ 41 | targets: this.DOM.inner, 42 | duration: 1300, 43 | delay: 550, 44 | easing: 'easeOutExpo', 45 | opacity: { 46 | value: 1, 47 | duration: 1 48 | }, 49 | translateY: ['100%','0%'] 50 | }); 51 | } 52 | }); 53 | } 54 | close() { 55 | return new Promise((resolve, reject) => { 56 | this.DOM.bg.style.transformOrigin = this.pos % 2 === 0 ? '50% 0%' : '100% 50%'; 57 | 58 | anime.remove(this.DOM.bg); 59 | anime({ 60 | targets: this.DOM.bg, 61 | duration: this.DOM.bg.dataset.duration || 10+this.pos*10, // increment as more boxes get revealed.. 62 | easing: this.DOM.bg.dataset.easing || 'easeInOutQuad', 63 | opacity: { 64 | value: 0, 65 | delay: this.DOM.bg.dataset.duration || 10+this.pos*10, 66 | duration: 1 67 | }, 68 | scaleY: this.pos % 2 === 0 ? [1,0] : 1, 69 | scaleX: Math.abs(this.pos % 2) == 1 ? [1,0] : 1, 70 | complete: resolve 71 | }); 72 | 73 | if ( this.DOM.inner ) { 74 | anime.remove(this.DOM.inner); 75 | anime({ 76 | targets: this.DOM.inner, 77 | duration: 100, 78 | easing: 'linear', 79 | opacity: 0 80 | }); 81 | } 82 | }); 83 | } 84 | } 85 | 86 | class Menu { 87 | constructor(el) { 88 | this.DOM = {el: el}; 89 | this.DOM.items = Array.from(this.DOM.el.querySelectorAll('.grim__item')); 90 | this.itemsTotal = this.DOM.items.length; 91 | this.boxes = []; 92 | this.DOM.items.forEach((item, pos) => { 93 | this.boxes.push(new Box(item, pos)); 94 | }); 95 | 96 | this.initEvents(); 97 | } 98 | initEvents() { 99 | for( let i = 0; i < this.itemsTotal; ++i ) { 100 | const link = this.boxes[i].DOM.link; 101 | if ( link ) { 102 | link.addEventListener('click', (ev) => { 103 | ev.preventDefault(); 104 | if ( this.isAnimating ) return; 105 | document.querySelector('.content--switch-current').classList.remove('content--switch-current'); 106 | document.querySelector(link.getAttribute('href')).classList.add('content--switch-current'); 107 | this.close(); 108 | }); 109 | } 110 | } 111 | } 112 | open() { 113 | this.toggle('open'); 114 | } 115 | close() { 116 | this.toggle('close'); 117 | } 118 | toggle(action) { 119 | if ( this.isAnimating ) return; 120 | this.isAnimating = true; 121 | if ( action === 'open' ) { 122 | this.openBoxes(); 123 | } 124 | else { 125 | this.closeBoxes(); 126 | } 127 | } 128 | openBoxes(pos = 0) { 129 | this.toggleBoxes('open', pos); 130 | } 131 | closeBoxes(pos = 0) { 132 | this.toggleBoxes('close', pos); 133 | } 134 | toggleBoxes(action, pos) { 135 | if ( pos >= this.itemsTotal ) { 136 | this.isAnimating = false; 137 | return; 138 | }; 139 | DOM.grim.classList[action === 'open' ? 'add' : 'remove']('grim--open'); 140 | const box = this.boxes[pos]; 141 | box[action === 'open' ? 'open' : 'close']().then(() => this[action === 'open' ? 'openBoxes' : 'closeBoxes'](pos+1)); 142 | } 143 | } 144 | 145 | let DOM = {}; 146 | DOM.grim = document.querySelector('.grim'); 147 | DOM.menu = new Menu(DOM.grim); 148 | DOM.menuCtrls = { 149 | open: document.querySelector('.menu-trigger'), 150 | close: document.querySelector('.menu-trigger--close') 151 | }; 152 | 153 | DOM.menuCtrls.open.addEventListener('click', () => DOM.menu.open()); 154 | DOM.menuCtrls.close.addEventListener('click', () => DOM.menu.close()); 155 | } -------------------------------------------------------------------------------- /js/menu2.js: -------------------------------------------------------------------------------- 1 | /** 2 | * menu2.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2018, Codrops 9 | * http://www.codrops.com 10 | */ 11 | { 12 | class Box { 13 | constructor(el, pos) { 14 | this.DOM = {el: el}; 15 | this.DOM.bg = this.DOM.el.querySelector('.grim__item-bg'); 16 | this.DOM.inner = this.DOM.el.querySelector('.grim__item-content > .grim__item-inner'); 17 | this.DOM.img = this.DOM.el.querySelector('.grim__item-img'); 18 | this.DOM.cover = this.DOM.el.querySelector('.grim__item-bg-cover'); 19 | this.DOM.link = this.DOM.el.querySelector('a.grim__link'); 20 | this.pos = pos; 21 | } 22 | open() { 23 | return new Promise((resolve, reject) => { 24 | this.DOM.bg.style.transformOrigin = this.pos % 2 === 0 ? '50% 100%' : '0% 50%'; 25 | 26 | anime.remove(this.DOM.bg); 27 | anime({ 28 | targets: this.DOM.bg, 29 | duration: this.DOM.bg.dataset.duration || 40+this.pos*20, // increment as more boxes get revealed.. 30 | easing: this.DOM.bg.dataset.easing || 'easeInOutQuad', 31 | opacity: { 32 | value: 1, 33 | duration: 1 34 | }, 35 | scaleY: this.pos % 2 === 0 ? [0,1] : 1, 36 | scaleX: Math.abs(this.pos % 2) == 1 ? [0,1] : 1, 37 | complete: () => { 38 | if ( this.DOM.img && this.DOM.cover ) { 39 | this.DOM.img.style.opacity = 1; 40 | this.DOM.cover.style.opacity = 1; 41 | this.DOM.cover.style.transformOrigin = '100% 50%'; 42 | anime.remove(this.DOM.cover); 43 | anime({ 44 | targets: this.DOM.cover, 45 | duration: 700, 46 | easing: 'easeOutQuint', 47 | scaleX: [1,0] 48 | }); 49 | } 50 | 51 | if ( this.DOM.inner ) { 52 | anime.remove(this.DOM.inner); 53 | anime({ 54 | targets: this.DOM.inner, 55 | duration: 1200, 56 | delay: 150, 57 | easing: 'easeOutQuint', 58 | opacity: { 59 | value: 1, 60 | duration: 1 61 | }, 62 | translateY: ['100%','0%'] 63 | }); 64 | } 65 | 66 | resolve(); 67 | } 68 | }); 69 | }); 70 | } 71 | close() { 72 | return new Promise((resolve, reject) => { 73 | const animateBoxFn = () => { 74 | this.DOM.bg.style.transformOrigin = this.pos % 2 === 0 ? '50% 0%' : '100% 50%'; 75 | 76 | anime.remove(this.DOM.bg); 77 | anime({ 78 | targets: this.DOM.bg, 79 | duration: this.DOM.bg.dataset.duration || 80+this.pos*10, 80 | easing: this.DOM.bg.dataset.easing || 'easeInOutQuad', 81 | opacity: { 82 | value: 0, 83 | delay: this.DOM.bg.dataset.duration || 40+this.pos*10, 84 | duration: 1 85 | }, 86 | scaleY: this.pos % 2 === 0 ? [1,0] : 1, 87 | scaleX: Math.abs(this.pos % 2) == 1 ? [1,0] : 1, 88 | complete: resolve 89 | }); 90 | }; 91 | 92 | if ( this.DOM.img && this.DOM.cover ) { 93 | anime.remove(this.DOM.img); 94 | anime({ 95 | targets: this.DOM.img, 96 | duration: 200, 97 | easing: 'linear', 98 | opacity: 0 99 | }); 100 | } 101 | animateBoxFn(); 102 | 103 | if ( this.DOM.inner ) { 104 | this.DOM.inner.style.opacity = 0; 105 | } 106 | }); 107 | } 108 | } 109 | 110 | class Menu { 111 | constructor(el) { 112 | this.DOM = {el: el}; 113 | this.DOM.items = Array.from(this.DOM.el.querySelectorAll('.grim__item')); 114 | this.itemsTotal = this.DOM.items.length; 115 | this.boxes = []; 116 | this.DOM.items.forEach((item, pos) => { 117 | this.boxes.push(new Box(item, pos)); 118 | }); 119 | 120 | this.initEvents(); 121 | } 122 | initEvents() { 123 | for( let i = 0; i < this.itemsTotal; ++i ) { 124 | const link = this.boxes[i].DOM.link; 125 | if ( link ) { 126 | link.addEventListener('click', (ev) => { 127 | ev.preventDefault(); 128 | if ( this.isAnimating ) return; 129 | document.querySelector('.content--switch-current').classList.remove('content--switch-current'); 130 | document.querySelector(link.getAttribute('href')).classList.add('content--switch-current'); 131 | this.close(); 132 | }); 133 | } 134 | } 135 | } 136 | open() { 137 | this.toggle('open'); 138 | } 139 | close() { 140 | this.toggle('close'); 141 | } 142 | toggle(action) { 143 | if ( this.isAnimating ) return; 144 | this.isAnimating = true; 145 | if ( action === 'open' ) { 146 | this.openBoxes(); 147 | } 148 | else { 149 | this.closeBoxes(); 150 | } 151 | } 152 | openBoxes(pos = 0) { 153 | this.toggleBoxes('open', pos); 154 | } 155 | closeBoxes(pos = 0) { 156 | this.toggleBoxes('close', pos); 157 | } 158 | toggleBoxes(action, pos) { 159 | if ( pos >= this.itemsTotal ) { 160 | this.isAnimating = false; 161 | return; 162 | }; 163 | DOM.grim.classList[action === 'open' ? 'add' : 'remove']('grim--open'); 164 | const box = this.boxes[pos]; 165 | box[action === 'open' ? 'open' : 'close']().then(() => this[action === 'open' ? 'openBoxes' : 'closeBoxes'](pos+1)); 166 | } 167 | } 168 | 169 | let DOM = {}; 170 | 171 | imagesLoaded(document.querySelectorAll('.grim__item-img'), {background: true}, () => { 172 | document.body.classList.remove('loading'); 173 | 174 | DOM.grim = document.querySelector('.grim'); 175 | DOM.menu = new Menu(DOM.grim); 176 | DOM.menuCtrls = { 177 | open: document.querySelector('.menu-trigger'), 178 | close: document.querySelector('.menu-trigger--close') 179 | }; 180 | 181 | DOM.menuCtrls.open.addEventListener('click', () => DOM.menu.open()); 182 | DOM.menuCtrls.close.addEventListener('click', () => DOM.menu.close()); 183 | }); 184 | } --------------------------------------------------------------------------------