sideroad

jQuery SideBar Plugin

jQuerySideBar Plugin is display sidebar menu

Dual licensed under the MIT or GPL Version 2 licenses.

Requires jQuery , jQuery UI.

Browser compatibility : IE 7.x+ , Firefox 3.6+ , Google Chrome2.x+, Opera, Safari1.0.0+

Demo

1.Embed a css, jquery, jquery.sidebar and ul tag

<link rel="stylesheet" type="text/css" href="/css/dark-glass/sidebar.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.sidebar.js"></script>
<ul id="demo_menu1" >
<li><a href="/" >home</a></li>
<li><a href="/plugins/" >plugins</a></li>
<li><a href="/works/" >works</a></li>
<li><a href="http://d.hatena.ne.jp/sideroad/" >diary</a></li>
<li><a href="/about/" >about</a></li>
<li><a href="/contact/" >contact</a></li>
</ul>
    

2.call function

$("ul#demo_menu1").sidebar();
$("ul#demo_menu2").sidebar({
position:"right",
callback:{
item : {
enter : function(){
$(this).find("a").animate({color:"red"}, 250);
},
leave : function(){
$(this).find("a").animate({color:"white"}, 250);
}
}
}
});
$("ul#demo_menu3").sidebar({
position:"top",
open:"click"
});
$("ul#demo_menu4").sidebar({
position:"bottom"
});
$("ul#demo_menu5").sidebar({
root: $("#include")
});
    

Style

Style

Download

Downloadgithub

Comment