How To Create A Responsive Sidebar Menu

Creating responsive navigations for huge websites has never been a simple task. In case you’re working on admin panel, odds are you’ll have to design and develop a vertical menu, with numerous sub-categories That’s the reason we decided to share the following code. This Sidebar navigation can make this task really simple and it could make your next project a little easier.

Let’s begin with the structure.

The HTML structure is made up of 2 important elements: a <header> element, containing the site’s logo, the search form, the navigation trigger (.cd-nav-trigger – mobile version only) and the top navigation, and a <main> element containing the page main content (div.content-wrapper) and the sidebar navigation (nav.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 -->

Now comes the stylingIn the beginning HTML structure, the .cd-search and .cd-top-nav elements are inside the<header>, however on mobile devices they are moved inside the .cd-side-nav element (more in the Events Handling section). We designed 3 different sidebar configurations, for different screen sizes.
On mobile size devices, the sidebar has a 100% width, is in absolute position and hidden by default (visibility: hidden). When the user clicks/taps the .cd-nav-trigger, the sidebar visibility is changed to visible (using the .nav-is-visible class).

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

@media only screen and (min-width: 768px) {Whereas tablet size devices (viewport width more than 768px), a minified version of the sidebar is visible by default: it is in relative position, has a fixed width (110px)  and afloat: left so that it is on the left side of the <main> element.

  .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;
  }
}

 

And for the bigger devices (viewport width more than 1170px), the expanded version of the sidebar is shown.

And finally events handling

In the initial HTML structure, the .cd-search and .cd-top-nav elements are inside the <header>.
On small/mobile devices (viewport width less than 1170px), we move these elements inside the.cd-side-nav navigation.

varresizing=false;
moveNavigation();
$(window).on('resize',function(){
if(!resizing){
window.requestAnimationFrame(moveNavigation);
resizing=true;
}
});
&nbsp;
functionmoveNavigation(){
varmq=checkMQ();//this function returns mobile,tablet or desktop
&nbsp;
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);
}elseif((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;
}
&nbsp;
functiondetachElements(){
topNavigation.detach();//topNavigation = $('.cd-top-nav')
searchForm.detach();//searchForm = $('.cd-search')
}

We also added the jQuery-menu-aim plugin to distinguish whether users trying to hover over a sidebar item or trying to navigate into a submenu’s contents (for desktop version).

Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *