jQuery Simple Slide Out And Drawer Effect Plugin
File Size: | 7.66KB |
---|---|
Views Total: | 16555 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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:
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.