├── README.md ├── css ├── component.css ├── demo.css └── normalize.css ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt └── ecoicons │ ├── Read Me.txt │ ├── ecoicons.dev.svg │ ├── ecoicons.eot │ ├── ecoicons.svg │ ├── ecoicons.ttf │ ├── ecoicons.woff │ └── license.txt ├── index.html └── js ├── classie.js ├── gnmenu.js └── modernizr.custom.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | Google Nexus Website Menu 3 | ========= 4 | A tutorial on how to recreate the slide out sidebar menu that can be seen on the Google Nexus 7 website. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=16030) 7 | 8 | [demo](http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/) 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 | @font-face { 10 | font-weight: normal; 11 | font-style: normal; 12 | font-family: 'ecoicons'; 13 | src: url("../fonts/ecoicons/ecoicons.eot"); 14 | src: url("../fonts/ecoicons/ecoicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ecoicons/ecoicons.woff") format("woff"), url("../fonts/ecoicons/ecoicons.ttf") format("truetype"), url("../fonts/ecoicons/ecoicons.svg#ecoicons") format("svg"); 15 | } 16 | 17 | /* Icomoon.com */ 18 | 19 | .gn-menu-main, 20 | .gn-menu-main ul { 21 | margin: 0; 22 | padding: 0; 23 | background: white; 24 | color: #5f6f81; 25 | list-style: none; 26 | text-transform: none; 27 | font-weight: 300; 28 | font-family: 'Lato', Arial, sans-serif; 29 | line-height: 60px; 30 | } 31 | 32 | .gn-menu-main { 33 | position: fixed; 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 60px; 38 | font-size: 13px; 39 | } 40 | 41 | .gn-menu-main a { 42 | display: block; 43 | height: 100%; 44 | color: #5f6f81; 45 | text-decoration: none; 46 | cursor: pointer; 47 | } 48 | 49 | .no-touch .gn-menu-main a:hover, 50 | .no-touch .gn-menu li.gn-search-item:hover, 51 | .no-touch .gn-menu li.gn-search-item:hover a { 52 | background: #5f6f81; 53 | color: white; 54 | } 55 | 56 | .gn-menu-main > li { 57 | display: block; 58 | float: left; 59 | height: 100%; 60 | border-right: 1px solid #c6d0da; 61 | text-align: center; 62 | } 63 | 64 | /* icon-only trigger (menu item) */ 65 | 66 | .gn-menu-main li.gn-trigger { 67 | position: relative; 68 | width: 60px; 69 | -webkit-touch-callout: none; 70 | -webkit-user-select: none; 71 | -khtml-user-select: none; 72 | -moz-user-select: none; 73 | -ms-user-select: none; 74 | user-select: none; 75 | } 76 | 77 | .gn-menu-main > li:last-child { 78 | float: right; 79 | border-right: none; 80 | border-left: 1px solid #c6d0da; 81 | } 82 | 83 | .gn-menu-main > li > a { 84 | padding: 0 30px; 85 | text-transform: uppercase; 86 | letter-spacing: 1px; 87 | font-weight: bold; 88 | } 89 | 90 | .gn-menu-main:after { 91 | display: table; 92 | clear: both; 93 | content: ""; 94 | } 95 | 96 | .gn-menu-wrapper { 97 | position: fixed; 98 | top: 60px; 99 | bottom: 0; 100 | left: 0; 101 | overflow: hidden; 102 | width: 60px; 103 | border-top: 1px solid #c6d0da; 104 | background: white; 105 | -webkit-transform: translateX(-60px); 106 | -moz-transform: translateX(-60px); 107 | transform: translateX(-60px); 108 | -webkit-transition: -webkit-transform 0.3s, width 0.3s; 109 | -moz-transition: -moz-transform 0.3s, width 0.3s; 110 | transition: transform 0.3s, width 0.3s; 111 | } 112 | 113 | .gn-scroller { 114 | position: absolute; 115 | overflow-y: scroll; 116 | width: 370px; 117 | height: 100%; 118 | } 119 | 120 | .gn-menu { 121 | border-bottom: 1px solid #c6d0da; 122 | text-align: left; 123 | font-size: 18px; 124 | } 125 | 126 | .gn-menu li:not(:first-child), 127 | .gn-menu li li { 128 | box-shadow: inset 0 1px #c6d0da 129 | } 130 | 131 | .gn-submenu li { 132 | overflow: hidden; 133 | height: 0; 134 | -webkit-transition: height 0.3s; 135 | -moz-transition: height 0.3s; 136 | transition: height 0.3s; 137 | } 138 | 139 | .gn-submenu li a { 140 | color: #c1c9d1 141 | } 142 | 143 | input.gn-search { 144 | position: relative; 145 | z-index: 10; 146 | padding-left: 60px; 147 | outline: none; 148 | border: none; 149 | background: transparent; 150 | color: #5f6f81; 151 | font-weight: 300; 152 | font-family: 'Lato', Arial, sans-serif; 153 | cursor: pointer; 154 | } 155 | 156 | /* placeholder */ 157 | 158 | .gn-search::-webkit-input-placeholder { 159 | color: #5f6f81 160 | } 161 | 162 | .gn-search:-moz-placeholder { 163 | color: #5f6f81 164 | } 165 | 166 | .gn-search::-moz-placeholder { 167 | color: #5f6f81 168 | } 169 | 170 | .gn-search:-ms-input-placeholder { 171 | color: #5f6f81 172 | } 173 | 174 | /* hide placeholder when active in Chrome */ 175 | 176 | .gn-search:focus::-webkit-input-placeholder, 177 | .no-touch .gn-menu li.gn-search-item:hover .gn-search:focus::-webkit-input-placeholder { 178 | color: transparent 179 | } 180 | 181 | input.gn-search:focus { 182 | cursor: text 183 | } 184 | 185 | .no-touch .gn-menu li.gn-search-item:hover input.gn-search { 186 | color: white 187 | } 188 | 189 | /* placeholder */ 190 | 191 | .no-touch .gn-menu li.gn-search-item:hover .gn-search::-webkit-input-placeholder { 192 | color: white 193 | } 194 | 195 | .no-touch .gn-menu li.gn-search-item:hover .gn-search:-moz-placeholder { 196 | color: white 197 | } 198 | 199 | .no-touch .gn-menu li.gn-search-item:hover .gn-search::-moz-placeholder { 200 | color: white 201 | } 202 | 203 | .no-touch .gn-menu li.gn-search-item:hover .gn-search:-ms-input-placeholder { 204 | color: white 205 | } 206 | 207 | .gn-menu-main a.gn-icon-search { 208 | position: absolute; 209 | top: 0; 210 | left: 0; 211 | height: 60px; 212 | } 213 | 214 | .gn-icon::before { 215 | display: inline-block; 216 | width: 60px; 217 | text-align: center; 218 | text-transform: none; 219 | font-weight: normal; 220 | font-style: normal; 221 | font-variant: normal; 222 | font-family: 'ecoicons'; 223 | line-height: 1; 224 | speak: none; 225 | -webkit-font-smoothing: antialiased; 226 | } 227 | 228 | .gn-icon-help::before { 229 | content: "\e000" 230 | } 231 | 232 | .gn-icon-earth::before { 233 | content: "\e004" 234 | } 235 | 236 | .gn-icon-cog::before { 237 | content: "\e006" 238 | } 239 | 240 | .gn-icon-search::before { 241 | content: "\e005" 242 | } 243 | 244 | .gn-icon-download::before { 245 | content: "\e007" 246 | } 247 | 248 | .gn-icon-photoshop::before { 249 | content: "\e001" 250 | } 251 | 252 | .gn-icon-illustrator::before { 253 | content: "\e002" 254 | } 255 | 256 | .gn-icon-archive::before { 257 | content: "\e00d" 258 | } 259 | 260 | .gn-icon-article::before { 261 | content: "\e003" 262 | } 263 | 264 | .gn-icon-pictures::before { 265 | content: "\e008" 266 | } 267 | 268 | .gn-icon-videos::before { 269 | content: "\e009" 270 | } 271 | 272 | /* if an icon anchor has a span, hide the span */ 273 | 274 | .gn-icon span { 275 | width: 0; 276 | height: 0; 277 | display: block; 278 | overflow: hidden; 279 | } 280 | 281 | .gn-icon-menu::before { 282 | margin-left: -15px; 283 | vertical-align: -2px; 284 | width: 30px; 285 | height: 3px; 286 | background: #5f6f81; 287 | box-shadow: 0 3px white, 0 -6px #5f6f81, 0 -9px white, 0 -12px #5f6f81; 288 | content: ''; 289 | } 290 | 291 | .no-touch .gn-icon-menu:hover::before, 292 | .no-touch .gn-icon-menu.gn-selected:hover::before { 293 | background: white; 294 | box-shadow: 0 3px #5f6f81, 0 -6px white, 0 -9px #5f6f81, 0 -12px white; 295 | } 296 | 297 | .gn-icon-menu.gn-selected::before { 298 | background: #5993cd; 299 | box-shadow: 0 3px white, 0 -6px #5993cd, 0 -9px white, 0 -12px #5993cd; 300 | } 301 | 302 | /* styles for opening menu */ 303 | 304 | .gn-menu-wrapper.gn-open-all, 305 | .gn-menu-wrapper.gn-open-part { 306 | -webkit-transform: translateX(0px); 307 | -moz-transform: translateX(0px); 308 | transform: translateX(0px); 309 | } 310 | 311 | .gn-menu-wrapper.gn-open-all { 312 | width: 340px 313 | } 314 | 315 | .gn-menu-wrapper.gn-open-all .gn-submenu li { 316 | height: 60px 317 | } 318 | 319 | @media screen and (max-width: 422px) { 320 | .gn-menu-wrapper.gn-open-all { 321 | -webkit-transform: translateX(0px); 322 | -moz-transform: translateX(0px); 323 | transform: translateX(0px); 324 | width: 100%; 325 | } 326 | 327 | .gn-menu-wrapper.gn-open-all .gn-scroller { 328 | width: 130% 329 | } 330 | } 331 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 2 | @font-face { 3 | font-family: 'codropsicons'; 4 | src:url('../fonts/codropsicons/codropsicons.eot'); 5 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 6 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 7 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 8 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | body { 14 | background: #34495e; 15 | } 16 | 17 | .container > header, 18 | .codrops-top { 19 | color: #fff; 20 | font-family: 'Lato', Arial, sans-serif; 21 | } 22 | 23 | .container > header { 24 | margin: 0 auto; 25 | padding: 12em 2em; 26 | padding-left: 370px; 27 | background: rgba(0,0,0,0.05); 28 | } 29 | 30 | .container > header a { 31 | color: #566473; 32 | text-decoration: none; 33 | outline: none; 34 | } 35 | 36 | .container > header a:hover { 37 | color: #4f7bab; 38 | } 39 | 40 | .container > header h1 { 41 | font-size: 3.2em; 42 | line-height: 1.3; 43 | margin: 0; 44 | font-weight: 300; 45 | } 46 | 47 | .container > header span { 48 | display: block; 49 | font-size: 55%; 50 | color: #74818e; 51 | padding: 0 0 0.6em 0.1em; 52 | } 53 | 54 | /* To Navigation Style */ 55 | .codrops-top { 56 | background: #fff; 57 | background: rgba(255, 255, 255, 0.6); 58 | text-transform: uppercase; 59 | width: 100%; 60 | font-size: 0.69em; 61 | line-height: 2.2; 62 | } 63 | 64 | .codrops-top a { 65 | text-decoration: none; 66 | padding: 0 1em; 67 | letter-spacing: 0.1em; 68 | color: #888; 69 | display: inline-block; 70 | } 71 | 72 | .codrops-top a:hover { 73 | background: rgba(255,255,255,0.95); 74 | color: #333; 75 | } 76 | 77 | .codrops-top span.right { 78 | float: right; 79 | } 80 | 81 | .codrops-top span.right a { 82 | float: left; 83 | display: block; 84 | } 85 | 86 | .codrops-icon:before { 87 | font-family: 'codropsicons'; 88 | margin: 0 4px; 89 | speak: none; 90 | font-style: normal; 91 | font-weight: normal; 92 | font-variant: normal; 93 | text-transform: none; 94 | line-height: 1; 95 | -webkit-font-smoothing: antialiased; 96 | } 97 | 98 | .codrops-icon-drop:before { 99 | content: "\e001"; 100 | } 101 | 102 | .codrops-icon-prev:before { 103 | content: "\e004"; 104 | } 105 | 106 | /* Demo Buttons Style */ 107 | .codrops-demos { 108 | padding-top: 1em; 109 | font-size: 0.9em; 110 | } 111 | 112 | .codrops-demos a { 113 | text-decoration: none; 114 | outline: none; 115 | display: inline-block; 116 | margin: 0.5em; 117 | padding: 0.7em 1.1em; 118 | border: 3px solid #b1aea6; 119 | color: #b1aea6; 120 | font-weight: 700; 121 | } 122 | 123 | .codrops-demos a:hover, 124 | .codrops-demos a.current-demo, 125 | .codrops-demos a.current-demo:hover { 126 | border-color: #89867e; 127 | color: #89867e; 128 | } 129 | 130 | @media screen and (max-width: 1025px) { 131 | .container > header { 132 | margin: 0 auto; 133 | padding: 120px 50px; 134 | font-size: 70%; 135 | text-align: right; 136 | } 137 | } 138 | 139 | @media screen and (max-width: 740px) { 140 | 141 | .codrops-icon span { 142 | display: none; 143 | } 144 | 145 | } -------------------------------------------------------------------------------- /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/GoogleNexusWebsiteMenu/8413011b2f220520cced4109fecd697e08373ca5/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/GoogleNexusWebsiteMenu/8413011b2f220520cced4109fecd697e08373ca5/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GoogleNexusWebsiteMenu/8413011b2f220520cced4109fecd697e08373ca5/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/ecoicons/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/ecoicons/ecoicons.dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 26 | 37 | 40 | 42 | 51 | 56 | 59 | 62 | 65 | 69 | 70 | -------------------------------------------------------------------------------- /fonts/ecoicons/ecoicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GoogleNexusWebsiteMenu/8413011b2f220520cced4109fecd697e08373ca5/fonts/ecoicons/ecoicons.eot -------------------------------------------------------------------------------- /fonts/ecoicons/ecoicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 26 | 37 | 40 | 42 | 51 | 56 | 59 | 62 | 65 | 69 | 70 | -------------------------------------------------------------------------------- /fonts/ecoicons/ecoicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GoogleNexusWebsiteMenu/8413011b2f220520cced4109fecd697e08373ca5/fonts/ecoicons/ecoicons.ttf -------------------------------------------------------------------------------- /fonts/ecoicons/ecoicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GoogleNexusWebsiteMenu/8413011b2f220520cced4109fecd697e08373ca5/fonts/ecoicons/ecoicons.woff -------------------------------------------------------------------------------- /fonts/ecoicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 2 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Google Nexus Website Menu 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 54 |
55 |

Google Nexus Website Menu A sidebar menu as seen on the Google Nexus 7 page

56 |
57 |
58 | 59 | 60 | 63 | 64 | -------------------------------------------------------------------------------- /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/gnmenu.js: -------------------------------------------------------------------------------- 1 | /** 2 | * gnmenu.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 | // http://stackoverflow.com/a/11381730/989439 16 | function mobilecheck() { 17 | var check = false; 18 | (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); 19 | return check; 20 | } 21 | 22 | function gnMenu( el, options ) { 23 | this.el = el; 24 | this._init(); 25 | } 26 | 27 | gnMenu.prototype = { 28 | _init : function() { 29 | this.trigger = this.el.querySelector( 'a.gn-icon-menu' ); 30 | this.menu = this.el.querySelector( 'nav.gn-menu-wrapper' ); 31 | this.isMenuOpen = false; 32 | this.eventtype = mobilecheck() ? 'touchstart' : 'click'; 33 | this._initEvents(); 34 | 35 | var self = this; 36 | this.bodyClickFn = function() { 37 | self._closeMenu(); 38 | this.removeEventListener( self.eventtype, self.bodyClickFn ); 39 | }; 40 | }, 41 | _initEvents : function() { 42 | var self = this; 43 | 44 | if( !mobilecheck() ) { 45 | this.trigger.addEventListener( 'mouseover', function(ev) { self._openIconMenu(); } ); 46 | this.trigger.addEventListener( 'mouseout', function(ev) { self._closeIconMenu(); } ); 47 | 48 | this.menu.addEventListener( 'mouseover', function(ev) { 49 | self._openMenu(); 50 | document.addEventListener( self.eventtype, self.bodyClickFn ); 51 | } ); 52 | } 53 | this.trigger.addEventListener( this.eventtype, function( ev ) { 54 | ev.stopPropagation(); 55 | ev.preventDefault(); 56 | if( self.isMenuOpen ) { 57 | self._closeMenu(); 58 | document.removeEventListener( self.eventtype, self.bodyClickFn ); 59 | } 60 | else { 61 | self._openMenu(); 62 | document.addEventListener( self.eventtype, self.bodyClickFn ); 63 | } 64 | } ); 65 | this.menu.addEventListener( this.eventtype, function(ev) { ev.stopPropagation(); } ); 66 | }, 67 | _openIconMenu : function() { 68 | classie.add( this.menu, 'gn-open-part' ); 69 | }, 70 | _closeIconMenu : function() { 71 | classie.remove( this.menu, 'gn-open-part' ); 72 | }, 73 | _openMenu : function() { 74 | if( this.isMenuOpen ) return; 75 | classie.add( this.trigger, 'gn-selected' ); 76 | this.isMenuOpen = true; 77 | classie.add( this.menu, 'gn-open-all' ); 78 | this._closeIconMenu(); 79 | }, 80 | _closeMenu : function() { 81 | if( !this.isMenuOpen ) return; 82 | classie.remove( this.trigger, 'gn-selected' ); 83 | this.isMenuOpen = false; 84 | classie.remove( this.menu, 'gn-open-all' ); 85 | this._closeIconMenu(); 86 | } 87 | } 88 | 89 | // add to global namespace 90 | window.gnMenu = gnMenu; 91 | 92 | } )( window ); -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function w(a){j.cssText=a}function x(a,b){return w(m.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}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={},o={},p={},q=[],r=q.slice,s,t=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},u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(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=r.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(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:t(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c};for(var B in n)v(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(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},w(""),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.testStyles=t,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.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