導覽列的動畫設計

HTML 部份 【結果如最上方導覽列的動畫展示】

<ul id="nav">
    <li>
        <h2>PAGE1</h2>
        <ul>
            <li><a href="#">ITEM1</a></li>
            <li><a href="#">ITEM2</a></li>
            <li><a href="#">ITEM3</a></li>
            <li><a href="#">ITEM4</a></li>
            <li><a href="#">ITEM5</a></li>
        </ul>
    </li>
    <li>
        <h2>PAGE2</h2>
        <ul>
            <li><a href="#">ITEM1</a></li>
            <li><a href="#">ITEM2</a></li>
            <li><a href="#">ITEM3</a></li>
            <li><a href="#">ITEM4</a></li>
            <li><a href="#">ITEM5</a></li>
        </ul>
    </li>
    <li>
        <h2>PAGE3</h2>
        <ul>
            <li><a href="#">ITEM1</a></li>
            <li><a href="#">ITEM2</a></li>
            <li><a href="#">ITEM3</a></li>
            <li><a href="#">ITEM4</a></li>
            <li><a href="#">ITEM5</a></li>
        </ul>
    </li>
    <li>
        <h2>PAGE4</h2>
        <ul>
            <li><a href="#">ITEM1</a></li>
            <li><a href="#">ITEM2</a></li>
            <li><a href="#">ITEM3</a></li>
            <li><a href="#">ITEM4</a></li>
            <li><a href="#">ITEM5</a></li>
        </ul>
    </li>
</ul>

CSS 部份

<style>
    #nav{ position:absolute; right:10px; bottom:0; 
          font-family:'Orbitron', 'cwTeXHei', sans-serif; }
    #nav>li{ float:left; position:relative; margin-left:5px; }
    #nav>li>h2{ font-size:1.1em; padding:10px 15px; font-weight:normal; 
                cursor:pointer; }
    #nav>li>ul{ position:absolute; left:0; top:44px; background-color:#92c7f5; 
                border-bottom:5px solid #5e87ac; padding:20px 10px; 
                display:none;}
    #nav ul li{ padding-bottom:7px; padding-left:5px; }
    #nav ul a{ font-size:0.8125em; }

    #navPoint { background-color:#92c7f5; width:100px; height:50px; 
                position:absolute; left:-100px; bottom:0; 
                border-top-left-radius:10px; border-top-right-radius:10px;}
</style>

JS-PART1 : 滑入展開選單

<script src="js/jquery-xxxx.min.js" > </script>
<script src="js/jquery.easing.1.3.js" > </script>

<script>

//變數宣告區==== (增加) ======================================================
var currentNavNo=0;                   //負責Nav導覽列區目前#navPoint停留的位置
var currentNavLeft, currentNavWidth;  //負責偵測取得頁面位置對應所在按鈕的left座標,寬度
var targetTop,targetLeft,targetWidth; //負責偵測取得目的位置的left座標,寬度


//設計導覽區指示板隨滑鼠移動==>設計下拉式選單的展開與收合
$('#nav>li').hover(
    function(){
        //目前滑入按鈕的子選單進行滑下顯示
        $(this).children('ul').stop(true,true).slideDown(500);
    },
    function(){
        //目前滑入按鈕的子選單進行滑上隱藏
        $(this).children('ul').stop(true,true).slideUp(500,'easeOutQuint');
    }
);

</script>

JS-PART2 : 導覽列指示板初始動畫

<script>

//環境初始設計===================================================================================
//設計導覽區指示板移動到第一個按鈕上,並且讓寬度與第一個按鈕一樣
function getNavCurrent(){
    //偵測第一個按鈕距離body的left距離
    currentNavLeft = $('#nav>li').eq(currentNavNo).offset().left;
    //偵測第一個按鈕含padding的寬度
    currentNavWidth = $('#nav>li').eq(currentNavNo).innerWidth();
}
getNavCurrent();
$('#navPoint').animate({left:currentNavLeft,width:currentNavWidth},1000,'easeOutElastic');

//讓導覽區第二層選單與父層寬度相同
//each是將選取的所有物件逐一執行Fn的工作, 
//i接收的是每一圈的索引編號, obj接收的是每一圈的選取器
$('#nav ul').each(function(i,obj){
    //設定每一個第二層的<ul>的寬度, 
    //指定為 ( 父層含padding的寬度 - (自己含padding的寬度-自己內容的寬度) )
    $(obj).css('width',$(obj).parent().innerWidth()- ($(obj).innerWidth()-$(obj).width() ) );
});

</script>

JS-PART3 : 導覽列指示板的互動動畫

<script>

//滑鼠互動效果#######################################################################################
//設計導覽區指示板隨滑鼠移動==>設計下拉式選單的展開與收合
$('#nav>li').hover(
    function(){
        //目前滑入按鈕的子選單進行滑下顯示------(原已設計)
        $(this).children('ul').stop(true,true).slideDown(500);
        
        //**********************************(新增)
        targetLeft = $(this).offset().left;  //偵測目前滑入按鈕距離body的left距離
        targetWidth = $(this).innerWidth();  //偵測目前滑入按鈕含padding的寬度
        $('#navPoint').stop().animate({left:targetLeft,width:targetWidth},500,'easeOutQuint');
    },
    function(){
        //目前滑入按鈕的子選單進行滑上隱藏------(原已設計)
        $(this).children('ul').stop(true,true).slideUp(500);
        
        //**********************************(新增)
        $('#navPoint').stop().animate({left:currentNavLeft,width:currentNavWidth},500,'easeOutQuint');
    }
);

</script>