responsive-sidebar-navigation
September 14, 2015 | 61 Feedbacks

Responsive Sidebar Navigation

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Building responsive navigations for mega sites is never an easy task. If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories. That’s why we decided to share today’s snippet! Our Sidebar navigation can make your life easier by providing a starting, simple template for your next project ;)

Icons: Nucleo library.

Creating the structure

The HTML structure is composed by 2 main elements: a <header> element, containing the website 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).

In the starting HTML structure, the .cd-search and .cd-top-nav elements are inside the <header>, while on mobile devices they are moved inside the .cd-side-nav element (more in the Events Handling section).

Adding style

We created 3 different sidebar configurations, according to the screen size.
On small 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).

On medium 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 a float: left so that it is on the left side of the <main> element.

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

Events handling

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

Besides, we integrated the jQuery-menu-aim plugin to differentiate between users trying hover over a sidebar item and  user trying to navigate into a submenu’s contents (desktop version only).

Changelog

Sep 14, 2015
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • atteck

    So awesome !!

  • i.v.schagen

    Very nice! And I whitelisted your domain for Adblock. You deserve it!

    • emiloberg

      Agree! Thanks for telling, it made me do the same.

      • i.v.schagen

        Great!

  • Akila Thiwanka

    superb (y)

  • ubedu43

    Superb

  • Nick

    This is exactly what I was looking for!!!

    Thank you!!!

  • Julio Corral

    WOW!! I’m lookig for this kind of menu but in desktop version, I need the dropdown like in mobile version. Anyone could help me? Thanx in advance

    • Marcus

      Let’s remove all media queries from style.css. All the styles in each @media only screen… { … }

      • Julio Corral

        Thank you very much!! I’m going to try this. I need the same performance on desktop but the links to the left to function as the mobile version does not display on the left but below. Thank you

  • http://matthieusoum.com Matthieu S.

    Nice work !

  • บัณฑิต แสนคำภา

    Thank you so much !!!!

  • Watcharaphong Intachot

    Thank you ^^

  • http://webplatformdaily.org Šime Vidas

    You forgot to add resizing = true; to your code snippet :)

    • http://codyhouse.co Claudia Romano

      Fixed now! thanks ;)

  • mmcshinsky

    Thanks for this. I love how it works!

  • Ambiroa

    This looks awesome! I am playing with Foundation 5, and tried to combine the two. But the moment I add the foundation.css to the css in the HTML, the some elements break. Functionality stay perfectly fine, so it seems, but menu items are moved. I tried placing the css above the css of this template, to keep this css the dominant one, and also in between, and underneath it, but it breaks in different ways on all occasions.

    What am I missing here? What do I need to change/remove from the foundation.css? I want use the cody css for all things of this template, and use foundation exclusively for the content between the “content-wrapper” divs.

    Thanks.

  • Mane Said

    that exactly what I’am looking for…

    I have little question ..

    what if the user is logout how I can add login button again .

  • 이춘경

    Thank you very much! How nice this is!.

    I have a question.
    I want to replace ‘position: relative;’ to ‘fixed’ in @media only screen and (min-width: 768px) {
    .cd-side-nav {} because I want to avoid short delay when scrolling by main.js’s ‘//on window scrolling – fix sidebar nav’
    I wonder why did you set not ‘fixed’ but ‘//on window scrolling – fix sidebar nav’ code.

    I am only a beginner so please excuse me. thank you!

    • http://codyhouse.co Claudia Romano

      Hi, we did this because the sidebar may be higher than the viewport. In that case, a position: fixed won’t allow you to scroll it.

  • siomi

    What would I need to change to show submenus as an accordion?

  • Brekkan

    Awesome work, i love it!!!
    Just one question: How do I make the header “fixed”? (i want it to be visible in the top all the time in all media queriesc(desktop, mobile, tablets) when i scroll down in the content :)

    (Sorry for my bad english btw ;) )

    • http://codyhouse.co Claudia Romano

      Hi Brekkan, you should try changing its position from absolute to fixed in the style.css (or style.scss if using sass).

  • Guillermo Narvaez Rivero

    Very very nice work! congrats

    I would like to add a third level of navigation, like Overview / Category 1 / design ….
    could anybody help?

    Thank you very much!

    • Alvin Angeles

      Were you able to make the third level nav work? Thanks

  • http://www.lnch.co.uk Tom Lynch

    Love this as I always do with your stuff guys, just one quick question for you though. I’m no expert with the HTML5 main tag, but I’m of the understanding that it shouldn’t contain any content that isn’t exclusive to this page…in this case I’m referring to the side navigation. I understand why it’s contained in the same element but would it not be more semantic to change the div with the content-wrapper class to the main element, and the main element to a standard div or section maybe?

    I could be entirely incorrect here and there could be a perfectly good reason, just trying to wrap my head around it before I use some of these techniques in my next app!

  • Simon

    This is awesome! Thanks!
    Although it doesn’t seem to play nice with Bootstrap?

    • Nipun Nirmana

      it works just fine , if you start with col-* classes instead of container or row

      • seanptaylor

        What do you mean? With Bootstrap you need to wrap col classes with a container and row.

        • Nipun Nirmana

          yea but for some reason you have to stat with col* class otherwise it wont work

          • http://seantaylor.co Sean Taylor

            You always need to use .col classes when working with Bootstrap. You still should be wrapping them in a .row and .container.

    • http://seantaylor.co Sean Taylor

      I did notice the sidebar get’s really jittery when you do add Bootstrap. I wish this was originally built on Bootstrap.

  • alexander castillo

    is there a way to integrate this into drupal 7? I really want to have a
    wordpress like backend for my sales people in drupal 7. but and cant
    find another one of theres in a drupal module. any help would be great

  • Anton VS

    Thanks for this! This is great! Could anyone tell me the cleanest way to properly integrate this into a project like a Rin boilerplate?

  • Nipun Nirmana

    Thank you ! This is awesome , manage to get it work with bootstrap start with col-* classes instead of starting with container or row classes

  • Claudio Barca

    How to use this code with Angularjs? Thanks

  • Alonso Lopez

    Thank you!! This menu looks awesome!!! Just one thing, how I can customize the icons?

  • seanptaylor

    Love this and I’m using it on a project of mine. I think the icons would be great if they were switched out to something like FontAwesome so there is a wider selection and they support retina devices.

  • Simone

    How can I customize the icons?

  • Ramin

    Very nice. congrats.

    • Luis Carlos Buonaffina Malavé

      Ramin I would like to discuss with my project personally. ..how can I get in touch with you by another way

  • llamerr

    I’m seeing pretty fun “bug” in chrome/ff on win7

    • http://www.sergiojardim.com/ Sérgio Jardim

      Seems to be resolved on newest Chrome version.

  • http://www.sergiojardim.com/ Sérgio Jardim

    Hey guys, thank you for this awesome template!
    I’m using it in a documentation website for Hugo Static Site Generator. You can see it here: http://hugodocs.netlify.com/

    I’m using different icons and I had to change a little bit the way the side-nav works because it is too long on my version.

    Cheers.

  • Tom Wyckoff

    This looks terrific and i’m planning on using it in an upcoming project, but when i build out the menu dynamically the mouse-over functionality is lost for sub-menu items; they don’t slide out at all. Is there a JS method i need to invoke again after the dynamic menu is populated to get that working again? i’m pretty sure that my html is identical to what was hard-coded here, i can’t think of anything else to try. thanks.

    • Tom Wyckoff

      Sorry, I was able to sort it out – i needed to call menuAim() once the new UL had been constructed. Thanks for this!

      • Lau11

        Hello! How do I call menuAim() for third level menu? Thanks in advance! :)

  • Lau11

    Hola and thank you so much for this! Is exactly what I needed!!!
    I need to add a third level menu, is this possible?
    Thanks in advance!!!!

    • Alvin Angeles

      Have you come up with a solution to this?

  • Sean King

    Hi, is there a way to disable the cd-nav-trigger on the mobile /xs device media query?

  • oomana rajesh

    First of all, thank you very much for your great work.
    I am integrating this sample application in to AngularJs, the problem I am facing is when I populate the DOM dynamically using AngularJs, the navigation options are not working properly, I think the “main.js” has to be called once again to parse the DOM again, please let me know, if you have any other solutions for this issue.

  • oomana rajesh

    in main.js add the below code for the click event of submenu

    //when click on submenu item, change the active and selection

    $(‘.has-children > ul > li > a’).on(‘click’, function(event){

    var mq = checkMQ(),

    selectedItem = $(this);

    if(mq && mq == ‘desktop’ || mq == ‘tablet’ ) {

    /* the below prevents the loading of ‘ui-sref’ view*/

    /* event.preventDefault(); */

    sidebar.find(‘.has-children.selected’).removeClass(‘selected’);

    sidebar.find(‘.has-children.active’).removeClass(‘active’);

    accountInfo.removeClass(‘selected’);

    selectedItem.closest(‘.has-children’).addClass(‘selected’);

    selectedItem.closest(‘.has-children’).addClass(‘active’);

    }

    });

  • Kyle

    Is there a way to prevent the slide-out sub menu from extending beyond the bottom of the browser window? I’ve implemented this menu with 11 main nav items, but didn’t notice the sub navigation slide-out menu doesn’t adjust position if it reaches the bottom of the screen. Some of the last sub menu items just get lost beyond the window and I can’t seem to scroll any further. Thanks!

  • Alvin Angeles

    How do you set perhaps up to the third level of menu? I’m getting conflicts

  • Luis Patrick Villaruz

    Hi! I need help, everytime i scroll its flickering.. :(

  • Nicolas Isabelo