Floating Sliding Panel with jQuery - Portamento
File Size: | 13.3 KB |
---|---|
Views Total: | 3644 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Portamento is a useful jQuery plugin for creating a floating Sliding Panel on your webpage that works fine with floated and absolutely-positioned layouts.
Basic Usage:
1. Include jQuery Library and Portamento in body section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="portamento.js"></script>
2. CSS
<style> #wrapper { overflow: hidden; } #content { width: 486px; margin-right: 10px; float: left; min-height: 1200px; } #sidebar { width: 284px; padding: 10px; background: #eee; float: right; height: 400px; } #portamento_container { float: right; position: relative; } /* take the positioning of the sidebar, and become the start point for the sidebar positioning */ #portamento_container #sidebar { float: none; position: absolute; } /* no need to float anymore, become absolutely positoned */ #portamento_container #sidebar.fixed { position: fixed; } /* if the panel is sliding, it needs position:fixed */ </style>
3. Markup
<div id="sidebar"> ..... </div>
4. Call the function
<script> $('#sidebar').portamento(); </script>
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.