Simple Modal-Like Sliding Panel with jQuery and CSS3

A simple jQuery/HTML5/CSS sliding panel solution that slides out a modal-like top panel and pushes the content to the bottom.

Modals are quite popular and exploited in website design as they give you the chance to put an accent on particular information. Modals and pop ups also save some space and you can put the content you do not want to include on your web page. For example, modals can be used to display a login and signup form, a list of blog titles or a complex menu.

The solution today is a rather simple way to create such a useful modal that will slide out from the top of the page when it is toggled. Have a look below to see the demo or to download the sample code.

How to use:

HTML

The trigger button and the main content into the container element together with the following attributes: data-toggle=”modal” data-target=”targetModal”.

<div class="btn-container" data-toggle="modal" data-target="myModal">
 <h1>Modal-like sliding panel</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos soluta quam fuga magnam maiores dolor ratione ex. Iste provident, vitae doloremque, tempora quis soluta ipsum vero ullam, eos alias deleniti!</p>
 <button class="btn" data-toggle="trigger">Read more</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <h2>My sliding panel</h2>
 </div>
 <div class="modal-body">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto sapiente ipsam, consequuntur ipsum esse repudiandae iusto! Commodi eveniet harum accusamus possimus voluptatum voluptates minima modi fugit, odio laborum qui voluptatem.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae eos molestias pariatur minus nisi optio, unde quisquam consequuntur. Officia provident aliquam, autem dicta libero ut minima illum impedit mollitia adipisci? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptas maiores soluta ducimus adipisci distinctio labore deserunt laborum.</p>
 </div>
 <div class="modal-footer"> <a id="close-trigger" tabindex="-1" data-dismiss="modal"> <span class="first">Close</span> <span class="second"></span> </a> </div>
 </div>
 </div>
</div>

CSS

Include the CSS3 styles for the sliding panel:

.modal {
 background-color: rgba(0, 0, 0, 0.95);
 position: absolute;
 top: -100%;
 outline: 0 !important;
 text-align: center;
 padding: 5em;
 -webkit-transition: top 0.3s;
 -moz-transition: top 0.3s;
 transition: top 0.3s;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
 }
 .modal.move-bottom {
 top: 0;
 }

For the button, you will need these styles. Also are included styles for the content move/zoom effects.

.btn-container {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 text-align: center;
 margin: 0 10%;
 padding: 5em;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
 }
 .btn-container.zAnimate {
 transform: perspective(1000px) translateZ(-150px);
 opacity: 0.4;
 }
.btn {
 background-color: transparent;
 border: 1px solid #FFFFFF;
 color: #FFFFFF;
 padding: 0.75em 2em;
 cursor: pointer;
 text-transform: uppercase;
 -webkit-transition: border-radius 0.2s, color 1s, border 1s, background-color 1s;
 -moz-transition: border-radius 0.2s, color 1s, border 1s, background-color 1s;
 transition: border-radius 0.2s, color 1s, border 1s, background-color 1s;
 }
 .btn:hover, .btn:focus, .btn:active {
 outline: 0 !important;
 color: #FFFFFF;
 }
 .btn:hover, .btn:focus {
 border-radius: 0;
 color: #424242;
 border: 1px solid #FFFFFF;
 background-color: #FFFFFF;
 }

For the close icon, you should include the following styles to animate the icon:

#close-trigger {
 font: 0/0 a;
 text-shadow: none;
 color: transparent;
 position: relative;
 display: inline-block;
 text-align: center;
 width: 25px;
 height: 22px;
 cursor: pointer;
 }
 #close-trigger:focus {
 outline: 0;
 }
 #close-trigger:hover span {
 background-color: #FFF;
 }
 #close-trigger:hover span.first {
 -webkit-transform: rotate(-45deg) translateY(0);
 -moz-transform: rotate(-45deg) translateY(0);
 -ms-transform: rotate(-45deg) translateY(0);
 -o-transform: rotate(-45deg) translateY(0);
 transform: rotate(-45deg) translateY(0);
 }
 #close-trigger:hover span.second {
 -webkit-transform: rotate(45deg) translateY(0);
 -moz-transform: rotate(45deg) translateY(0);
 -ms-transform: rotate(45deg) translateY(0);
 -o-transform: rotate(45deg) translateY(0);
 transform: rotate(45deg) translateY(0);
 }
 #close-trigger span {
 position: absolute;
 top: 10px;
 display: block;
 background-color: #FFC400;
 width: 100%;
 height: 2px;
 pointer-events: none;
 -webkit-transition: -webkit-transform 0.3s, background-color 0.2s;
 -moz-transition: -moz-transform 0.3s, background-color 0.2s;
 transition: transform 0.3s, background-color 0.2s;
 }
 #close-trigger span.first {
 -webkit-transform: rotate(45deg) translateY(0);
 -moz-transform: rotate(45deg) translateY(0);
 -ms-transform: rotate(45deg) translateY(0);
 -o-transform: rotate(45deg) translateY(0);
 transform: rotate(45deg) translateY(0);
 }
 #close-trigger span.second {
 -webkit-transform: rotate(-45deg) translateY(0);
 -moz-transform: rotate(-45deg) translateY(0);
 -ms-transform: rotate(-45deg) translateY(0);
 -o-transform: rotate(-45deg) translateY(0);
 transform: rotate(-45deg) translateY(0);
 }

Jquery

In order everything to work properly, you should include the latest jQuery library:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="mce-no/type"></script>

To activate the sliding panel when the button is clicked, include the following script in your document:

var myTrigger = $('[data-toggle="trigger"]');
myTrigger.each(function() {
 var $this = $(this),
 main = $this.closest('[data-toggle="modal"]'),
 modalId = main.data('target'),
 modal = $('#' + modalId),
 close = modal.find('[data-dismiss="modal"]');>
$this.on('click', function() {
 modal.addClass('move-bottom');
 main.addClass('zAnimate');
 close.addClass('is-triggered');
 });
close.on('click', function() {
 modal.removeClass('move-bottom');
 main.removeClass('zAnimate');
 });
 });

That’s it. Now you should have a nice sliding panel. If you are not sure how to do it, you can download the code below.

DEMO Download Modal-like Sliding Panel

For other modal solutions check out: Remodal – Responsive Flat jQuery Modal Plugin with CSS3 Transitions and Avgrund Modal – jQuery plugin for modal boxes and popups.

Credits: Francesca