/ best free open source web resources /

Graphic Resources

Reconstruct Sidebar Menu of Google Nexus 7 Page

Posted · Category: License Free, Menu

Codrops has showed us how to reconstruct the Google Nexus Website Menu. It slides out with a really nice effect where some subitems get expanded as well. When hovering over a special menu icon, the sidebar icons will be revealed. When clicking on the icon, the whole sidebar menu will be shown. The first sidebar menu item is a search input which is styled the same way like the other menu items.

We will reconstruct this menu using unordered, nested lists and some CSS transitions. We’ll use JavaScript to apply classes for the opening effects and handling the hover and click events. With the help of a media query, we’ll adjust the size to make sense for smaller devices as well.


Requirements: –
Demo: http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/
License: MIT License

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons