Awesome CSS and jQuery slide in panel

A CSS and jQuery slide in panel, to show the content quickly, in a nice way. Great for item details, notifications, profile information, and so on.

CSS and jQuery slide in panel easy to adapt in web projects

Check out this small tutorial, and create a CSS3 and jQuery powered slide-in panel, to quickly show side content, notifications or profile information.

There are cases when we need to display side content, but it doesn’t fit into a tooltip or even compact modal dialog. Here we have side panel, what is a nice and fast solution to present bigger amounts of content, that may be loaded via AJAX. This is a nice way to improve UX of our web application.

CSS and jQuery slide in panel - demo
CSS and jQuery slide in panel – demo

There are CSS rules and simple jQuery code prepared. We only need to add appropriate HTML structure in our document and call it. For example:

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

<div class="cd-panel from-right">
  <header class="cd-panel-header">
    <h1>Our title</h1>
    <a href="#0" class="cd-panel-close">Close</a>
  </header>
  <div class="cd-panel-container">
    <div class="cd-panel-content">
      <!-- our side content here -->
    </div>
  </div>
</div>

Let’s include CSS file (with .cd-panel-xyz rules) and create simple jQuery handler, for example:

jQuery(document).ready(function ($) {
  // Open the panel
  $('.cd-btn-open').on('click', function (event) {
    event.preventDefault();
    $('.cd-panel').addClass('is-visible');
  });

  // Close
  $('.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();
    }
  });
});

That’s it.

Demo:

https://codyhouse.co/demo/slide-in-panel/index.html

Full article and download:

https://codyhouse.co/gem/css-slide-in-panel

See also:

jQuery sliding menu plugin in mobile app style

Multi-step jQuery form wizard plugin – jquery.steps

Sly scrolling plugin – a lightweight, one directional slider

Bootstrap off canvas slide menu

Enjoy!

Share:Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1