Here we go with a tutorial about creating great Nexus like sidebar menu, nice and very useful in modern web applications.
Tutorial – Nexus like sidebar menu in pure JS and CSS
In this tutorial we’re going to create a stylish sidebar menu, with smooth slide effects, similar to the google Nexus 7 website. The whole sidebar menu will be shown when hovering over the sidebar icon, as well when clicking directly on the menu icon.
The Markup – the base menu element
The menu will consist of two main parts: a main menu (the one that we can see at the top like a header), and the sidebar menu. We will add the class “gn-menu-main” to the first one and wrap the second one in a nav element. Certainly we can use a different structure, if we like.
The first menu item will contain the menu icon anchor and the nav element: