Page1 左側邊左右滑動的面板

HTML & CSS 部份 【結果如區段一左側的滑動面板】

<div id="ADpanel">
    <div id="ADpanelBtn"> 課程大綱簡介</div>
    <ol>
        <li>認識網頁語言</li>
        <li>認識JavaScript<br>了解程式基本語法</li>
        <li>認識jQuery</li>
        <li>jQuery的物件控制</li>
        <li>jQuery的基本動畫</li>
        <li>jQuery的自定動畫</li>
        <li>jQ的AJAX載入技術</li>
    </ol>
</div>
<style>
    #ADpanel{ position:absolute; width:220px; min-height:250px; 
              left:0; top:150px; background-color:#d0a2fa; z-index:999; 
              font-size: 15px; font-family:'cwTeXHei', sans-serif;
              box-shadow:5px 5px 10px #000; display:none; }

    #ADpanelBtn{ position:absolute; width:20px; height:100%; 
                 right:-40px; top:0; background-color:#8951bc; 
                 padding:0 10px; cursor:pointer; 
                 box-shadow:5px 5px 10px #000; 
                 text-align:center; font-size:20px; color:#FFF; }

    #ADpanel ol{ padding:30px 20px 20px 40px; list-style-type:decimal; }
    #ADpanel ol li{ padding-bottom:5px; list-style-type:decimal; }
</style>

JavaScript & jQuery 部份

<script>

//變數宣告區==========================================================
//偵測取得page1中#ADpanel的寬度,乘上-1表示往左移出的距離
var page1ADpanelLeft = $('#ADpanel').innerWidth()*-1;   


//環境初始設計=========================================================
//page1中ADpanel的動畫(淡入→滑出)
$('#ADpanel').fadeIn(2000)
             .animate({left:page1ADpanelLeft},1000,'easeOutQuint');


//滑鼠互動效果#########################################################
//設計page1中#ADpanel的滑出與滑入=======================================
$('#ADpanelBtn').click(function(){
    if( $('#ADpanel').offset().left < 0 ){
        $('#ADpanel').animate({left:0},1000,'easeOutQuint');
    }else{
        $('#ADpanel').animate({left:page1ADpanelLeft},1000,'easeOutElastic')
    }        
});

</script>