Creating A Simple Sliding Panel with jQuery and CSS - slideupdown

A slide & push effect built with jQuery and CSS for creating a fixed & hidden panel that will slide out from the sides of the page. Great for creating a slide-out contact form or sliding menu on your web page.

How to use it:

1. Include the latest version of jQuery library directly from a CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Create the content for the panel.

<div class="panel">
Your content goes here
</div>

3. Create a trigger to toggle the panel with slide up/down effects.

<p class="slide"><a href="#" class="pull-me">Slide Up/Down</a></p>

4. The required CSS to style the panel.

.panel {
background: #155F9E;
background-size: 90% 90%;
height: 300px;
display: none;
font-family: garamond, times-new-roman, serif;
}
.panel p {
text-align: center;
color: white;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 2px #0D395E;
}
.pull-me {
display: block;
position: relative;
right: -125px;
width: 150px;
height: 20px;
font-family: arial, sans-serif;
font-size: 14px;
color: #ffffff;
background: #0A2B4A;
text-decoration: none;
-moz-border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.pull-me p {
text-align: center;
}

5. The jQuery script.

$(document).ready(function() {
    $('.pull-me').click(function() {
        $('.panel').slideToggle('slow');
    });
});

---

This awesome jQuery plugin is developed by mfl79. For more Advanced Usages, please check the demo page or visit the official website.