jQuery 教學 – 山寨版的 HTC 首頁選單

有沒有覺得 HTC 網站上方的 Flash 選單很有趣呢!這次筆者就是要教各位怎樣用 jQuery 做出一個山寨版的 HTC 首頁選單。

在開始介紹之前,請各位先到 HTC 網站看一下他們首頁長怎樣。

JavaScript 程式設計  - jQuery 教學 - 山寨版的 HTC 首頁選單 - htcmenu1

 

我們一樣先看 HTML 選單的部份

    
    

每一個連結都有各自的 id,這樣比較方便等下的 CSS 來使用它。接著就直接再來看 CSS 的部份:

body {
    margin: 0;
    padding: 0;
}
#menu {
    float: right;
    margin: 50px 0 0;
    list-style: none;
}
#menu li {
    float: left;
}
#menu li a {
    display: block;
    width: 113px;
    height: 38px;
    text-indent: -9999px;
}
#home {
    background-image: url('home.png');
}
#abgne_tw {
    background-image: url('abgne_tw.png');
}
#jellyyoyo {
    background-image: url('jellyyoyo.png');
}
#jquery {
    background-image: url('jquery.png');
}
#flycan {
    background-image: url('flycan.png');
}
#menuMask {
    position: absolute;
    z-index: 10000;
    display: block;
    left: 0;
}
.bhr {
    clear: both;
    height: 15px;
    z-index: 200;
    margin: 0 auto;
    background-color: #000;
}

這邊要注意一下,為了方便等下程式的存取控制,因此筆者就把圖片的檔名設成跟連結的 id 一樣,然後遮罩用的黑色圖片也只是多加了個 _black 字樣而已。這邊雖然是把每個選單圖片都拆開來,但如果要改成一張大圖也是可以,只是要控制好 background-position 就好。
看一下圖片的寬高:
JavaScript 程式設計  - jQuery 教學 - 山寨版的 HTC 首頁選單 - htcmenu2
因為我們的遮罩比一般的大上一點,因此等一下程式中要做一點微調的設定,這樣才不會看起來怪怪的。若沒問題的話,就來看 jQuery 的部份囉!

// 避免無法正確取得選單圖片的寬高
// 因此動作延遲到 window.onload
$(window).load(function(){
    // 先取得選單的連結及找出 .selected 的選項
    // 再取得用來當遮罩的 #menuMask
    // 因為遮罩圖片比原來選單圖片大,所以設定要顯示的寬高及位置差距
    var _menu = $("#menu li>a"),
        _target = $(_menu).filter(".selected"),
        _menuMask = $("#menuMask"),
        _maskHeight = 10,
        _diffHeight = 8,
        _maskWidth = 5,
        _diffWidth = 5;

    // 如果沒有 .selected 的選項就預設第一個
    if(_target.length<=0){
        _target = $(_menu).eq(0);
    }

    // 圖片預載
    _menu.each(function(){
        $("").attr("src", $(this).attr("id")+'_black.png');
    });

    // 當選單被點擊時..
    _menu.click(function(){
        // 把點擊到的項目加上 .selected
        var _this = $(this).addClass("selected"),
            _link = _this.attr("href");

        // 更換選單的背景圖片及移動選單到該選項上
        // 如果選項有連結時,則會在動畫移動完後來轉址
        _menuMask.css({
            backgroundImage: 'url('+_this.attr("id")+'_black.png)'
        }).stop().animate({
            width: $(this).width() + _maskWidth,
            height: $(this).height() + _maskHeight,
            top: $(this).offset().top - _diffHeight,
            left: $(this).offset().left - _diffWidth
        }, function(){
            if(!!_link){
                location = _link;
            }
        });

        return false;
    }).focus(function(){
        $(this).blur();    
    });

    // 當瀏覽器尺寸改變時也要重新移動位置
    $(window).resize(function () {
        moveMenu($(_menu).filter(".selected"));
    });

    // 移動遮罩到指定的選項上面
    function moveMenu(obj){
        _menuMask.css({
            width: obj.width() + _maskWidth,
            height: obj.height() + _maskHeight,
            top: obj.offset().top - _diffHeight,
            left: obj.offset().left - _diffWidth,
            backgroundImage: 'url('+obj.attr("id")+'_black.png)'
        });
    }

    // 網頁載入後先移動遮罩
    moveMenu(_target);
}); 

一開始網頁載入後,如果連結有 .selected 的 className 時,則會把遮罩移到該選項上;反之若都沒有時,則把它移到第一個選項上面。因此,各位若有多個頁面時,就要一一的設定一下這樣的 .selected,不然就是要變更一下程式的判斷才行。
到這邊就完成整個山寨選單的製作了,讓我們看一下畫面及效果吧:

JavaScript 程式設計  - jQuery 教學 - 山寨版的 HTC 首頁選單 - htcmenu3

是不是給它有 9 成以上的相似度了呢!再特別說明一點,HTC 網站的 Flash 選單是當使用者點某一選項時,遮罩內容會馬上就變更,然後會移動到所點選的選項上面後再啟動連結的效果。因此筆者也把這功能加到我們的範例中,所以仔細注意一下整個移動的動作唷!

有上過 jQuery 課程的同學可以對照一下講義範例 5-13,做法及原理是一樣的!

 

範例瀏覽:
http://demonstration.abgne.tw/jquery/0008/0008.html
http://demonstration.abgne.tw/jquery/0008/0008_home.html

by
男丁格爾
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in JavaScript 程式設計 and tagged , , , .

迴響已被關閉。