<style>
.demo_btn {
background-color: #FCC;
width: 100px;
cursor: pointer;
}
.demo_btn.act {
display: none;
}
.demo_btn.nonact{
}
#demo_menu{
display: none;
margin:0 0 0 0px;
position: absolute;
z-index: 2;
width: 160px;
}
#demo_menu li{
padding:10px;
margin: 1px 0px 0px 0;
background: #FCC;
}
#demo_content{
padding:10px;
margin:0 0 0 0px;
background: #FFF;
width:280px;
height:200px;
}
#demo_wrap{
overflow:hidden;
}
</style>
<script>
$(document).ready(function(){
//menu
$('.demo_btn.nonact').click(function() {
$("#demo_content").animate({'padding-left': "170px"},300 ,"easeOutQuart",function() {$('#demo_menu').fadeIn();});
$('.demo_btn.nonact').css('display',"none");
$('.demo_btn.act').show();
});
$('.demo_btn.act').click(function() {
$('#demo_menu').fadeOut(100,function() {$("#demo_content").animate({'padding-left': "10px"},600 ,"easeOutQuart")});
$('.demo_btn.act').css('display',"none");
$('.demo_btn.nonact').show();
});
});
</script>
<div class="demo_btn nonact btn">
メニュー
</div>
<div class="demo_btn act btn">
メニュー
</div>
<div id="demo_wrap">
<ul id="demo_menu">
<li>リンゴ
<li>ぶどう
<li>なし
</ul>
<div id="demo_content">
このエリアの左にメニューがスライドして表示されます
</div>
</div>