jQuery開閉式のメニュー実装について

質問

jQueryにて開閉式のメニューを、下記jsを使用し実装したいと思ってるのですが、
下記jsだと、右側から表示するようになっています。
これを左側から表示するようには、js及びcssをどう修正すれば、
実現できるようになりますでしょうか？
あと、デフォルトで「開いた」状態にする場合もどう修正すればよろしいでしょうか。

■javascript
<script type="text/javascript">
$(document).ready(function(){
var panel_DefW = $("#slide_panel").width();
var btn_DefW = 20;
$('#slide_panel').width(btn_DefW);
$('.menu_off').click(function() {
if($("#slide_panel").width() > btn_DefW){
w = btn_DefW;
}else{
w = panel_DefW;
}
$("#slide_panel").animate({
width: w
}, "slow",
function(){
$('.menu_off').toggleClass('active');
});
});
});
</script>

■html
<div id="slide_panel">
<div class="wrap menu_off">
<div class="panel_main">
<h2>メニュー</h2>
<ul>
<li><a href="#">リストメニュー1</a></li>
<li><a href="#">リストメニュー2</a></li>
</ul>
</div>
</div>
</div>

■css
#slide_panel{
position: absolute;
top:200px;
right:0;
margin: 0;
padding: 0 0 0 0;
width:220px; height: auto;
cursor: pointer;
overflow: hidden;
}

#slide_panel .wrap{
width: 220px;
overflow:hidden;

以上になります。
誰かお分かりになる方がいらしましたらお願い致します。

回答No.1

Hanagefactory · ベストアンサー

すごい単純にやるなら、
・JSの4行目「$('#slide_panel').width(btn_DefW);」をトル　＜　開いた状態に
・CSS「#slide_panel」の4行目「right:0;」を「left:0;」にする　＜　左始点に
だけでいけると思います。

---

leftでやってスライドさせるとかでもいいのかなー
「right:0;」を「left:0;」にするをした上で、
<script type="text/javascript">
$(document).ready(function(){
//隠れたときのleftの値
var panel_DefLeft= -200
$('.menu_off').click(function() {
var left;
if($("#slide_panel").position().left < 0){
left = 0;
}else{
left = panel_DefLeft;
}
$("#slide_panel").animate({left: left}, "slow",
function(){
$('.menu_off').toggleClass('active');
}
);
});
});
</script>