Nexus like sidebar menu with CSS3 and JavaScript

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.

Nexus-like side menu in action
Nexus-like side menu in action

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:

<ul id="gn-menu" class="gn-menu-main">
  <li class="gn-trigger">
    <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
    <nav class="gn-menu-wrapper">
    <!-- ... -->
    </nav>
  </li>
  <li><a href="http://my-website">Link 1</a></li>
  <li><!-- ... --></li>
  <!-- ... -->
</ul>

Read full tutorial:

http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu

Demo:

http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu

GitHub:

https://github.com/codrops/GoogleNexusWebsiteMenu

See also:

Responsive, toggle sidebar menu in jQuery

Horizontal and responsive Microsoft-like drop-down menu

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1