David's Untitled Life

I'm designing the menu of my product.At the beginning,i just modify the div element's height attribute to make the menu's animation.But i found that's really fade.So i found this nifty small lib to implement my idea.That's easy to use and only 3kb.More feature are being explored.But till now,it fits my requirement.The demo codes are here.

<!-- navigator bar --><div id="navigator"><input class="navBtn" onclick="navBtnOnClick('folder')" type="button" /> <!-- folder --><div id="folder" style="TEXT-ALIGN: center"><br />
<img src="http://blueoxygen.dflying.net/image/inbox.jpg" />Inbox <br />
<br /><img src="http://blueoxygen.dflying.net/image/draft.jpg" />Draft <br />
<br /><img src="http://blueoxygen.dflying.net/image/sent.jpg" />Sent <br />
<br /><img src="http://blueoxygen.dflying.net/image/trash.jpg" />Trash <br />
</div><input class="navBtn" onclick="navBtnOnClick('office')" type="button" /> <div id="office" style="TEXT-ALIGN: center"></div><input class="navBtn" onclick="navBtnOnClick('manage')" type="button" /> <div id="manage" style="TEXT-ALIGN: center"><br />
<img alt="user" src="http://blueoxygen.dflying.net/image/user.gif" /><a class="lbOn" accesskey="A" href="http://blueoxygen.dflying.net/add_user.htm">Add User</a> <br />
</div></div>

And the javascript are here:

/** * Control navigator bar's effect * @param {string} layerName The id of layer to be outspread */ function navBtnOnClick(layerName){ /** * Layer names * @type Array */ var layerNames = new Array(\"folder\",\"office\",\"manage\"); if(layerName != \"manage\"){ var myEffect = new fx.Height($(layerName) , {duration: 500, onComplete: function(){ //Place codes here to do sth when div outspread } }); myEffect.toggle(); } } 
 

Enjoy it!:)