jQuery Simple Slide Out And Drawer Effect Plugin

A super simple and easy-to-use jQuery plugin that allows you to create a sliding drawer widget with slide out/down/up effects on the anywhere of your page. 

You might also like:

• Slide Out Contact Form Plugin with jQuery - Contactable

How to use it:

1. Include jQuery library and jquery.slidedrawer.js on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.slidedrawer.min.js"></script> 

2. Html Markup structure

<section class="drawer"> 
<header class="clickme">Current Events</header>
<div class="drawer-content">
<div class="drawer-items">
<ul>
<li> <a href="#">
<div class="title">Item 1</div>
<div class="time">8:00am</div>
<div class="location">Other Info</div>
</a> </li>
<li> <a href="#">
<div class="title">Item 2</div>
<div class="time">8:00am</div>
<div class="location">Other Info</div>
</a> </li>
<li> <a href="#">
<div class="title">Item 3</div>
<div class="time">8:00am</div>
<div class="location">Other Info</div>
</a> </li>
<li> <a href="#">
<div class="title">Item 4</div>
<div class="time">8:00am</div>
<div class="location">Other Info</div>
</a> </li>
</ul>
</div>
</div>
</section>

3. The CSS

.drawer {
bottom: 0px;
height: 140px;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 5; 
}
.drawer header {
background: #000000; 
color: #ffffff;
display: block;
height: 25px;
line-height: 25px;
margin: auto;
overflow: hidden;
padding: 5px;
text-align: center;
width: 150px;
-moz-border-radius-topleft: 25px 40px;
-moz-border-radius-topright: 25px 40px;
border-top-left-radius: 25px 40px;
border-top-right-radius: 25px 40px;
}
.drawer-content {
background: url(../images/bg.png);
border-collapse: collapse;
border-top: 5px solid #000000;
height: 110px;
width: 100%;
}
.clickme {
cursor: pointer;
}
.drawer-items {
margin: auto;
width: 960px;
}
.drawer-items ul {
margin: 0px;
}
.drawer-items li {
float: left;
list-style: none;
margin-left: 0px;
width: 200px;
}
.drawer-items li a {
color: #fff;
display: block;
height: 86px;
padding: 12px;
text-decoration: none;
width: 176px;
}
.drawer-items li a:hover {
background: #bd4929;
}
.drawer-items .title {
color: #c4c4c4;
font-size: 20px;
line-height: 1.1;
}

4. Call the plugin with options

<script>
$(function(){
$('.drawer').slideDrawer({
showDrawer: true, // The drawer is hidden by default.
slideTimeout: true, // Sets the drawer to slide down after set count if set to true.
slideSpeed: 600, // Slide drawer speed. 
slideTimeoutCount: 3000, // How long to wait before sliding drawer slides down.
});
});
</script>

 

---

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