article:
Tutorial Infographics: CMS - Which is Best for Business Websites
article:
JS Plugin: hoverIntent

JS Plugin: slidingPanels

Advertisement

"Similar to a horizontal accordion navigation, or holding some playing cards in your hand... sliding panels around to reveal one of interest."

"This is a plug-in for the jQuery JavaScript Library and it requires the hoverIntent plug-in."


Samples

slidingPanels using defaults
$("#demo1").slidingPanels();

Implements
BODY
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script>
<script type="text/javascript" src="jquery.slidingPanels.js"></script>
<link rel="stylesheet" type="text/css" href="slidingPanels.css" />

HTML
<ul id="demo1" class="demo">
    <li class="p1">&nbsp;</li>
    <li class="p2">&nbsp;</li>
    <li class="p3">&nbsp;</li>
    <li class="p4">&nbsp;</li>
    <li class="p5">&nbsp;</li>
</ul>

Screenshots

Plugin: slidingPanels

Plugin: slidingPanels

"This example demonstrates the defaults of slidingPanels (see Configuration Options below). The id (#demo1) is only for targeting, there is no special styling applied to it. The plug-in assumes you're using an ul/li structure (this can be overridden). The classes on the li tags are for coloring only. "


slidingPanels with callbacks
$("#demo2").slidingPanels({
    onEnterState: demoEnterState,
    onLeaveState: demoLeaveState
});
function demoEnterState( state ) { $(this).append( "Entered " + state + "<br/>"); };
function demoLeaveState( state ) { $(this).append( "Leaving " + state + "<br/>"); };


Implements
BODY
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script>
<script type="text/javascript" src="jquery.slidingPanels.js"></script>
<link rel="stylesheet" type="text/css" href="slidingPanels.css" />

HTML
<ul id="demo1" class="demo">
    <li class="p1">&nbsp;</li>
    <li class="p2">&nbsp;</li>
    <li class="p3">&nbsp;</li>
    <li class="p4">&nbsp;</li>
    <li class="p5">&nbsp;</li>
</ul>

Screenshots

Plugin: slidingPanels

Plugin: slidingPanels

Plugin: slidingPanels

"This example demonstrates the use of callback functions. The functions are called only on panels that are changing states (Default, Minimized, and Maximized) so that you can alter their appearance before leaving (onLeave) and after entering (onEnter). The this keyword refers to the panel being acted on. The functions are passed the panel's state as a string so you can manipulate it based on that information. "



source
download

Advertisement
Tags: jguery, plugin, sliding, panels, menu, design, layout, web, internet, website

Leave a Comment

No Comment

© Creative3x Ltd.