├── README.md ├── css ├── component.css ├── demo.css ├── icons.css └── normalize.css ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt └── linecons │ ├── Read Me.txt │ ├── license.txt │ ├── linecons.dev.svg │ ├── linecons.eot │ ├── linecons.svg │ ├── linecons.ttf │ ├── linecons.woff │ └── lte-ie7.js ├── index.html ├── index2.html ├── index3.html └── js ├── classie.js ├── mlpushmenu.js └── modernizr.custom.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | MultiLevelPushMenu 3 | ========= 4 | An experimental push menu with multi-level functionality that allows endless nesting of navigation elements. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=16252) 7 | 8 | [demo](http://tympanus.net/Development/MultiLevelPushMenu/) 9 | 10 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/) -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:after, 3 | *::before { 4 | -webkit-box-sizing: border-box; 5 | -moz-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | html, body, .container, .scroller { 10 | height: 100%; 11 | } 12 | 13 | .scroller { 14 | overflow-y: scroll; 15 | } 16 | 17 | .scroller, 18 | .scroller-inner { 19 | position: relative; 20 | } 21 | 22 | .container { 23 | position: relative; 24 | overflow: hidden; 25 | background: #34495e; 26 | } 27 | 28 | .menu-trigger { 29 | position: relative; 30 | padding-left: 60px; 31 | font-size: 0.9em; 32 | } 33 | 34 | .menu-trigger:before { 35 | content: ''; 36 | position: absolute; 37 | top: 2px; 38 | left: 0; 39 | width: 40px; 40 | height: 6px; 41 | background: #fff; 42 | box-shadow: 0 6px #34495e, 0 12px #fff, 0 18px #34495e, 0 24px #fff; 43 | } 44 | 45 | .mp-pusher { 46 | position: relative; 47 | left: 0; 48 | height: 100%; 49 | perspective: 1000px; 50 | } 51 | 52 | .mp-menu { 53 | position: absolute; 54 | top: 0; 55 | left: 0; 56 | z-index: 1; 57 | width: 300px; 58 | height: 100%; 59 | -webkit-transform: translate3d(-100%, 0, 0); 60 | transform: translate3d(-100%, 0, 0); 61 | } 62 | 63 | .mp-level { 64 | position: absolute; 65 | top: 0; 66 | left: 0; 67 | width: 100%; 68 | height: 100%; 69 | background: #336ca6; 70 | -webkit-transform: translate3d(-100%, 0, 0); 71 | transform: translate3d(-100%, 0, 0); 72 | } 73 | 74 | /* overlays for pusher and for level that gets covered */ 75 | .mp-pusher::after, 76 | .mp-level::after, 77 | .mp-level::before { 78 | content: ''; 79 | position: absolute; 80 | top: 0; 81 | right: 0; 82 | width: 0; 83 | height: 0; 84 | opacity: 0; 85 | } 86 | 87 | .mp-pusher::after, 88 | .mp-level::after { 89 | background: rgba(0,0,0,0.3); 90 | -webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s; 91 | transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s; 92 | } 93 | 94 | .mp-level::after { 95 | z-index: -1; 96 | } 97 | 98 | .mp-pusher.mp-pushed::after, 99 | .mp-level.mp-level-overlay::after { 100 | width: 100%; 101 | height: 100%; 102 | opacity: 1; 103 | -webkit-transition: opacity 0.3s; 104 | transition: opacity 0.3s; 105 | } 106 | 107 | .mp-level.mp-level-overlay { 108 | cursor: pointer; 109 | } 110 | 111 | .mp-level.mp-level-overlay.mp-level::before { 112 | width: 100%; 113 | height: 100%; 114 | background: transparent; 115 | opacity: 1; 116 | } 117 | 118 | .mp-pusher, 119 | .mp-level { 120 | -webkit-transition: -webkit-transform 0.5s; 121 | transition: transform 0.5s; 122 | } 123 | 124 | /* overlap */ 125 | .mp-overlap .mp-level.mp-level-open { 126 | box-shadow: 1px 0 2px rgba(0,0,0,0.2); 127 | -webkit-transform: translate3d(-40px, 0, 0); 128 | transform: translate3d(-40px, 0, 0); 129 | } 130 | 131 | /* First level */ 132 | .mp-menu > .mp-level, 133 | .mp-menu > .mp-level.mp-level-open, 134 | .mp-menu.mp-overlap > .mp-level, 135 | .mp-menu.mp-overlap > .mp-level.mp-level-open { 136 | box-shadow: none; 137 | -webkit-transform: translate3d(0, 0, 0); 138 | transform: translate3d(0, 0, 0); 139 | } 140 | 141 | /* cover */ 142 | .mp-cover .mp-level.mp-level-open { 143 | -webkit-transform: translate3d(0, 0, 0); 144 | transform: translate3d(0, 0, 0); 145 | } 146 | 147 | .mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) { 148 | -webkit-transform: translate3d(-100%, 0, 0); 149 | transform: translate3d(-100%, 0, 0); 150 | } 151 | 152 | /* content style */ 153 | .mp-menu ul { 154 | margin: 0; 155 | padding: 0; 156 | list-style: none; 157 | } 158 | 159 | .mp-menu h2 { 160 | margin: 0; 161 | padding: 1em; 162 | color: rgba(0,0,0,0.4); 163 | text-shadow: 0 0 1px rgba(0,0,0,0.1); 164 | font-weight: 300; 165 | font-size: 2em; 166 | } 167 | 168 | .mp-menu.mp-overlap h2::before { 169 | position: absolute; 170 | top: 0; 171 | right: 0; 172 | margin-right: 8px; 173 | font-size: 75%; 174 | line-height: 1.8; 175 | opacity: 0; 176 | -webkit-transform: translateX(-100%); 177 | transform: translateX(-100%); 178 | -webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s; 179 | transition: opacity 0.3s, transform 0.1s 0.3s; 180 | } 181 | 182 | .mp-menu.mp-cover h2 { 183 | text-transform: uppercase; 184 | letter-spacing: 1px; 185 | font-weight: 700; 186 | font-size: 1em; 187 | } 188 | 189 | .mp-overlap .mp-level.mp-level-overlay > h2::before { 190 | opacity: 1; 191 | -webkit-transform: translateX(0); 192 | transform: translateX(0); 193 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 194 | transition: transform 0.3s, opacity 0.3s; 195 | } 196 | 197 | .mp-menu ul li > a { 198 | display: block; 199 | padding: 0.7em 1em 0.7em 1.8em; 200 | outline: none; 201 | box-shadow: inset 0 -1px rgba(0,0,0,0.2); 202 | text-shadow: 0 0 1px rgba(255,255,255,0.1); 203 | font-size: 1.4em; 204 | -webkit-transition: background 0.3s, box-shadow 0.3s; 205 | transition: background 0.3s, box-shadow 0.3s; 206 | } 207 | 208 | .mp-menu ul li::before { 209 | position: absolute; 210 | left: 10px; 211 | z-index: -1; 212 | color: rgba(0,0,0,0.2); 213 | line-height: 3.5; 214 | } 215 | 216 | .mp-level > ul > li:first-child > a { 217 | box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2); 218 | } 219 | 220 | .mp-menu ul li a:hover, 221 | .mp-level > ul > li:first-child > a:hover { 222 | background: rgba(0,0,0,0.2); 223 | box-shadow: inset 0 -1px rgba(0,0,0,0); 224 | } 225 | 226 | .mp-menu .mp-level.mp-level-overlay > ul > li > a, 227 | .mp-level.mp-level-overlay > ul > li:first-child > a { 228 | box-shadow: inset 0 -1px rgba(0,0,0,0); 229 | } 230 | 231 | .mp-level > ul > li:first-child > a:hover, 232 | .mp-level.mp-level-overlay > ul > li:first-child > a { 233 | box-shadow: inset 0 -1px rgba(0,0,0,0), inset 0 1px rgba(0,0,0,0); 234 | } /* seems like Chrome 34.0.1847.131 needs the second shadow otherwise the transition breaks */ 235 | 236 | .mp-back { 237 | position: relative; 238 | display: block; 239 | padding: 1em; 240 | outline: none; 241 | background: rgba(0,0,0,0.1); 242 | box-shadow: inset 0 1px rgba(0,0,0,0.1); 243 | color: #fff; 244 | text-transform: uppercase; 245 | letter-spacing: 1px; 246 | font-weight: 700; 247 | font-size: 0.8em; 248 | -webkit-transition: background 0.3s; 249 | transition: background 0.3s; 250 | } 251 | 252 | .mp-back::after { 253 | content: "\e037"; 254 | position: absolute; 255 | right: 10px; 256 | color: rgba(0,0,0,0.3); 257 | font-size: 1.3em; 258 | font-family: 'linecons'; 259 | } 260 | 261 | .mp-menu .mp-level.mp-level-overlay > .mp-back, 262 | .mp-menu .mp-level.mp-level-overlay > .mp-back::after { 263 | background: transparent; 264 | box-shadow: none; 265 | color: transparent; 266 | } 267 | 268 | /* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */ 269 | /* We'll show the first level only */ 270 | .no-csstransforms3d .mp-pusher, 271 | .no-js .mp-pusher { 272 | padding-left: 300px; 273 | } 274 | 275 | .no-csstransforms3d .mp-menu .mp-level, 276 | .no-js .mp-menu .mp-level { 277 | display: none; 278 | } 279 | 280 | .no-csstransforms3d .mp-menu > .mp-level, 281 | .no-js .mp-menu > .mp-level { 282 | display: block; 283 | } -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 2 | @font-face { 3 | font-weight: normal; 4 | font-style: normal; 5 | font-family: 'codropsicons'; 6 | src:url('../fonts/codropsicons/codropsicons.eot'); 7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 11 | } 12 | 13 | body { 14 | background: #34495e; 15 | color: #fff; 16 | font-weight: 300; 17 | font-family: 'Lato', Calibri, Arial, sans-serif; 18 | } 19 | 20 | a { 21 | text-decoration: none; 22 | color: #f7f7f7; 23 | outline: none; 24 | } 25 | 26 | a:hover, a:focus { 27 | color: #fff; 28 | outline: none; 29 | } 30 | 31 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 32 | .clearfix:before, 33 | .clearfix:after { 34 | display: table; 35 | content: " "; 36 | } 37 | 38 | .clearfix:after { 39 | clear: both; 40 | } 41 | 42 | .codrops-header, 43 | .codrops-top { 44 | font-family: 'Lato', Arial, sans-serif; 45 | } 46 | 47 | .codrops-header { 48 | margin: 0 auto; 49 | padding: 2em; 50 | background: rgba(0,0,0,0.01); 51 | text-align: center; 52 | } 53 | 54 | .codrops-header h1 { 55 | margin: 0; 56 | font-weight: 300; 57 | font-size: 2.625em; 58 | line-height: 1.3; 59 | } 60 | 61 | .codrops-header span { 62 | display: block; 63 | padding: 0 0 0.6em 0.1em; 64 | font-size: 60%; 65 | opacity: 0.7; 66 | } 67 | 68 | /* To Navigation Style */ 69 | .codrops-top { 70 | width: 100%; 71 | background: #91cfa1; 72 | background: rgba(255, 255, 255, 0.1); 73 | text-transform: uppercase; 74 | font-size: 0.69em; 75 | line-height: 2.2; 76 | } 77 | 78 | .codrops-top a { 79 | display: inline-block; 80 | padding: 0 1em; 81 | color: #fff; 82 | text-decoration: none; 83 | letter-spacing: 0.1em; 84 | } 85 | 86 | .codrops-top a:hover { 87 | background: rgba(255,255,255,0.95); 88 | color: #333; 89 | } 90 | 91 | .codrops-top span.right { 92 | float: right; 93 | } 94 | 95 | .codrops-top span.right a { 96 | display: block; 97 | float: left; 98 | } 99 | 100 | .codrops-icon:before { 101 | margin: 0 4px; 102 | text-transform: none; 103 | font-weight: normal; 104 | font-style: normal; 105 | font-variant: normal; 106 | font-family: 'codropsicons'; 107 | line-height: 1; 108 | speak: none; 109 | -webkit-font-smoothing: antialiased; 110 | } 111 | 112 | .codrops-icon-drop:before { 113 | content: "\e001"; 114 | } 115 | 116 | .codrops-icon-prev:before { 117 | content: "\e004"; 118 | } 119 | 120 | /* Demo Buttons Style */ 121 | .codrops-demos { 122 | padding-top: 1em; 123 | font-size: 1.1em; 124 | } 125 | 126 | .codrops-demos a { 127 | display: block; 128 | float: left; 129 | clear: both; 130 | margin: 0.5em 0.5em 0.5em 1.9em; 131 | padding: 1em 1.1em; 132 | width: 280px; 133 | outline: none; 134 | color: #fff; 135 | background: #336ca6; 136 | text-align: center; 137 | text-decoration: none; 138 | font-weight: 700; 139 | } 140 | 141 | .codrops-demos a:hover, 142 | .codrops-demos a.current-demo, 143 | .codrops-demos a.current-demo:hover { 144 | opacity: 0.6; 145 | } 146 | 147 | .content { 148 | padding: 4em 2em; 149 | max-width: 1200px; 150 | margin: 0 auto; 151 | } 152 | 153 | .block { 154 | float: left; 155 | padding: 1em 3em; 156 | } 157 | 158 | .block-40 { 159 | width: 40%; 160 | } 161 | 162 | .block-60 { 163 | width: 60%; 164 | } 165 | 166 | .block p { 167 | margin: 0; 168 | padding: 0 1em 0.6em; 169 | font-size: 1.8em; 170 | line-height: 1.5; 171 | } 172 | 173 | @media screen and (max-width: 69em) { 174 | .block { 175 | float: none; 176 | width: 100% !important; 177 | padding: 1em; 178 | } 179 | } 180 | 181 | @media screen and (max-width: 25em) { 182 | 183 | body { 184 | font-size: 80%; 185 | } 186 | 187 | .codrops-icon span { 188 | display: none; 189 | } 190 | 191 | } -------------------------------------------------------------------------------- /css/icons.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'linecons'; 3 | src:url('../fonts/linecons/linecons.eot'); 4 | src:url('../fonts/linecons/linecons.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/linecons/linecons.woff') format('woff'), 6 | url('../fonts/linecons/linecons.ttf') format('truetype'), 7 | url('../fonts/linecons/linecons.svg#linecons') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | .icon:before { 13 | font-family: 'linecons'; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: normal; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | display: inline-block; 21 | margin-right: 0.6em; 22 | -webkit-font-smoothing: antialiased; 23 | } 24 | .icon-female:before { 25 | content: "\f182"; 26 | } 27 | .icon-male:before { 28 | content: "\f183"; 29 | } 30 | .icon-arrow-left:before { 31 | content: "\e032"; 32 | } 33 | .icon-arrow-left-2:before { 34 | content: "\e034"; 35 | } 36 | .icon-arrow-left-3:before { 37 | content: "\e036"; 38 | } 39 | .icon-arrow-left-4:before { 40 | content: "\e038"; 41 | } 42 | .icon-arrow-right:before { 43 | content: "\e035"; 44 | } 45 | .icon-arrow-right-2:before { 46 | content: "\e037"; 47 | } 48 | .icon-arrow-right-3:before { 49 | content: "\e039"; 50 | } 51 | .icon-arrow-right-4:before { 52 | content: "\e033"; 53 | } 54 | 55 | .icon-phone:before { 56 | content: "\e000"; 57 | } 58 | .icon-news:before { 59 | content: "\e001"; 60 | } 61 | .icon-photo:before { 62 | content: "\e002"; 63 | } 64 | .icon-shop:before { 65 | content: "\e003"; 66 | } 67 | .icon-wallet:before { 68 | content: "\e004"; 69 | } 70 | .icon-t-shirt:before { 71 | content: "\e005"; 72 | } 73 | .icon-heart:before { 74 | content: "\e006"; 75 | } 76 | .icon-cloud:before { 77 | content: "\e007"; 78 | } 79 | .icon-display:before { 80 | content: "\e008"; 81 | } 82 | .icon-diamond:before { 83 | content: "\e009"; 84 | } 85 | .icon-banknote:before { 86 | content: "\e00a"; 87 | } 88 | .icon-data:before { 89 | content: "\e00b"; 90 | } 91 | .icon-music:before { 92 | content: "\e00c"; 93 | } 94 | .icon-location:before { 95 | content: "\e00d"; 96 | } 97 | .icon-star:before { 98 | content: "\e00e"; 99 | } 100 | .icon-tv:before { 101 | content: "\e00f"; 102 | } 103 | .icon-eye:before { 104 | content: "\e010"; 105 | } 106 | .icon-megaphone:before { 107 | content: "\e011"; 108 | } 109 | .icon-study:before { 110 | content: "\e012"; 111 | } 112 | .icon-bubble:before { 113 | content: "\e013"; 114 | } 115 | .icon-sound:before { 116 | content: "\e014"; 117 | } 118 | .icon-video:before { 119 | content: "\e015"; 120 | } 121 | .icon-stack:before { 122 | content: "\e016"; 123 | } 124 | .icon-lab:before { 125 | content: "\e017"; 126 | } 127 | .icon-food:before { 128 | content: "\e018"; 129 | } 130 | .icon-cup:before { 131 | content: "\e019"; 132 | } 133 | .icon-trash:before { 134 | content: "\e01a"; 135 | } 136 | .icon-user:before { 137 | content: "\e01b"; 138 | } 139 | .icon-key:before { 140 | content: "\e01c"; 141 | } 142 | .icon-fire:before { 143 | content: "\e01d"; 144 | } 145 | .icon-clip:before { 146 | content: "\e01e"; 147 | } 148 | .icon-mail:before { 149 | content: "\e01f"; 150 | } 151 | .icon-search:before { 152 | content: "\e020"; 153 | } 154 | .icon-settings:before { 155 | content: "\e021"; 156 | } 157 | .icon-like:before { 158 | content: "\e022"; 159 | } 160 | .icon-calendar:before { 161 | content: "\e023"; 162 | } 163 | .icon-camera:before { 164 | content: "\e024"; 165 | } 166 | .icon-tag:before { 167 | content: "\e025"; 168 | } 169 | .icon-note:before { 170 | content: "\e026"; 171 | } 172 | .icon-clock:before { 173 | content: "\e027"; 174 | } 175 | .icon-lock:before { 176 | content: "\e028"; 177 | } 178 | .icon-vynil:before { 179 | content: "\e029"; 180 | } 181 | .icon-truck:before { 182 | content: "\e02a"; 183 | } 184 | .icon-paperplane:before { 185 | content: "\e02b"; 186 | } 187 | .icon-bulb:before { 188 | content: "\e02c"; 189 | } 190 | .icon-pen:before { 191 | content: "\e02d"; 192 | } 193 | .icon-params:before { 194 | content: "\e02e"; 195 | } 196 | .icon-world:before { 197 | content: "\e02f"; 198 | } 199 | -------------------------------------------------------------------------------- /css/normalize.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;} -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLevelPushMenu/cae3f19f814cb539b954860e829b08d8eaf0dc0f/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLevelPushMenu/cae3f19f814cb539b954860e829b08d8eaf0dc0f/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLevelPushMenu/cae3f19f814cb539b954860e829b08d8eaf0dc0f/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/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/linecons/Read Me.txt: -------------------------------------------------------------------------------- 1 | To modify your generated font, use the *dev.svg* file, located in the *fonts* folder in this package. You can import this dev.svg file to the IcoMoon app. All the tags (class names) and the Unicode points of your glyphs are saved in this file. 2 | 3 | See the documentation for more info on how to use this package: http://icomoon.io/#docs/font-face -------------------------------------------------------------------------------- /fonts/linecons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Entypo -- http://www.entypo.com/ 2 | License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/ 3 | 4 | 5 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 6 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 7 | 8 | 9 | Icon Set: Linecons -- http://designmodo.com/linecons-free/ 10 | License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/ -------------------------------------------------------------------------------- /fonts/linecons/linecons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLevelPushMenu/cae3f19f814cb539b954860e829b08d8eaf0dc0f/fonts/linecons/linecons.eot -------------------------------------------------------------------------------- /fonts/linecons/linecons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 18 | 22 | 28 | 35 | 43 | 49 | 55 | 62 | 67 | 77 | 107 | 114 | 125 | 132 | 141 | 152 | 162 | 174 | 180 | 187 | 195 | 199 | 206 | 220 | 231 | 236 | 244 | 252 | 262 | 267 | 268 | 273 | 279 | 306 | 325 | 330 | 337 | 343 | 348 | 355 | 360 | 370 | 379 | 386 | 393 | 409 | 451 | 469 | 471 | 473 | 475 | 477 | 478 | 479 | 482 | 485 | 486 | 487 | 488 | -------------------------------------------------------------------------------- /fonts/linecons/linecons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLevelPushMenu/cae3f19f814cb539b954860e829b08d8eaf0dc0f/fonts/linecons/linecons.ttf -------------------------------------------------------------------------------- /fonts/linecons/linecons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLevelPushMenu/cae3f19f814cb539b954860e829b08d8eaf0dc0f/fonts/linecons/linecons.woff -------------------------------------------------------------------------------- /fonts/linecons/lte-ie7.js: -------------------------------------------------------------------------------- 1 | /* Load this script using conditional IE comments if you need to support IE 7 and IE 6. */ 2 | 3 | window.onload = function() { 4 | function addIcon(el, entity) { 5 | var html = el.innerHTML; 6 | el.innerHTML = '' + entity + '' + html; 7 | } 8 | var icons = { 9 | 'icon-phone' : '', 10 | 'icon-news' : '', 11 | 'icon-photo' : '', 12 | 'icon-shop' : '', 13 | 'icon-wallet' : '', 14 | 'icon-t-shirt' : '', 15 | 'icon-heart' : '', 16 | 'icon-cloud' : '', 17 | 'icon-display' : '', 18 | 'icon-diamond' : '', 19 | 'icon-banknote' : '', 20 | 'icon-data' : '', 21 | 'icon-music' : '', 22 | 'icon-location' : '', 23 | 'icon-star' : '', 24 | 'icon-tv' : '', 25 | 'icon-eye' : '', 26 | 'icon-megaphone' : '', 27 | 'icon-study' : '', 28 | 'icon-bubble' : '', 29 | 'icon-sound' : '', 30 | 'icon-video' : '', 31 | 'icon-stack' : '', 32 | 'icon-lab' : '', 33 | 'icon-food' : '', 34 | 'icon-cup' : '', 35 | 'icon-trash' : '', 36 | 'icon-user' : '', 37 | 'icon-key' : '', 38 | 'icon-fire' : '', 39 | 'icon-clip' : '', 40 | 'icon-mail' : '', 41 | 'icon-search' : '', 42 | 'icon-settings' : '', 43 | 'icon-like' : '', 44 | 'icon-calendar' : '', 45 | 'icon-camera' : '', 46 | 'icon-tag' : '', 47 | 'icon-note' : '', 48 | 'icon-clock' : '', 49 | 'icon-lock' : '', 50 | 'icon-vynil' : '', 51 | 'icon-truck' : '', 52 | 'icon-paperplane' : '', 53 | 'icon-bulb' : '', 54 | 'icon-pen' : '', 55 | 'icon-params' : '', 56 | 'icon-world' : '', 57 | 'icon-arrow-left' : '', 58 | 'icon-untitled' : '', 59 | 'icon-arrow-left-2' : '', 60 | 'icon-arrow-right' : '', 61 | 'icon-arrow-left-3' : '', 62 | 'icon-arrow-right-2' : '', 63 | 'icon-arrow-left-4' : '', 64 | 'icon-arrow-right-3' : '', 65 | 'icon-female' : '', 66 | 'icon-male' : '' 67 | }, 68 | els = document.getElementsByTagName('*'), 69 | i, attr, html, c, el; 70 | for (i = 0; ; i += 1) { 71 | el = els[i]; 72 | if(!el) { 73 | break; 74 | } 75 | attr = el.getAttribute('data-icon'); 76 | if (attr) { 77 | addIcon(el, attr); 78 | } 79 | c = el.className; 80 | c = c.match(/icon-[^\s'"]+/); 81 | if (c && icons[c[0]]) { 82 | addIcon(el, icons[c[0]]); 83 | } 84 | } 85 | }; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Multi-Level Push Menu - Demo 1 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | 23 | 24 | 142 | 143 | 144 |
145 |
146 | 147 |
148 | Previous Demo 149 | Back to the Codrops Article 150 |
151 |
152 |

Multi-Level Push Menu Off-screen navigation with multiple levels

153 |
154 |
155 |
156 |

Open/Close Menu

157 | 162 |
163 |
164 |

Demo 1: Overlapping levels

165 |

This menu will open by pushing the website content to the right. It has multi-level functionality, allowing endless nesting of navigation elements.

166 |

The next level can optionally overlap or cover the previous one.

167 |
168 |
169 |
170 |
171 | 172 |
173 |
174 | 175 | 176 | 179 | 180 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Multi-Level Push Menu - Demo 2 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | 23 | 24 | 152 | 153 | 154 |
155 |
156 | 157 |
158 | Previous Demo 159 | Back to the Codrops Article 160 |
161 |
162 |

Multi-Level Push Menu Off-screen navigation with multiple levels

163 |
164 |
165 |
166 |

Open/Close Menu

167 | 172 |
173 |
174 |

Demo 2: Covering levels with back link

175 |

This menu will open by pushing the website content to the right. It has multi-level functionality, allowing endless nesting of navigation elements.

176 |

The next level can optionally overlap or cover the previous one.

177 |
178 |
179 |
180 |
181 | 182 |
183 |
184 | 185 | 186 | 191 | 192 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Multi-Level Push Menu - Demo 2 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | 23 | 24 | 152 | 153 | 154 |
155 |
156 | 157 |
158 | Previous Demo 159 | Back to the Codrops Article 160 |
161 |
162 |

Multi-Level Push Menu Off-screen navigation with multiple levels

163 |
164 |
165 |
166 |

Open/Close Menu

167 | 172 |
173 |
174 |

Demo 3: Overlapping levels with back links

175 |

This menu will open by pushing the website content to the right. It has multi-level functionality, allowing endless nesting of navigation elements.

176 |

The next level can optionally overlap or cover the previous one.

177 |
178 |
179 |
180 |
181 | 182 |
183 |
184 | 185 | 186 | 189 | 190 | -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /js/mlpushmenu.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mlpushmenu.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2013, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;( function( window ) { 12 | 13 | 'use strict'; 14 | 15 | function extend( a, b ) { 16 | for( var key in b ) { 17 | if( b.hasOwnProperty( key ) ) { 18 | a[key] = b[key]; 19 | } 20 | } 21 | return a; 22 | } 23 | 24 | // taken from https://github.com/inuyaksa/jquery.nicescroll/blob/master/jquery.nicescroll.js 25 | function hasParent( e, id ) { 26 | if (!e) return false; 27 | var el = e.target||e.srcElement||e||false; 28 | while (el && el.id != id) { 29 | el = el.parentNode||false; 30 | } 31 | return (el!==false); 32 | } 33 | 34 | // returns the depth of the element "e" relative to element with id=id 35 | // for this calculation only parents with classname = waypoint are considered 36 | function getLevelDepth( e, id, waypoint, cnt ) { 37 | cnt = cnt || 0; 38 | if ( e.id.indexOf( id ) >= 0 ) return cnt; 39 | if( classie.has( e, waypoint ) ) { 40 | ++cnt; 41 | } 42 | return e.parentNode && getLevelDepth( e.parentNode, id, waypoint, cnt ); 43 | } 44 | 45 | // http://coveroverflow.com/a/11381730/989439 46 | function mobilecheck() { 47 | var check = false; 48 | (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); 49 | return check; 50 | } 51 | 52 | // returns the closest element to 'e' that has class "classname" 53 | function closest( e, classname ) { 54 | if( classie.has( e, classname ) ) { 55 | return e; 56 | } 57 | return e.parentNode && closest( e.parentNode, classname ); 58 | } 59 | 60 | function mlPushMenu( el, trigger, options ) { 61 | this.el = el; 62 | this.trigger = trigger; 63 | this.options = extend( this.defaults, options ); 64 | // support 3d transforms 65 | this.support = Modernizr.csstransforms3d; 66 | if( this.support ) { 67 | this._init(); 68 | } 69 | } 70 | 71 | mlPushMenu.prototype = { 72 | defaults : { 73 | // overlap: there will be a gap between open levels 74 | // cover: the open levels will be on top of any previous open level 75 | type : 'overlap', // overlap || cover 76 | // space between each overlaped level 77 | levelSpacing : 40, 78 | // classname for the element (if any) that when clicked closes the current level 79 | backClass : 'mp-back' 80 | }, 81 | _init : function() { 82 | // if menu is open or not 83 | this.open = false; 84 | // level depth 85 | this.level = 0; 86 | // the moving wrapper 87 | this.wrapper = document.getElementById( 'mp-pusher' ); 88 | // the mp-level elements 89 | this.levels = Array.prototype.slice.call( this.el.querySelectorAll( 'div.mp-level' ) ); 90 | // save the depth of each of these mp-level elements 91 | var self = this; 92 | this.levels.forEach( function( el, i ) { el.setAttribute( 'data-level', getLevelDepth( el, self.el.id, 'mp-level' ) ); } ); 93 | // the menu items 94 | this.menuItems = Array.prototype.slice.call( this.el.querySelectorAll( 'li' ) ); 95 | // if type == "cover" these will serve as hooks to move back to the previous level 96 | this.levelBack = Array.prototype.slice.call( this.el.querySelectorAll( '.' + this.options.backClass ) ); 97 | // event type (if mobile use touch events) 98 | this.eventtype = mobilecheck() ? 'touchstart' : 'click'; 99 | // add the class mp-overlap or mp-cover to the main element depending on options.type 100 | classie.add( this.el, 'mp-' + this.options.type ); 101 | // initialize / bind the necessary events 102 | this._initEvents(); 103 | }, 104 | _initEvents : function() { 105 | var self = this; 106 | 107 | // the menu should close if clicking somewhere on the body 108 | var bodyClickFn = function( el ) { 109 | self._resetMenu(); 110 | el.removeEventListener( self.eventtype, bodyClickFn ); 111 | }; 112 | 113 | // open (or close) the menu 114 | this.trigger.addEventListener( this.eventtype, function( ev ) { 115 | ev.stopPropagation(); 116 | ev.preventDefault(); 117 | if( self.open ) { 118 | self._resetMenu(); 119 | } 120 | else { 121 | self._openMenu(); 122 | // the menu should close if clicking somewhere on the body (excluding clicks on the menu) 123 | document.addEventListener( self.eventtype, function( ev ) { 124 | if( self.open && !hasParent( ev.target, self.el.id ) ) { 125 | bodyClickFn( this ); 126 | } 127 | } ); 128 | } 129 | } ); 130 | 131 | // opening a sub level menu 132 | this.menuItems.forEach( function( el, i ) { 133 | // check if it has a sub level 134 | var subLevel = el.querySelector( 'div.mp-level' ); 135 | if( subLevel ) { 136 | el.querySelector( 'a' ).addEventListener( self.eventtype, function( ev ) { 137 | ev.preventDefault(); 138 | var level = closest( el, 'mp-level' ).getAttribute( 'data-level' ); 139 | if( self.level <= level ) { 140 | ev.stopPropagation(); 141 | classie.add( closest( el, 'mp-level' ), 'mp-level-overlay' ); 142 | self._openMenu( subLevel ); 143 | } 144 | } ); 145 | } 146 | } ); 147 | 148 | // closing the sub levels : 149 | // by clicking on the visible part of the level element 150 | this.levels.forEach( function( el, i ) { 151 | el.addEventListener( self.eventtype, function( ev ) { 152 | ev.stopPropagation(); 153 | var level = el.getAttribute( 'data-level' ); 154 | if( self.level > level ) { 155 | self.level = level; 156 | self._closeMenu(); 157 | } 158 | } ); 159 | } ); 160 | 161 | // by clicking on a specific element 162 | this.levelBack.forEach( function( el, i ) { 163 | el.addEventListener( self.eventtype, function( ev ) { 164 | ev.preventDefault(); 165 | var level = closest( el, 'mp-level' ).getAttribute( 'data-level' ); 166 | if( self.level <= level ) { 167 | ev.stopPropagation(); 168 | self.level = closest( el, 'mp-level' ).getAttribute( 'data-level' ) - 1; 169 | self.level === 0 ? self._resetMenu() : self._closeMenu(); 170 | } 171 | } ); 172 | } ); 173 | }, 174 | _openMenu : function( subLevel ) { 175 | // increment level depth 176 | ++this.level; 177 | 178 | // move the main wrapper 179 | var levelFactor = ( this.level - 1 ) * this.options.levelSpacing, 180 | translateVal = this.options.type === 'overlap' ? this.el.offsetWidth + levelFactor : this.el.offsetWidth; 181 | 182 | this._setTransform( 'translate3d(' + translateVal + 'px,0,0)' ); 183 | 184 | if( subLevel ) { 185 | // reset transform for sublevel 186 | this._setTransform( '', subLevel ); 187 | // need to reset the translate value for the level menus that have the same level depth and are not open 188 | for( var i = 0, len = this.levels.length; i < len; ++i ) { 189 | var levelEl = this.levels[i]; 190 | if( levelEl != subLevel && !classie.has( levelEl, 'mp-level-open' ) ) { 191 | this._setTransform( 'translate3d(-100%,0,0) translate3d(' + -1*levelFactor + 'px,0,0)', levelEl ); 192 | } 193 | } 194 | } 195 | // add class mp-pushed to main wrapper if opening the first time 196 | if( this.level === 1 ) { 197 | classie.add( this.wrapper, 'mp-pushed' ); 198 | this.open = true; 199 | } 200 | // add class mp-level-open to the opening level element 201 | classie.add( subLevel || this.levels[0], 'mp-level-open' ); 202 | }, 203 | // close the menu 204 | _resetMenu : function() { 205 | this._setTransform('translate3d(0,0,0)'); 206 | this.level = 0; 207 | // remove class mp-pushed from main wrapper 208 | classie.remove( this.wrapper, 'mp-pushed' ); 209 | this._toggleLevels(); 210 | this.open = false; 211 | }, 212 | // close sub menus 213 | _closeMenu : function() { 214 | var translateVal = this.options.type === 'overlap' ? this.el.offsetWidth + ( this.level - 1 ) * this.options.levelSpacing : this.el.offsetWidth; 215 | this._setTransform( 'translate3d(' + translateVal + 'px,0,0)' ); 216 | this._toggleLevels(); 217 | }, 218 | // translate the el 219 | _setTransform : function( val, el ) { 220 | el = el || this.wrapper; 221 | el.style.WebkitTransform = val; 222 | el.style.MozTransform = val; 223 | el.style.transform = val; 224 | }, 225 | // removes classes mp-level-open from closing levels 226 | _toggleLevels : function() { 227 | for( var i = 0, len = this.levels.length; i < len; ++i ) { 228 | var levelEl = this.levels[i]; 229 | if( levelEl.getAttribute( 'data-level' ) >= this.level + 1 ) { 230 | classie.remove( levelEl, 'mp-level-open' ); 231 | classie.remove( levelEl, 'mp-level-overlay' ); 232 | } 233 | else if( Number( levelEl.getAttribute( 'data-level' ) ) == this.level ) { 234 | classie.remove( levelEl, 'mp-level-overlay' ); 235 | } 236 | } 237 | } 238 | } 239 | 240 | // add to global namespace 241 | window.mlPushMenu = mlPushMenu; 242 | 243 | } )( window ); -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransforms3d-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f