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">
    <!-- ... -->
  <li><a href="http://my-website">Link 1</a></li>
  <li><!-- ... --></li>
  <!-- ... -->

Read full tutorial:




See also:

Responsive, toggle sidebar menu in jQuery

Horizontal and responsive Microsoft-like drop-down menu