slide in panel
September 10, 2014 | 85 Feedbacks

Slide in panel

A CSS3 and jQuery powered slide-in panel, to quickly show side content, notifications or profile information.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

There will be cases when you need to display side content (a notification, a user profile information…), and this content doesn’t fit into a tooltip. You may create a new page and link to it, but, when possible, it’s wise to avoid a page refresh. In these cases a panel that slides in from the side can be a good UX solution. It’s fast, can be easily animated using CSS3 transitions, and it’s something users are used to see (think how many times this effect is used in native mobile apps).

A lot of websites are using this solution, take a look at Feedly and the Spotify web player just to mention a couple.

Now let’s take a look at the code!

Creating the structure

The HTML structure is super simple. We created a <header>, supposed to be fixed while you scroll through the content, a separate <div> for the panel content, and wrapped all inside a .cd-panel div. The <main> element will contain our main content.

Adding style

Couple of hints about the CSS. First of all, why did we separate the <header> from the panel container (.cd-panel-container)? We applied a CSS3 transformation – precisely we used the translateX property – to the panel to make it slide-in. Using a transformation instead of animating the position left/right values is better in terms of performance.  Anyway, the <header> has a fixed position. Fixed positioned elements jump when you apply a CSS3 transformation to them (precisely they lose their position when the Transformation value is changed – thus during a transition applied to the Transform property). That’s why the header is animated separately from the panel content (for the <header> we animate the Top value instead).

One more point some of you may find interesting is the transition-delay property. When you animate elements on a web page, if you create some delays, or use different transition/animation durations, things get more interesting. That’s when the transition-delay comes in handy. In this resource, for example, the header slides in after the panel content, and pops-out before it. If you want to explore some concepts about animations and transitions, take a look at the Google Material documentation.

Important note: if you change the class name applied to the .cd-panel from .from-right to .from-left, the panel will slide in (guess what?) from the left.

Events Handling

In jQuery we added/removed the .is-visible class to show/hide the lateral panel.

Changelog

Sep 10, 2014
  • 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.

  • http://huphtur.nl huphtur

    Looks like Disqus just implemented the same thing. Click on the Disqus notification bubble to see it. Coincidence or not?

    • http://codyhouse.co/ Sebastiano Guerriero

      I’ve seen a lot this effect lately. First time was in the last Spotify massive redesign some months ago. A very cool implementation of a slide-in panel is the cart on http://ui8.net/category/all

      • http://webentwicklungrostock.de Michael Pehl

        The ui8.net effect looks a little bit like http://lab.hakim.se/avgrund/ :)

        Nice stuff again… and for sure useful if you do not have visitors using IE < 9 ;)

  • Sebastian Ruiz

    How could I fire both, left and right panel with two different buttons ?????
    very nice effect the animated header….

    • http://codyhouse.co/ Sebastiano Guerriero

      Create a new button and a new .cd-panel (removing the class .from-right and replacing it with .from-left). Then in jQuery target the new button and panel – the code would be identical to the one in the main.js file, just make sure to use different class names for the new button and the panel

      • Sebastian Ruiz

        Thanks a lot Sebastiano….
        I do really apreciate you take the time and effort requiered to answer newbies questions..

        • http://codyhouse.co/ Sebastiano Guerriero

          Anytime ;)

  • Bhaskaran

    Good one….thank you for sharing

  • JY

    This is very slick! Good job and thanks for sharing.

  • Vlad Belov

    excelent!

  • HossamMohamedElbadawy

    Nice work and thank you

  • emarbee

    Very cool, exactly what I was looking for. Thanks very much! But when I try to implement it on my site, I have problems with German Characters (like ä/ö/…), but only in this specific , where on the rest of the page everything works fine. Do you have an idea where this could come from?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi! If you’re updating the html (I mean not using any CMS, but just manually adding content), some characters will not be translated the way you may expect. Like the Ampersand: you can’t just write &, you need to write &

      This could help:
      http://css-tricks.com/snippets/html/glyphs/

      • emarbee

        thanks a lot sebastiano, it works like a charm!

  • Nicolas De Mena

    I love this, I have a question, can you tell me if it’s possible to create multiple panels, if yes can you tell me the technique plz ?
    Thanks for your work!

    • http://codyhouse.co/ Sebastiano Guerriero

      Just create a new .cd-panel . Then in jQuery target the new panel (and the new trigger/button) – the code would be identical to the one in the main.js file, just make sure to use different class names for the new button and the panel

      • Nicolas De Mena

        Ok I will try this, thanks ou very much

  • Joe

    I am designing a site using the “Pop-out Full-Screen Navigation” as my main nav, but also using the “Slide-In Panel,” what would be the best way to combine the two (CSS, HTML & JS)?

  • Dave M

    Hi

    This is exactly what I have been looking for, but I have a problem implementing this into a bootstrap 3 layout.

    I want the buttons in a left hand column eg and the content to fly in from the right in another – I have tried this but the ‘cd-panel-content’ takes up all the screen.

    Can I PM you a link of where I am at the moment with regard to trying to integrate this into my layout?

    I would really appreciate it!

    Many Thanks

    • Dave M

      Looks like activity for this has gone ‘dark’

      Could anyone else help me with my original request?

      I would really appreciate it.

      Thanks

      • Christian F

        You have to set up the width of .cd-panel-container in your css.
        Probably this helps.

  • http://www.ajaxthemestudios.com ATS

    Hello
    I tried to implement this on a CMS that already has its own jquery so there was a big conflict. Please is there any way to avoid this conflict by not using the Jquery in your plugin. Thank you

    • Michael Wong

      The only thing this script uses from jQuery is the following:

      .on(), .is(),.addClass(),.removeClass(), which should be in your jquery plugin already.

  • nickdcom

    Hi, Can this be tweaked so the “cd-panel” is located inside the main. Reason: I intend on using it only for mobile, and have a ‘left-panel’ already located inside my ‘main’ content. Any ideas apart from duplication ? Thanks.

    • http://codyhouse.co Claudia Romano

      Hi, yes you can move the html inside the main element (in the css you’ll need to set the font-size for the h1 inside the slide panel).

  • OB

    Hello, firstly, this is awesome, like really awesome, so thank you sincerely you’ve made my life a million times easier. Having said this, I have implemented it, and it works great, and here’s the bit that makes me a total newb…how do I insert a close button that just closes the window and returns to the main content. I have tried to put one in based on the example with the download but it just displays in the background and isn’t clickable.

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi! Not sure I’m following, but the source file should already contain a close button (X icon) on top-right

  • Critical Thought

    Great help. How would you go about adding multiple buttons (say if u have multiple slider installations, in separate folders), able to open multiple sliders from 1 page? You help on this point would be huge

    • http://codyhouse.co Claudia Romano

      Hi, if you have multiple panels, you need to target them according to the button clicked. You may try adding, for example, a data-type to each button (and a class equal to the data-type value to the corresponding panel), and then, in the js file replace the opening panel function with:

      Not tested but should work! ;)

  • http://intowp.com/ LebCit

    Hello Sebastiano,

    Thanks a lot for this awesome panel.
    I’ll be using it in my new WP theme, it’s a great idea for an “outside sidebar” ;)

    Thanks again !

  • cesaralsina

    Hola Sebastiano, wish you a great Sunday. Thanks for sharing your knowledge! I’d like to ask for help (Doesn’t everybody needs a lil help now and then? :-) )

    I have being using your code to draw a contact form off the right side of the window. Now I want to draw another panel coming from the left to house some navigational links, a.k.a. the menu, links that place you at different sections of the same page. Your explanation below helped me greatly to make the secondary panel work, but (here comes the but!) the links inside it—even though they bring you to the different sections—do not close the panel.

    This is the site http://www.cesaralsina.com. Thanks a millions for your time!

    PS: Nutella! Oh man, what a jewel!

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi there! when user clicks on one of the links, you should remove the class .is-visible added to the panel once it has been fired. You may probably have created a new class to make the panel disappear, but if you didn’t remove the class .is-visible (in our demo added to .cd-panel), then you “close” class may have been overwritten

      • cesaralsina

        Thanks Sebastiano! I’m gonna review my code and will let you know about my findings.

  • Daverooney

    Thanks Sebastian! Is there an easy way to code it for two panels, with two separate buttons? (Like a red pill and a blue pill? :)

    • http://codyhouse.co/ Sebastiano Guerriero

      indeed you can. If you look at the jQuery, we detect the click event on .cd-btn element to add the class .is-visible to the .cd-panel element. You should duplicate that chunk of code, create another button and panel (giving them different class names), and trigger the new event same way we did with the first panel.

      Check how we did here (resize window):

      http://codyhouse.co/demo/side-cart/index.html

      • Daverooney

        Sweet! I uploaded my solution to github for anyone else who would like to rock out:

        https://github.com/DaveThePianoDude/VisualOrganizers

        • Aimen K

          So you made changes in the CSS, and the main.js. Anywhere else?

          • Daverooney

            Yes, those three files. I duplicated the entire .cd-btn and .cd-panel .css. A better approach would be to replicate only the .cd-btn section (call one cd-btn-left and other one cd-btn-right) and then do an .addClass(‘from-left’) / (‘from-right’) to .cd-panel in the jQuery.

          • Aimen K

            Is it possible to have multiple panels come in from the same side? For example, two panels that both come in from the right? Or do they need to come in from separate sides?

          • Jaser Akuly

            How would that work with the code?

            For example, I have to create 12 different panels in css since I have 12 different buttons to fill with different content on them panels. What would you say is the best solution for this.

            Would it be to have one panel and interchange the content using javascript.
            or
            would be to create 12 different panels (as you commented above) with .addClass. to the .cd-panel in the JQuery. But see i would like all the panels to be ‘from-right’.

  • Amber Rose

    I was wondering if there was a way to have this push the content over in bootstrap instead of going over the top of the content.

  • http://techsoftweb.com/ Techsoft Cochin

    how to initialize the panel only on button click…

  • Lightwing1

    Thanks, Sebastiano, for this great CSS solution. I am having one problem with the slide in panel. It won’t slide over an embedded YouTube video even with wmode=opaque (or transparent) added to the src string.

    http://production2.takeflightgraphics.com/28_shuttle_bus.html

    I’ve looked everywhere on the web and tried dozens of solutions. Any ideas?

    Thanks!

  • http://kayogundimu.com Kay Ogundimu

    Hi there Sebastiano and thanks for sharing this with us, it’s exactly what I’ve been looking for!

    Would you be so kind as to help me with how to change the focus when the panel is called? I like the fact that it darkens when the slide in panel is in affect, then it lightens when its closed. My aim is to reduce the darkness of the background. I have two panels and when the second is clicked, the background gets too dark.

    Thanks
    Kay

    • http://codyhouse.co/ Sebastiano Guerriero

      you can reduce the opacity of .cd-panel.is-visible::after element (using rgba)

      • http://kayogundimu.com Kay Ogundimu

        Thanks great Sebastiano, much thanks!

  • Cal Barker

    Hi, This doesnt seem to have been raised. I have set up multiple pabnels using multiple, renamed, divs and creating specific javascript to control it. Is there a way to fire a ‘close all other panels’ when a new panel is chosen?

    Thank you so much for the code & help

    • Tofanelli

      Hey man… i dont know if this will help you or even if it will work… i use this code to open and close all accordions on my website… i think the code is the same, you just need to change the names or something alike… I do not promise any support or anything alike…. just trying to help you =)


      $(function () {
      var active = true;
      $('#collapse-init').click(function () {
      if (active) {
      active = false;
      $('.panel-collapse').collapse('show');
      $('.panel-title').attr('data-toggle', '');
      $(this).text('Close all questions');
      } else {
      active = true;
      $('.panel-collapse').collapse('hide');
      $('.panel-title').attr('data-toggle', 'collapse');
      $(this).text('Expand all questions');
      }
      });
      $('#accordion').on('show.bs.collapse', function () {
      if (active) $('#accordion .in').collapse('hide');
      });
      });

      Tell me later if it works =)

      Cheers =)

    • paragraf77

      I was looking for this also: Yes it is possible, let’s say you have Panel1 and Panel2.

      Create the required html and css for both and edit the jquery code

      This is the code for the 2 panels:

      jQuery(document).ready(function($){

      //open the lateral panel1
      $(‘.cd-btn’).on(‘click’, function(event){
      event.preventDefault();
      $(‘.cd-panel’).addClass(‘is-visible’);
      });

      //close the lateral panel1
      $(‘.cd-panel’).on(‘click’, function(event){
      if( $(event.target).is(‘.cd-panel’) || $(event.target).is(‘.cd-panel-close’) ) {
      $(‘.cd-panel’).removeClass(‘is-visible’);
      event.preventDefault();
      }
      });

      //open the lateral panel2
      $(‘.cd-btn2′).on(‘click’, function(event){
      event.preventDefault();
      $(‘.cd-panel2′).addClass(‘is-visible’);
      });

      //close the lateral panel2
      $(‘.cd-panel2′).on(‘click’, function(event){
      if( $(event.target).is(‘.cd-panel2′) || $(event.target).is(‘.cd-panel2-close’) ) {
      $(‘.cd-panel2′).removeClass(‘is-visible’);
      event.preventDefault();
      }
      });

      });

      For closing Panel1 while it’s open and clicking on the cd-btn2 to open Panel2 and vice versa add this:

      jQuery(document).ready(function($){
      //open the lateral panel
      $(‘.cd-btn’).on(‘click’, function(event){
      event.preventDefault();
      $(‘.cd-panel’).toggleClass(‘is-visible’);
      });

      //close the lateral panel
      $(‘.cd-panel’).on(‘click’, function(event){
      if( $(event.target).is(‘.cd-panel’) || $(event.target).is(‘.cd-panel-close’) ) {
      $(‘.cd-panel’).removeClass(‘is-visible’);
      event.preventDefault();
      }
      });

      //open the lateral panel2
      $(‘.cd-btn2′).on(‘click’, function(event){
      event.preventDefault();
      $(‘.cd-panel2′).toggleClass(‘is-visible’);
      });

      //open the lateral panel2
      $(‘.cd-btn2′).on(‘click’, function(event){
      event.preventDefault();
      $(‘.cd-panel’).removeClass(‘is-visible’);
      });

      //open the lateral panel2
      $(‘.cd-btn’).on(‘click’, function(event){
      event.preventDefault();
      $(‘.cd-panel2′).removeClass(‘is-visible’);
      });

      //close the lateral panel2
      $(‘.cd-panel2′).on(‘click’, function(event){
      if( $(event.target).is(‘.cd-panel2′) || $(event.target).is(‘.cd-panel2-close’) ) {
      $(‘.cd-panel2′).removeClass(‘is-visible’);
      event.preventDefault();
      }
      });
      });

  • http://kayogundimu.com Kay Ogundimu

    Hi folks,

    I have a rather tricky question to ask the floor. I have in place 2 slide in panel which work a treat – http://joelculpepper.com/1 My only annoyance is that when I have both buttons on the same height, the ‘Media’ button disables the ‘About’ button. Ideally, I’d like to have them at each side of the page (‘About’ left & ‘Media’ right) at the same height at 50%.

    Any ideas as to how this can be achieved?

    • http://codyhouse.co Claudia Romano

      Hi Kay, you don’t need to create different elements. Give a look at what Sebastiano suggested to @Daverooney:disqus (comment below). That should help!

      • http://kayogundimu.com Kay Ogundimu

        Hi Claudia, thanks a bunch, that worked a treat!

  • Tofanelli

    Hey man! Nice code you have done!! Great job!

    Quick question… i know this is not up to you neither for your code…. but maybe be helpful to someone else too…

    I’d like to add a Facebook Like button to engage people on my website – https://developers.facebook.com/docs/plugins/like-button -. But, as long this snippet does not provide an URL, do you have any idea how to solve this or there is no way at all?

    I can’t figure out how to solve this, unfortunately =(

    Cheers =)

  • Thomas Blanchard

    Hello,
    I want to know how to use several of your items on the same page separately ?

    • Tofanelli

      Check on Daverooney’s comment ;)

      • Thomas Blanchard

        I tried but i’m a novice in JS … Could you send me a piece of code for the exemple please. HTML with 2 buttons ans panel and the JS code with 2 function … Thanks

  • Matt Farley

    Any idea why the background on .cd-panel.is-visible::after doesn’t actually fire when the slideout is toggled?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Matt! it waits for the panel header animation to finish

  • Ankit

    There is also a simple tutorial on TalkersCode.com for slide in and out
    http://talkerscode.com/webtricks/slide-in-and-slide-out-navigation-menu-using-jquery-css.php

  • Erik Denekamp

    GREAT code you have make, BUT I want split the menubutton from the panel so instead of 1 html file I want 2 html files. One for the button and 1 for the panel. I must have split these because I made an interactive online video (see example at : http://www.regio.tv/duvel.html at 8 seconds) with a button that I can place everywhere in the video. Now it’s on 1 place.

    Is that possible for an html-beginner and if yes then HOW?

  • Jose Salazar

    Hi there! really nice code! i was wondering if there is a way to use this with wordpress comments? Basically in blog posts page, using one panel to display each post comments with form. Are you familiar with that?

    Thanks!

  • angelilo

    a means to detect the scroll from top inside a panel?
    I use this kind of thing without result…
    http://jsfiddle.net/apaul34208/ZyKar/3/
    Best regards,

  • http://redsandev.com Andrea Rossi

    Hi: thank you so much for this howto!!!

    I have got a simple question: is .cd-panel a specific class? Can I change it with “panel-mobile-some-what”?

    • http://codyhouse.co Claudia Romano

      Hi Andrea, glad you like it!
      You can as long as you modify the css and js files accordingly.

  • Battlefield Soldiers

    have the Slide In Panel as it is installed and it is great only if I make more four button and the Slide In Panel which insert and then comes all the same button in the Slide In Panel

  • asimit

    Thanks, Sebastiano, for this awesome thing.. very useful

  • Nikolius Lau

    thanks.. very usefull for my project right now :)

  • Amru Samman

    Not sure if this has already been asked, but is it possible for a user to hit the browser back button and it takes them back to the slide that was opened initially?

  • ramesh

    You can use this if u want to trigger through attribute for multiple purpose.

    Fire Panel

    jQuery(document).ready(function ($) {
    //open the lateral panel
    $(‘.toggle-btn a’).on(‘click’, function (event) {
    var href = $(this).attr(‘href’);
    event.preventDefault();
    $(href).addClass(‘is-visible’);
    });
    //clode the lateral panel
    $(‘.cd-panel’).on(‘click’, function (event) {
    if ($(event.target).is(‘.cd-panel’) || $(event.target).is(‘.cd-panel-close’)) {
    $(‘.cd-panel’).removeClass(‘is-visible’);
    event.preventDefault();
    }
    });
    });

  • John Wayne

    Does anyone have a suggestion how to configure main.js to also remove the class when pressing the cd-btn. I.e. it functions as open and close, rather than cd-btn and cd-panel-close seperately?

    • http://codyhouse.co Claudia Romano

      Hi, in the main.js, replace the addClass(‘is-visible’) with toggleClass(‘is-visible’). That should work!

  • Kim Kyungmin

    Great slide! Thank you Sebastiano

  • Fabio

    Hi Sebastiano! Great slide! One question is possible to apply reveal effect? If yes…how?

  • Tyler

    Great Article / Plugin! Really enjoyed both.

    Curious, however, how one would go about disabling scrolling on the mani page, when the side panel is open? Currently, when you scroll to the end of the side panel it switches and will scroll the background (main section). Any advice on this would be greatly appreciated!

    Cheers.

    • http://codyhouse.co Claudia Romano

      Hi Tyler, you should try adding overflow: hidden to the while the panel is visible. This should do it!

      • Paul Farley

        What about for those who have content past the viewport. I am using this for a mobile nav menu.

        • paragraf77

          not sure if this helps, but this helped me:

          $(“.cd-panel”).mouseenter(function(){
          $(“body”).css(“overflow”, “hidden”);
          }).mouseleave(function(){
          $(“body”).css(“overflow”, “visible”);
          });

      • Tyler

        Thanks so much Claudia! You’re brilliant : )

  • Paul Farley

    Thanks so much Sebastiano! I actually used this to help me design a mobile slide out menu. It worked great!

  • Mahmoud Salem

    header is not showing with fixed navbar :(
    how i can solve that

  • paragraf77

    Hi, thanks for the code, good job guys.

    I have a question. I have created multiple panels, let’s say Panel1 , Panel2, Panel 3.
    I would like to achieve the next function:
    When I open Panel1 and click on the Panel2 button, Panel 1 close itself and Panel 2 opens… same for the rest.
    If Panel2 is open and Panel3 button is clicked Panel2 closes and Panel3 is fired to open.

    Right now I can open all panels but f.e When I open Panel1 I can open Panel2 which opens above Panel1, but again if I decide to open Panel1 while Panel2 is open it doesnt open it on top of it, but under it.

    Any help would be appreciated.

  • Mario Tanzano

    Thanks Sebastiano. Great slide. Just one question. Can it be used with Bootstrap?

  • HumanV3

    Hey guys n gals! I have this working from top down, is there anyone who can assist in making the height be “auto” to fit all content per screen size? Thanks in advance you beautiful people!!