The following may help you
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spry sidebar</title>
<style>
.SprySideBar {
left:0px;
position:absolute;
top:140px;
text-align:left;
}
.SprySideBar a{outline:none;}
.SprySideBarGroup{
background-color:#F3F3F3;
border:1px solid #CCCCCC;
min-height:100px;
float:left;
width:auto;
}
.SprySideBarContent {
display:none;
height:170px;
overflow:hidden !important;
width:200px;
}
.SprySideBarMenu h1 {
color:#000;
font:bold 110% arial;
margin:10px;
}
.SprySideBarMenu ul {
margin:0px;
padding:0px;
}
.SprySideBarMenu li {
list-style-type:none;
margin:0px 10px 3px;
padding:2px;
width:170px;
}
.SprySideBarMenu li a:link, .SprySideBarMenu li a:visited {
color:#000;
display:block;
font-family:verdana;
font-size:100%;
text-decoration:none;
}
.SprySideTab, .SprySideTab a{
float:left;
height:100px;
width:28px;
display:block;
border:1px solid #CCCCCC;
background-color:#F3F3F3;
margin-left:-1px;
text-decoration:none;
}
</style>
</head>
<body>
<div id="example1" class="SprySideBar">
<div class="SprySideBarGroup">
<div class="SprySideBarContent">
<div class="SprySideBarMenu">
<h1>SprySideBar</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</div>
</div>
<a href="javascript://" id="sideBarTab" class="SprySideTab"><em class="em">>></em></a>
</div>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryDOMUtils.js"></script>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryEffects.js"></script>
<script>
Spry.Effect.SideBar = function (element, options)
{
//this will return a message if u arent using the effect correct.
if (!this.notStaticAnimator)
return Spry.Effect.Utils.showInitError('SideBar');
//Start up the clustering
Spry.Effect.Cluster.call(this, options);
//We are goin to create an inline function go gather the children elements for us.
var getChildren = function(element){
//create a array
var children = [];
//get the first child
var child = element.firstChild;
while (child)
{
//its an element node proceed, this is required because FF counts the #text nodes and IE doesn't.
if (child.nodeType == 1 /* Node.ELEMENT_NODE */){
children.push(child);
if (child.hasChildNodes())
// So, first we check if the object is not empty, if the object has child nodes
{
var kids = child.childNodes;
for (var i = 0; i < kids.length; i++)
{
if(kids[i].nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(kids[i]);
};
};
}
child = child.nextSibling;
}
return children;
}
//Let Spry effect get the element for us so we know its correct
var element = Spry.Effect.getElement(element);
var content = getChildren(element);
var menu = getChildren(content[1]);
/* Content layout (4 items)
0 DIV : SprySideBarGroup
1 DIV : SprySideBarContent
2 A : SprySideTab SprySideTabClosed
3 EM :
*/
/* Menu layout (4 items)
0 DIV : SprySideBarMenu
1 H1
2 UL
*/
var doFrom = '0%';
var doTo = '100%';
var doDuration = 1000;
var doToggle = false; //toggle false is required to the correct effect direction
var doTransition = Spry.fifthTransition; //default
var isOpenIndc = '>>';
var isCloseIndc = '<<';
if (options)
{
if (options.duration != null) doDuration = Math.ceil(options.duration/2);
if (options.toggle != null) doToggle = options.toggle;
if (options.to != null) doTo = options.to;
if (options.from != null) doFrom = options.from;
if (options.transition != null) doTransition = options.transition;
if (options.openIndc != null) isOpenIndc = options.openIndc;
if (options.closeIndc != null) isCloseIndc = options.closeIndc;
}
//lets make it easy for ourselfs and create one options object for both
var effectoptions = {duration:doDuration, toggle:doToggle, from:doFrom, to:doTo, transition:doTransition};
var slide = new Spry.Effect.Squish(content[1],effectoptions);
var fade = new Spry.Effect.Fade(menu[0],effectoptions);
//how do we want to run this effect?
this.addParallelEffect(slide);
this.addParallelEffect(fade);
this.addObserver({
onPreEffect:
function(effect){
if (effect.direction == Spry.forwards)
content[3].innerHTML = isCloseIndc;
else
content[3].innerHTML = isOpenIndc;
}
});
};
//create the constructor
Spry.Effect.SideBar.prototype = new Spry.Effect.Cluster();
Spry.Effect.SideBar.prototype.constructor = Spry.Effect.SideBar;
/* create a simple effect, and add the start to the tab, and your done */
var sidebar = new Spry.Effect.SideBar('example1',{toggle:true,closeIndc:'<<'});
Spry.Utils.addLoadListener(function(){
Spry.Utils.addEventListener("sideBarTab", "click", function(){
sidebar.start()
}, false);
});
</script>
</body>
</html>
Gramps
