CSS Responsive Sidebar Navigation

Simple and convenient navigation bar. Ideal for the administration panel.

CSS Responsive Sidebar Navigation

Demo    Download

Structure

HTML structure consists of two main elements: <header>, with the logo of the website, the search box, the top navigation; and an element <main> to store the main content (div.content-wrapper) + lateral navigation (nav.cd-side-nav).

In our HTML structure elements .cd-search and .cd-top-nav are within the <header>, while you switch to the mobile version moved to block .cd-side-nav.

<header class="cd-main-header">
 <a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a>

 <div class="cd-search">
  <form action="#0">
   <input type="search" placeholder="Search...">
  </form>
 </div> <!-- cd-search -->

 <a href="#0" class="cd-nav-trigger">Menu<span></span></a>

 <nav class="cd-nav">
  <ul class="cd-top-nav">
   <li><a href="#0">Tour</a></li>
   <li><a href="#0">Support</a></li>
   <li class="has-children account">
    <a href="#0">
     <img src="img/cd-avatar.png" alt="avatar">
     Account
    </a>

    <ul>
     <li><a href="#0">My Account</a></li>
     <!-- other list items here -->
    </ul>
   </li>
  </ul>
 </nav>
</header> <!-- .cd-main-header -->

<main class="cd-main-content">
 <nav class="cd-side-nav">
  <ul>
   <li class="cd-label">Main</li>
   <li class="has-children overview">
    <a href="#0">Overview</a>

    <ul>
     <li><a href="#0">All Data</a></li>
     <!-- other list items here -->
    </ul>
   </li>
   <li class="has-children notifications active">
    <a href="#0">Notifications<span class="count">3</span></a>

    <ul>
     <li><a href="#0">All Notifications</a></li>
     <!-- other list items here -->
    </ul>
   </li>

   <!-- other list items here -->
  </ul>

  <!-- other unordered lists here -->
 </nav>

 <div class="content-wrapper">
  <!-- main content here -->
 </div> <!-- .content-wrapper -->
</main> <!-- .cd-main-content -->

Styles

We'll create a style configuration for the three types of screens.

For small devices, the panel will occupy 100% of the width, position: absolute, hidden by default (visibility: hidden). Clicking / tapas for .cd-nav-trigger, change the display mode (using the class .nav-is-visible).

.cd-side-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
.cd-side-nav.nav-is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s 0s, visibility 0s 0s;
}

For medium-sized screens (more than 768px) display the status of navigation minimized. Position: relative, fixed width (110px) and float: left, so she stuck to the left side of the element <main>.

@media only screen and (min-width: 768px) {
  .cd-side-nav {
    position: relative;
    float: left;
    width: 110px;
    /* reset style */
    visibility: visible;
    opacity: 1;
  }
}

@media only screen and (min-width: 768px) {
    .cd-main-content .content-wrapper {
        margin-left: 110px;
    }
}

For larger screens (more than 1170px) will show immediately fully disclosed version.

Working with events

The original structure elements .cd-search and .cd-top-nav are within the <header>.

For small screens (less than 1170px), move these items into .cd-side-nav.

var resizing = false;
moveNavigation();
$(window).on('resize', function(){
if( !resizing ) {
 window.requestAnimationFrame(moveNavigation);
 resizing = true;
}
});

function moveNavigation(){
var mq = checkMQ(); //this function returns mobile,tablet or desktop
if ( mq == 'mobile' && topNavigation.parents('.cd-side-nav').length == 0 ) { //topNavigation = $('.cd-top-nav')
detachElements();
topNavigation.appendTo(sidebar); //sidebar = $('.cd-side-nav')
searchForm.prependTo(sidebar);
} else if ( ( mq == 'tablet' || mq == 'desktop') && topNavigation.parents('.cd-side-nav').length > 0 ) {
detachElements();
searchForm.insertAfter(header.find('.cd-logo')); //header = $('.cd-main-header')
topNavigation.appendTo(header.find('.cd-nav'));
}
resizing = false;
}

function detachElements() {
topNavigation.detach();//topNavigation = $('.cd-top-nav')
searchForm.detach();//searchForm = $('.cd-search')
}

Besides all this we have integrated the plugin jQuery-menu-aim for a more comfortable working with navigation.

Demo    Download

Source : https://codyhouse.co/gem/responsive-sidebar-navigation/