├── README.md
├── css
├── component.css
├── demo.css
└── organicfoodicons.css
├── favicon.ico
├── fonts
├── bpicons
│ ├── bpicons.eot
│ ├── bpicons.svg
│ ├── bpicons.ttf
│ ├── bpicons.woff
│ └── license.txt
├── feather
│ ├── feather.eot
│ ├── feather.svg
│ ├── feather.ttf
│ ├── feather.woff
│ └── feather.woff2
└── organicfoodicons
│ ├── organicfoodicons.eot
│ ├── organicfoodicons.svg
│ ├── organicfoodicons.ttf
│ ├── organicfoodicons.woff
│ └── organicfoodicons.woff2
├── img
└── loading.svg
├── index.html
└── js
├── classie.js
├── dummydata.js
├── main.js
└── modernizr-custom.js
/README.md:
--------------------------------------------------------------------------------
1 | Blueprint: Multi-Level Menu
2 | =========
3 |
4 | A simple multi-level menu with delayed item animations and optional breadcrumb navigation and back button.
5 |
6 | [Article on Codrops](http://tympanus.net/codrops/?p=25521)
7 |
8 | [Demo](http://tympanus.net/Blueprints/MultiLevelMenu/)
9 |
10 | The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration.
11 |
12 | Check out all of our Blueprints [here](http://tympanus.net/codrops/category/blueprints/)
13 |
14 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".
15 |
16 | Read more here: [License](http://tympanus.net/codrops/licensing/)
17 |
18 | [Organic Food Icons](http://tympanus.net/codrops/2015/03/19/freebie-organic-food-icon-set/) by Wojciech Zasina.
19 |
20 | [Feather Icons](http://colebemis.com/feather/) by Cole Bemis.
21 |
22 | Follow us: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/)
23 |
24 | [© Codrops 2015](http://www.codrops.com)
--------------------------------------------------------------------------------
/css/component.css:
--------------------------------------------------------------------------------
1 | /* Icons (made with Icomoon.io) */
2 |
3 | @font-face {
4 | font-family: 'feather';
5 | font-weight: normal;
6 | font-style: normal;
7 | src: url('../fonts/feather/feather.eot?1gafuo');
8 | src: url('../fonts/feather/feather.eot?1gafuo#iefix') format('embedded-opentype'), url('../fonts/feather/feather.woff2?1gafuo') format('woff2'), url('../fonts/feather/feather.ttf?1gafuo') format('truetype'), url('../fonts/feather/feather.woff?1gafuo') format('woff'), url('../fonts/feather/feather.svg?1gafuo#feather') format('svg');
9 | }
10 |
11 | .icon {
12 | font-family: 'feather';
13 | font-weight: normal;
14 | font-style: normal;
15 | font-variant: normal;
16 | line-height: 1;
17 | text-transform: none;
18 | /* Better Font Rendering =========== */
19 | -webkit-font-smoothing: antialiased;
20 | -moz-osx-font-smoothing: grayscale;
21 | speak: none;
22 | }
23 |
24 | .icon--arrow-left:before {
25 | content: '\e901';
26 | }
27 |
28 | .icon--menu:before {
29 | content: '\e903';
30 | }
31 |
32 | .icon--cross:before {
33 | content: '\e117';
34 | }
35 |
36 |
37 | /* Menu styles */
38 |
39 | .menu {
40 | position: fixed;
41 | top: 120px;
42 | left: 0;
43 | width: 300px;
44 | height: calc(100vh - 120px);
45 | background: #1c1d22;
46 | }
47 |
48 | .menu__wrap {
49 | position: absolute;
50 | top: 3.5em;
51 | bottom: 0;
52 | overflow: hidden;
53 | width: 100%;
54 | }
55 |
56 | .menu__level {
57 | position: absolute;
58 | top: 0;
59 | left: 0;
60 | visibility: hidden;
61 | overflow: hidden;
62 | overflow-y: scroll;
63 | width: calc(100% + 50px);
64 | height: 100%;
65 | margin: 0;
66 | padding: 0;
67 | list-style-type: none;
68 | }
69 |
70 | .menu__level:focus {
71 | outline: none;
72 | }
73 |
74 | .menu__level--current {
75 | visibility: visible;
76 | }
77 |
78 | .menu__item {
79 | display: block;
80 | width: calc(100% - 50px);
81 | }
82 |
83 | .menu__link {
84 | font-weight: 600;
85 | position: relative;
86 | display: block;
87 | padding: 1em 2.5em 1em 1.5em;
88 | color: #bdbdbd;
89 | -webkit-transition: color 0.1s;
90 | transition: color 0.1s;
91 | }
92 |
93 | .menu__link[data-submenu]::after {
94 | content: '\e904';
95 | font-family: 'feather';
96 | position: absolute;
97 | right: 0;
98 | padding: 0.25em 1.25em;
99 | color: #2a2b30;
100 | }
101 |
102 | .menu__link:hover,
103 | .menu__link:focus,
104 | .menu__link[data-submenu]:hover::after,
105 | .menu__link[data-submenu]:focus::after {
106 | color: #5c5edc;
107 | }
108 |
109 | .menu__link--current::before {
110 | content: '\00B7';
111 | font-size: 1.5em;
112 | line-height: 0;
113 | position: absolute;
114 | top: 50%;
115 | left: 0.5em;
116 | height: 4px;
117 | color: #5c5edc;
118 | }
119 |
120 | [class^='animate-'],
121 | [class*=' animate-'] {
122 | visibility: visible;
123 | }
124 |
125 | .animate-outToRight .menu__item {
126 | -webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
127 | animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
128 | }
129 |
130 | @-webkit-keyframes outToRight {
131 | to {
132 | opacity: 0;
133 | -webkit-transform: translate3d(100%, 0, 0);
134 | transform: translate3d(100%, 0, 0);
135 | }
136 | }
137 |
138 | @keyframes outToRight {
139 | to {
140 | opacity: 0;
141 | -webkit-transform: translate3d(100%, 0, 0);
142 | transform: translate3d(100%, 0, 0);
143 | }
144 | }
145 |
146 | .animate-outToLeft .menu__item {
147 | -webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
148 | animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
149 | }
150 |
151 | @-webkit-keyframes outToLeft {
152 | to {
153 | opacity: 0;
154 | -webkit-transform: translate3d(-100%, 0, 0);
155 | transform: translate3d(-100%, 0, 0);
156 | }
157 | }
158 |
159 | @keyframes outToLeft {
160 | to {
161 | opacity: 0;
162 | -webkit-transform: translate3d(-100%, 0, 0);
163 | transform: translate3d(-100%, 0, 0);
164 | }
165 | }
166 |
167 | .animate-inFromLeft .menu__item {
168 | -webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
169 | animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
170 | }
171 |
172 | @-webkit-keyframes inFromLeft {
173 | from {
174 | opacity: 0;
175 | -webkit-transform: translate3d(-100%, 0, 0);
176 | transform: translate3d(-100%, 0, 0);
177 | }
178 | to {
179 | opacity: 1;
180 | -webkit-transform: translate3d(0, 0, 0);
181 | transform: translate3d(0, 0, 0);
182 | }
183 | }
184 |
185 | @keyframes inFromLeft {
186 | from {
187 | opacity: 0;
188 | -webkit-transform: translate3d(-100%, 0, 0);
189 | transform: translate3d(-100%, 0, 0);
190 | }
191 | to {
192 | opacity: 1;
193 | -webkit-transform: translate3d(0, 0, 0);
194 | transform: translate3d(0, 0, 0);
195 | }
196 | }
197 |
198 | .animate-inFromRight .menu__item {
199 | -webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
200 | animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
201 | }
202 |
203 | @-webkit-keyframes inFromRight {
204 | from {
205 | opacity: 0;
206 | -webkit-transform: translate3d(100%, 0, 0);
207 | transform: translate3d(100%, 0, 0);
208 | }
209 | to {
210 | opacity: 1;
211 | -webkit-transform: translate3d(0, 0, 0);
212 | transform: translate3d(0, 0, 0);
213 | }
214 | }
215 |
216 | @keyframes inFromRight {
217 | from {
218 | opacity: 0;
219 | -webkit-transform: translate3d(100%, 0, 0);
220 | transform: translate3d(100%, 0, 0);
221 | }
222 | to {
223 | opacity: 1;
224 | -webkit-transform: translate3d(0, 0, 0);
225 | transform: translate3d(0, 0, 0);
226 | }
227 | }
228 |
229 | .menu__breadcrumbs {
230 | font-size: 0.65em;
231 | line-height: 1;
232 | position: relative;
233 | padding: 2.5em 3.75em 1.5em 2.5em;
234 | }
235 |
236 | .menu__breadcrumbs a {
237 | font-weight: bold;
238 | display: inline-block;
239 | cursor: pointer;
240 | vertical-align: middle;
241 | letter-spacing: 1px;
242 | text-transform: uppercase;
243 | color: #5c5edc;
244 | }
245 |
246 | .menu__breadcrumbs a:last-child {
247 | pointer-events: none;
248 | }
249 |
250 | .menu__breadcrumbs a:hover,
251 | .menu__breadcrumbs a:focus {
252 | color: #8182e0;
253 | }
254 |
255 | .menu__breadcrumbs a:not(:last-child)::after {
256 | content: '\e902';
257 | font-family: 'feather';
258 | display: inline-block;
259 | padding: 0 0.5em;
260 | color: #33353e;
261 | }
262 |
263 | .menu__breadcrumbs a:not(:last-child):hover::after,
264 | .menu__breadcrumbs a:not(:last-child):focus::after {
265 | color: #33353e;
266 | }
267 |
268 | .menu__back {
269 | font-size: 1.05em;
270 | position: absolute;
271 | z-index: 100;
272 | top: 0;
273 | right: 2.25em;
274 | margin: 0;
275 | padding: 1.365em 0.65em 0 0;
276 | cursor: pointer;
277 | color: #2a2b30;
278 | border: none;
279 | background: none;
280 | }
281 |
282 | .menu__back--hidden {
283 | pointer-events: none;
284 | opacity: 0;
285 | }
286 |
287 | .menu__back:hover,
288 | .menu__back:focus {
289 | color: #fff;
290 | outline: none;
291 | }
292 |
293 |
294 | /* Open and close buttons */
295 |
296 | .action {
297 | position: absolute;
298 | display: block;
299 | margin: 0;
300 | padding: 0;
301 | cursor: pointer;
302 | border: none;
303 | background: none;
304 | }
305 |
306 | .action:focus {
307 | outline: none;
308 | }
309 |
310 | .action--open {
311 | font-size: 1.5em;
312 | top: 1em;
313 | left: 1em;
314 | display: none;
315 | color: #fff;
316 | position: fixed;
317 | z-index: 1000;
318 | }
319 |
320 | .action--close {
321 | font-size: 1.1em;
322 | top: 1.25em;
323 | right: 1em;
324 | display: none;
325 | color: #45464e;
326 | }
327 |
328 | @media screen and (max-width: 40em) {
329 | .action--open,
330 | .action--close {
331 | display: block;
332 | }
333 | .menu {
334 | z-index: 1000;
335 | top: 0;
336 | width: 100%;
337 | height: 100vh;
338 | -webkit-transform: translate3d(-100%, 0, 0);
339 | transform: translate3d(-100%, 0, 0);
340 | -webkit-transition: -webkit-transform 0.3s;
341 | transition: transform 0.3s;
342 | }
343 | .menu--open {
344 | -webkit-transform: translate3d(0, 0, 0);
345 | transform: translate3d(0, 0, 0);
346 | }
347 | }
348 |
--------------------------------------------------------------------------------
/css/demo.css:
--------------------------------------------------------------------------------
1 | /* General Blueprint Style */
2 |
3 | @font-face {
4 | font-family: 'bpicons';
5 | font-weight: normal;
6 | font-style: normal;
7 | src: url('../fonts/bpicons/bpicons.eot');
8 | src: url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'), url('../fonts/bpicons/bpicons.woff') format('woff'), url('../fonts/bpicons/bpicons.ttf') format('truetype'), url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');
9 | }/* Made with http://icomoon.io/ */
10 |
11 |
12 | /* Resets */
13 |
14 | *,
15 | *:after,
16 | *:before {
17 | box-sizing: border-box;
18 | }
19 |
20 |
21 | /* Helper classes */
22 |
23 | .cf:before,
24 | .cf:after {
25 | content: ' ';
26 | display: table;
27 | }
28 |
29 | .cf:after {
30 | clear: both;
31 | }
32 |
33 |
34 | /* Main styles */
35 |
36 | body {
37 | font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
38 | overflow: hidden;
39 | margin: 0;
40 | color: #cecece;
41 | background: #2a2b30;
42 | -webkit-font-smoothing: antialiased;
43 | -moz-osx-font-smoothing: grayscale;
44 | }
45 |
46 | a {
47 | text-decoration: none;
48 | color: #fff;
49 | outline: none;
50 | }
51 |
52 | a:hover {
53 | color: #ddd;
54 | }
55 |
56 | .container {
57 | overflow-y: auto;
58 | height: 100vh;
59 | }
60 |
61 |
62 | /* Blueprint header */
63 |
64 | .bp-header {
65 | display: -webkit-flex;
66 | display: flex;
67 | }
68 |
69 | .bp-header__main {
70 | margin: 0 0 0 auto;
71 | padding: 2em 3em 0;
72 | text-align: right;
73 | }
74 |
75 | .bp-header__title {
76 | font-size: 1.3em;
77 | font-weight: 400;
78 | line-height: 1.3;
79 | margin: 0.25em 0 0;
80 | }
81 |
82 | .bp-header__present {
83 | font-size: 0.75em;
84 | font-weight: 700;
85 | position: relative;
86 | z-index: 100;
87 | display: block;
88 | margin: 0 -8px 0 0;
89 | padding: 0 0 0.6em 0;
90 | text-indent: 3px;
91 | letter-spacing: 3px;
92 | text-transform: uppercase;
93 | color: #5c5edc;
94 | }
95 |
96 | .bp-tooltip:after {
97 | position: relative;
98 | top: -8px;
99 | left: -8px;
100 | display: inline-block;
101 | width: 0;
102 | height: 0;
103 | }
104 |
105 | .bp-tooltip:hover:before {
106 | content: attr(data-content);
107 | font-size: 110%;
108 | font-weight: 700;
109 | line-height: 1.2;
110 | position: absolute;
111 | top: 1.5em;
112 | right: 0;
113 | width: 50vw;
114 | padding: 0.8em 1em;
115 | text-align: right;
116 | text-indent: 0;
117 | letter-spacing: 0;
118 | text-transform: none;
119 | color: #fff;
120 | background: #5c5edc;
121 | }
122 |
123 | .bp-nav {
124 | margin: 0.5em 0 0 auto;
125 | text-align: right;
126 | }
127 |
128 | .bp-nav__item {
129 | position: relative;
130 | display: inline-block;
131 | width: 2.5em;
132 | height: 2.5em;
133 | margin: 0 0.1em;
134 | text-align: left;
135 | border-radius: 50%;
136 | }
137 |
138 | .bp-nav__item > span {
139 | display: none;
140 | }
141 |
142 | .bp-nav__item:hover:before {
143 | content: attr(data-info);
144 | font-size: 0.85em;
145 | font-weight: bold;
146 | position: absolute;
147 | top: 120%;
148 | right: 0;
149 | width: 600%;
150 | text-align: right;
151 | pointer-events: none;
152 | color: #595a5f;
153 | }
154 |
155 | .bp-nav__item:hover {
156 | background: #5c5edc;
157 | }
158 |
159 | .bp-icon:after {
160 | font-family: 'bpicons';
161 | font-weight: normal;
162 | font-style: normal;
163 | font-variant: normal;
164 | text-align: center;
165 | text-transform: none;
166 | color: #5c5edc;
167 | -webkit-font-smoothing: antialiased;
168 | speak: none;
169 | }
170 |
171 | .bp-nav .bp-icon:after {
172 | line-height: 2.4;
173 | position: absolute;
174 | top: 0;
175 | left: 0;
176 | width: 100%;
177 | height: 100%;
178 | text-indent: 0;
179 | }
180 |
181 | .bp-nav a:hover:after {
182 | color: #fff;
183 | }
184 |
185 | .bp-icon--next:after {
186 | content: '\e000';
187 | }
188 |
189 | .bp-icon--drop:after {
190 | content: '\e001';
191 | }
192 |
193 | .bp-icon--archive:after {
194 | content: '\e002';
195 | }
196 |
197 | .bp-icon--about:after {
198 | content: '\e003';
199 | }
200 |
201 | .bp-icon--prev:after {
202 | content: '\e004';
203 | }
204 |
205 | .dummy-logo {
206 | position: fixed;
207 | top: 0;
208 | left: 0;
209 | width: 300px;
210 | height: 120px;
211 | padding: 1em 0 0 0;
212 | text-align: center;
213 | color: #3b3d4a;
214 | background: #1c1d22;
215 | }
216 |
217 | .dummy-icon {
218 | font-size: 4em;
219 | }
220 |
221 | .dummy-heading {
222 | font-size: 0.75em;
223 | letter-spacing: 2px;
224 | text-transform: uppercase;
225 | }
226 |
227 | .content {
228 | position: relative;
229 | min-height: 300px;
230 | margin: 0 0 0 300px;
231 | }
232 |
233 | .content--loading {
234 | background: url(../img/loading.svg) no-repeat 50% 50%;
235 | }
236 |
237 | .products {
238 | margin: 0;
239 | padding: 2em;
240 | text-align: center;
241 | }
242 |
243 | .product {
244 | display: inline-block;
245 | width: 200px;
246 | height: 200px;
247 | margin: 10px;
248 | border-radius: 5px;
249 | background: #1c1d22;
250 | }
251 |
252 | .product .foodicon {
253 | font-size: 4em;
254 | line-height: 190px;
255 | color: #3b3d4a;
256 | }
257 |
258 | .info {
259 | font-size: 1.1em;
260 | font-weight: bold;
261 | padding: 20vh 1em 0;
262 | text-align: center;
263 | color: #47484c;
264 | }
265 |
266 | body #cdawrap {
267 | top: auto;
268 | bottom: 15px;
269 | background: rgba(0, 0, 0, 0.1);
270 | }
271 |
272 | body #cdawrap .carbon-text {
273 | color: #505158;
274 | }
275 |
276 | body #cdawrap a.carbon-poweredby {
277 | color: #7883c4;
278 | }
279 |
280 | body #cdawrap a:hover.carbon-poweredby {
281 | color: #fff;
282 | }
283 |
284 | @media screen and (max-width: 40em) {
285 | .bp-header {
286 | padding-top: 3em;
287 | }
288 | .bp-header__main,
289 | .bp-nav {
290 | width: 100%;
291 | text-align: center;
292 | }
293 | .dummy-logo {
294 | display: none;
295 | }
296 | .content {
297 | margin: 0;
298 | }
299 | body,
300 | .container {
301 | height: auto;
302 | overflow: auto;
303 | }
304 | }
305 |
--------------------------------------------------------------------------------
/css/organicfoodicons.css:
--------------------------------------------------------------------------------
1 |
2 | @font-face {
3 | font-family: 'organicfoodicons';
4 | src:url('../fonts/organicfoodicons/organicfoodicons.eot?56tr8g');
5 | src:url('../fonts/organicfoodicons/organicfoodicons.eot?56tr8g#iefix') format('embedded-opentype'),
6 | url('../fonts/organicfoodicons/organicfoodicons.woff2?56tr8g') format('woff2'),
7 | url('../fonts/organicfoodicons/organicfoodicons.ttf?56tr8g') format('truetype'),
8 | url('../fonts/organicfoodicons/organicfoodicons.woff?56tr8g') format('woff'),
9 | url('../fonts/organicfoodicons/organicfoodicons.svg?56tr8g#organicfoodicons') format('svg');
10 | font-weight: normal;
11 | font-style: normal;
12 | }
13 |
14 | .foodicon {
15 | font-family: 'organicfoodicons';
16 | speak: none;
17 | font-style: normal;
18 | font-weight: normal;
19 | font-variant: normal;
20 | text-transform: none;
21 | line-height: 1;
22 | /* Better Font Rendering =========== */
23 | -webkit-font-smoothing: antialiased;
24 | -moz-osx-font-smoothing: grayscale;
25 | }
26 |
27 | .foodicon--jam::before {
28 | content: "\e900";
29 | }
30 | .foodicon--radish::before {
31 | content: "\e901";
32 | }
33 | .foodicon--carrot::before {
34 | content: "\e902";
35 | }
36 | .foodicon--coconut::before {
37 | content: "\e903";
38 | }
39 | .foodicon--corn::before {
40 | content: "\e904";
41 | }
42 | .foodicon--cucumber::before {
43 | content: "\e905";
44 | }
45 | .foodicon--eggplant::before {
46 | content: "\e907";
47 | }
48 | .foodicon--ekobag::before {
49 | content: "\e908";
50 | }
51 | .foodicon--grain::before {
52 | content: "\e909";
53 | }
54 | .foodicon--grape::before {
55 | content: "\e90a";
56 | }
57 | .foodicon--leaf::before {
58 | content: "\e90b";
59 | }
60 | .foodicon--lemon::before {
61 | content: "\e90c";
62 | }
63 | .foodicon--lettuce::before {
64 | content: "\e90d";
65 | }
66 | .foodicon--mylk::before {
67 | content: "\e90e";
68 | }
69 | .foodicon--mushrooms::before {
70 | content: "\e90f";
71 | }
72 | .foodicon--onion::before {
73 | content: "\e910";
74 | }
75 | .foodicon--pear::before {
76 | content: "\e911";
77 | }
78 | .foodicon--pepper::before {
79 | content: "\e912";
80 | }
81 | .foodicon--smoothie::before {
82 | content: "\e913";
83 | }
84 | .foodicon--squeezer::before {
85 | content: "\e914";
86 | }
87 | .foodicon--tomato::before {
88 | content: "\e915";
89 | }
90 | .foodicon--watermelon::before {
91 | content: "\e916";
92 | }
93 | .foodicon--apple::before {
94 | content: "\e917";
95 | }
96 | .foodicon--banana::before {
97 | content: "\e918";
98 | }
99 | .foodicon--basket::before {
100 | content: "\e919";
101 | }
102 | .foodicon--blender::before {
103 | content: "\e91a";
104 | }
105 | .foodicon--bread::before {
106 | content: "\e91b";
107 | }
108 | .foodicon--broccoli::before {
109 | content: "\e91c";
110 | }
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MultiLevelMenu/e9508983c033fd61cf25ce45f1b722d1aa2ed212/favicon.ico
--------------------------------------------------------------------------------
/fonts/bpicons/bpicons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MultiLevelMenu/e9508983c033fd61cf25ce45f1b722d1aa2ed212/fonts/bpicons/bpicons.eot
--------------------------------------------------------------------------------
/fonts/bpicons/bpicons.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/fonts/bpicons/bpicons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MultiLevelMenu/e9508983c033fd61cf25ce45f1b722d1aa2ed212/fonts/bpicons/bpicons.ttf
--------------------------------------------------------------------------------
/fonts/bpicons/bpicons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MultiLevelMenu/e9508983c033fd61cf25ce45f1b722d1aa2ed212/fonts/bpicons/bpicons.woff
--------------------------------------------------------------------------------
/fonts/bpicons/license.txt:
--------------------------------------------------------------------------------
1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
3 |
4 |
5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/
--------------------------------------------------------------------------------
/fonts/feather/feather.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MultiLevelMenu/e9508983c033fd61cf25ce45f1b722d1aa2ed212/fonts/feather/feather.eot
--------------------------------------------------------------------------------
/fonts/feather/feather.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/fonts/feather/feather.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MultiLevelMenu/e9508983c033fd61cf25ce45f1b722d1aa2ed212/fonts/feather/feather.ttf
--------------------------------------------------------------------------------
/fonts/feather/feather.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MultiLevelMenu/e9508983c033fd61cf25ce45f1b722d1aa2ed212/fonts/feather/feather.woff
--------------------------------------------------------------------------------
/fonts/feather/feather.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MultiLevelMenu/e9508983c033fd61cf25ce45f1b722d1aa2ed212/fonts/feather/feather.woff2
--------------------------------------------------------------------------------
/fonts/organicfoodicons/organicfoodicons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MultiLevelMenu/e9508983c033fd61cf25ce45f1b722d1aa2ed212/fonts/organicfoodicons/organicfoodicons.eot
--------------------------------------------------------------------------------
/fonts/organicfoodicons/organicfoodicons.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/fonts/organicfoodicons/organicfoodicons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MultiLevelMenu/e9508983c033fd61cf25ce45f1b722d1aa2ed212/fonts/organicfoodicons/organicfoodicons.ttf
--------------------------------------------------------------------------------
/fonts/organicfoodicons/organicfoodicons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MultiLevelMenu/e9508983c033fd61cf25ce45f1b722d1aa2ed212/fonts/organicfoodicons/organicfoodicons.woff
--------------------------------------------------------------------------------
/fonts/organicfoodicons/organicfoodicons.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/MultiLevelMenu/e9508983c033fd61cf25ce45f1b722d1aa2ed212/fonts/organicfoodicons/organicfoodicons.woff2
--------------------------------------------------------------------------------
/img/loading.svg:
--------------------------------------------------------------------------------
1 |
2 |
34 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Blueprint: Multi-Level Menu
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
42 |
43 |
114 |
115 |
Please choose a category
116 |
117 |
118 |
´s)
50 | this.menus = [].slice.call(this.el.querySelectorAll('.menu__level'));
51 |
52 | // index of current menu
53 | // Each level is actually a different menu so 0 is root, 1 is sub-1, 2 sub-2, etc.
54 | this.current_menu = 0;
55 |
56 | /* Determine what current menu actually is */
57 | var current_menu;
58 | this.menus.forEach(function(menuEl, pos) {
59 | var items = menuEl.querySelectorAll('.menu__item');
60 | items.forEach(function(itemEl, iPos) {
61 | var currentLink = itemEl.querySelector('.menu__link--current');
62 | if (currentLink) {
63 | // This is the actual menu__level that should have current
64 | current_menu = pos;
65 | }
66 | });
67 | });
68 |
69 | if (current_menu) {
70 | this.current_menu = current_menu;
71 | }
72 |
73 | this._init();
74 | }
75 |
76 | MLMenu.prototype.options = {
77 | // show breadcrumbs
78 | breadcrumbsCtrl : true,
79 | // initial breadcrumb text
80 | initialBreadcrumb : 'all',
81 | // show back button
82 | backCtrl : true,
83 | // delay between each menu item sliding animation
84 | itemsDelayInterval : 60,
85 | // direction
86 | direction : 'r2l',
87 | // callback: item that doesn´t have a submenu gets clicked
88 | // onItemClick([event], [inner HTML of the clicked item])
89 | onItemClick : function(ev, itemName) { return false; }
90 | };
91 |
92 | MLMenu.prototype._init = function() {
93 | // iterate the existing menus and create an array of menus,
94 | // more specifically an array of objects where each one holds the info of each menu element and its menu items
95 | this.menusArr = [];
96 | this.breadCrumbs = false;
97 | var self = this;
98 | var submenus = [];
99 |
100 | /* Loops over root level menu items */
101 | this.menus.forEach(function(menuEl, pos) {
102 | var menu = {menuEl : menuEl, menuItems : [].slice.call(menuEl.querySelectorAll('.menu__item'))};
103 |
104 | self.menusArr.push(menu);
105 |
106 | // set current menu class
107 | if( pos === self.current_menu ) {
108 | classie.add(menuEl, 'menu__level--current');
109 | }
110 |
111 | var menu_x = menuEl.getAttribute('data-menu');
112 | var links = menuEl.querySelectorAll('.menu__link');
113 | links.forEach(function(linkEl, lPos) {
114 | var submenu = linkEl.getAttribute('data-submenu');
115 | if (submenu) {
116 | var pushMe = {"menu":submenu, "name": linkEl.innerHTML };
117 | if (submenus[pos]) {
118 | submenus[pos].push(pushMe);
119 | } else {
120 | submenus[pos] = []
121 | submenus[pos].push(pushMe);
122 | }
123 | }
124 | });
125 | });
126 |
127 | /* For each MENU, find their parent MENU */
128 | this.menus.forEach(function(menuEl, pos) {
129 | var menu_x = menuEl.getAttribute('data-menu');
130 | submenus.forEach(function(subMenuEl, menu_root) {
131 | subMenuEl.forEach(function(subMenuItem, subPos) {
132 | if (subMenuItem.menu == menu_x) {
133 | self.menusArr[pos].backIdx = menu_root;
134 | self.menusArr[pos].name = subMenuItem.name;
135 | }
136 | });
137 | });
138 | });
139 |
140 | // create breadcrumbs
141 | if( self.options.breadcrumbsCtrl ) {
142 | this.breadcrumbsCtrl = document.createElement('nav');
143 | this.breadcrumbsCtrl.className = 'menu__breadcrumbs';
144 | this.breadcrumbsCtrl.setAttribute('aria-label', 'You are here');
145 | this.el.insertBefore(this.breadcrumbsCtrl, this.el.firstChild);
146 | // add initial breadcrumb
147 | this._addBreadcrumb(0);
148 |
149 | // Need to add breadcrumbs for all parents of current submenu
150 | if (self.menusArr[self.current_menu].backIdx != 0 && self.current_menu != 0) {
151 | this._crawlCrumbs(self.menusArr[self.current_menu].backIdx, self.menusArr);
152 | this.breadCrumbs = true;
153 | }
154 |
155 | // Create current submenu breadcrumb
156 | if (self.current_menu != 0) {
157 | this._addBreadcrumb(self.current_menu);
158 | this.breadCrumbs = true;
159 | }
160 | }
161 |
162 | // create back button
163 | if (this.options.backCtrl) {
164 | this.backCtrl = document.createElement('button');
165 | if (this.breadCrumbs) {
166 | this.backCtrl.className = 'menu__back';
167 | } else {
168 | this.backCtrl.className = 'menu__back menu__back--hidden';
169 | }
170 | this.backCtrl.setAttribute('aria-label', 'Go back');
171 | this.backCtrl.innerHTML = '';
172 | this.el.insertBefore(this.backCtrl, this.el.firstChild);
173 | }
174 |
175 | // event binding
176 | this._initEvents();
177 | };
178 |
179 | MLMenu.prototype._initEvents = function() {
180 | var self = this;
181 |
182 | for(var i = 0, len = this.menusArr.length; i < len; ++i) {
183 | this.menusArr[i].menuItems.forEach(function(item, pos) {
184 | item.querySelector('a').addEventListener('click', function(ev) {
185 | var submenu = ev.target.getAttribute('data-submenu'),
186 | itemName = ev.target.innerHTML,
187 | subMenuEl = self.el.querySelector('ul[data-menu="' + submenu + '"]');
188 |
189 | // check if there's a sub menu for this item
190 | if( submenu && subMenuEl ) {
191 | ev.preventDefault();
192 | // open it
193 | self._openSubMenu(subMenuEl, pos, itemName);
194 | }
195 | else {
196 | // add class current
197 | var currentlink = self.el.querySelector('.menu__link--current');
198 | if( currentlink ) {
199 | classie.remove(self.el.querySelector('.menu__link--current'), 'menu__link--current');
200 | }
201 | classie.add(ev.target, 'menu__link--current');
202 |
203 | // callback
204 | self.options.onItemClick(ev, itemName);
205 | }
206 | });
207 | });
208 | }
209 |
210 | // back navigation
211 | if( this.options.backCtrl ) {
212 | this.backCtrl.addEventListener('click', function() {
213 | self._back();
214 | });
215 | }
216 | };
217 |
218 | MLMenu.prototype._openSubMenu = function(subMenuEl, clickPosition, subMenuName) {
219 | if( this.isAnimating ) {
220 | return false;
221 | }
222 | this.isAnimating = true;
223 |
224 | // save "parent" menu index for back navigation
225 | this.menusArr[this.menus.indexOf(subMenuEl)].backIdx = this.current_menu;
226 | // save "parent" menu´s name
227 | this.menusArr[this.menus.indexOf(subMenuEl)].name = subMenuName;
228 | // current menu slides out
229 | this._menuOut(clickPosition);
230 | // next menu (submenu) slides in
231 | this._menuIn(subMenuEl, clickPosition);
232 | };
233 |
234 | MLMenu.prototype._back = function() {
235 | if( this.isAnimating ) {
236 | return false;
237 | }
238 | this.isAnimating = true;
239 |
240 | // current menu slides out
241 | this._menuOut();
242 | // next menu (previous menu) slides in
243 | var backMenu = this.menusArr[this.menusArr[this.current_menu].backIdx].menuEl;
244 | this._menuIn(backMenu);
245 |
246 | // remove last breadcrumb
247 | if( this.options.breadcrumbsCtrl ) {
248 | this.breadcrumbsCtrl.removeChild(this.breadcrumbsCtrl.lastElementChild);
249 | }
250 | };
251 |
252 | MLMenu.prototype._menuOut = function(clickPosition) {
253 | // the current menu
254 | var self = this,
255 | currentMenu = this.menusArr[this.current_menu].menuEl,
256 | isBackNavigation = typeof clickPosition == 'undefined' ? true : false;
257 |
258 | // slide out current menu items - first, set the delays for the items
259 | this.menusArr[this.current_menu].menuItems.forEach(function(item, pos) {
260 | item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + 'ms' : parseInt(Math.abs(clickPosition - pos) * self.options.itemsDelayInterval) + 'ms';
261 | });
262 | // animation class
263 | if( this.options.direction === 'r2l' ) {
264 | classie.add(currentMenu, !isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight');
265 | }
266 | else {
267 | classie.add(currentMenu, isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight');
268 | }
269 | };
270 |
271 | MLMenu.prototype._menuIn = function(nextMenuEl, clickPosition) {
272 | var self = this,
273 | // the current menu
274 | currentMenu = this.menusArr[this.current_menu].menuEl,
275 | isBackNavigation = typeof clickPosition == 'undefined' ? true : false,
276 | // index of the nextMenuEl
277 | nextMenuIdx = this.menus.indexOf(nextMenuEl),
278 |
279 | nextMenu = this.menusArr[nextMenuIdx],
280 | nextMenuEl = nextMenu.menuEl,
281 | nextMenuItems = nextMenu.menuItems,
282 | nextMenuItemsTotal = nextMenuItems.length;
283 |
284 | // slide in next menu items - first, set the delays for the items
285 | nextMenuItems.forEach(function(item, pos) {
286 | item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + 'ms' : parseInt(Math.abs(clickPosition - pos) * self.options.itemsDelayInterval) + 'ms';
287 |
288 | // we need to reset the classes once the last item animates in
289 | // the "last item" is the farthest from the clicked item
290 | // let's calculate the index of the farthest item
291 | var farthestIdx = clickPosition <= nextMenuItemsTotal/2 || isBackNavigation ? nextMenuItemsTotal - 1 : 0;
292 |
293 | if( pos === farthestIdx ) {
294 | onEndAnimation(item, function() {
295 | // reset classes
296 | if( self.options.direction === 'r2l' ) {
297 | classie.remove(currentMenu, !isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight');
298 | classie.remove(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
299 | }
300 | else {
301 | classie.remove(currentMenu, isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight');
302 | classie.remove(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
303 | }
304 | classie.remove(currentMenu, 'menu__level--current');
305 | classie.add(nextMenuEl, 'menu__level--current');
306 |
307 | //reset current
308 | self.current_menu = nextMenuIdx;
309 |
310 | // control back button and breadcrumbs navigation elements
311 | if( !isBackNavigation ) {
312 | // show back button
313 | if( self.options.backCtrl ) {
314 | classie.remove(self.backCtrl, 'menu__back--hidden');
315 | }
316 |
317 | // add breadcrumb
318 | self._addBreadcrumb(nextMenuIdx);
319 | }
320 | else if( self.current_menu === 0 && self.options.backCtrl ) {
321 | // hide back button
322 | classie.add(self.backCtrl, 'menu__back--hidden');
323 | }
324 |
325 | // we can navigate again..
326 | self.isAnimating = false;
327 |
328 | // focus retention
329 | nextMenuEl.focus();
330 | });
331 | }
332 | });
333 |
334 | // animation class
335 | if( this.options.direction === 'r2l' ) {
336 | classie.add(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
337 | }
338 | else {
339 | classie.add(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
340 | }
341 | };
342 |
343 | MLMenu.prototype._addBreadcrumb = function(idx) {
344 | if( !this.options.breadcrumbsCtrl ) {
345 | return false;
346 | }
347 |
348 | var bc = document.createElement('a');
349 | bc.href = '#'; // make it focusable
350 | bc.innerHTML = idx ? this.menusArr[idx].name : this.options.initialBreadcrumb;
351 | this.breadcrumbsCtrl.appendChild(bc);
352 |
353 | var self = this;
354 | bc.addEventListener('click', function(ev) {
355 | ev.preventDefault();
356 |
357 | // do nothing if this breadcrumb is the last one in the list of breadcrumbs
358 | if( !bc.nextSibling || self.isAnimating ) {
359 | return false;
360 | }
361 | self.isAnimating = true;
362 |
363 | // current menu slides out
364 | self._menuOut();
365 | // next menu slides in
366 | var nextMenu = self.menusArr[idx].menuEl;
367 | self._menuIn(nextMenu);
368 |
369 | // remove breadcrumbs that are ahead
370 | var siblingNode;
371 | while (siblingNode = bc.nextSibling) {
372 | self.breadcrumbsCtrl.removeChild(siblingNode);
373 | }
374 | });
375 | };
376 |
377 | MLMenu.prototype._crawlCrumbs = function(currentMenu, menuArray) {
378 | if (menuArray[currentMenu].backIdx != 0) {
379 | this._crawlCrumbs(menuArray[currentMenu].backIdx, menuArray);
380 | }
381 | // create breadcrumb
382 | this._addBreadcrumb(currentMenu);
383 | }
384 |
385 | window.MLMenu = MLMenu;
386 |
387 | })(window);
--------------------------------------------------------------------------------
/js/modernizr-custom.js:
--------------------------------------------------------------------------------
1 | /*! modernizr 3.2.0 (Custom Build) | MIT *
2 | * http://modernizr.com/download/?-cssanimations-prefixed !*/
3 | !function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,i,s,a;for(var f in C)if(C.hasOwnProperty(f)){if(e=[],n=C[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;td;d++)if(v=e[d],h=z.style[v],a(v,"-")&&(v=s(v)),z.style[v]!==t){if(i||r(o,"undefined"))return l(),"pfx"==n?v:!0;try{z.style[v]=o}catch(g){}if(z.style[v]!=h)return l(),"pfx"==n?v:!0}return l(),!1}function h(e,n,t,o,i){var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(s+" ")+s).split(" ");return r(n,"string")||r(n,"undefined")?v(a,n,o,i):(a=(e+" "+N.join(s+" ")+s).split(" "),u(a,n,t))}function y(e,n,r){return h(e,t,t,n,r)}var g=[],C=[],_={_version:"3.2.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=_,Modernizr=new Modernizr;var w=n.documentElement,x="svg"===w.nodeName.toLowerCase(),S="Moz O ms Webkit",b=_._config.usePrefixes?S.split(" "):[];_._cssomPrefixes=b;var E=function(n){var r,o=prefixes.length,i=e.CSSRule;if("undefined"==typeof i)return t;if(!n)return!1;if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in i)return"@"+n;for(var s=0;o>s;s++){var a=prefixes[s],f=a.toUpperCase()+"_"+r;if(f in i)return"@-"+a.toLowerCase()+"-"+n}return!1};_.atRule=E;var N=_._config.usePrefixes?S.toLowerCase().split(" "):[];_._domPrefixes=N;var P={elem:f("modernizr")};Modernizr._q.push(function(){delete P.elem});var z={style:P.elem.style};Modernizr._q.unshift(function(){delete z.style}),_.testAllProps=h;_.prefixed=function(e,n,t){return 0===e.indexOf("@")?E(e):(-1!=e.indexOf("-")&&(e=s(e)),n?h(e,n,t):h(e,"pfx"))};_.testAllProps=y,Modernizr.addTest("cssanimations",y("animationName","a",!0)),o(),i(g),delete _.addTest,delete _.addAsyncTest;for(var T=0;T