Google Nexus Website Menu

A tutorial on how to recreate the slide out sidebar menu that can be seen on the Google Nexus 7 website.

article on Codrops

demo

LICENSING & TERMS OF USE

Really like this for a mobile slide in menu.

JS tweaks: We wanted to close the menu after a menu has been selected, so commented out the

ev.stopPropagation()

in the menu.addEventListener

CSS tweaks: to allow menu to flow over adjacent content:

.gn-menu-main {
	z-index: 10;
}

We're targeting the :last li for a dynamic edit state menu

.gn-menu-main > li:last-child > ul > li {
	padding: 0 8px;

NEW! Added gulp build and UMD wrapper. Was having trouble integrating into an AMD client so I added support.

BUILD STEPS:

install gulp globally ie:

$ sudo npm install gulp -g

then:

npm install

to build, just run default gulp task, ie:

gulp

Moved classie.js and gnmenu.js to ./dist folder