快捷導(dǎo)航

jQuery漸變發(fā)光導(dǎo)航菜單的實(shí)例代碼

更新時間：2013年03月27日 09:59:30 作者：

今天介紹一個jQuery漸變發(fā)光效果的導(dǎo)航菜單，這是一個簡單的通過jQuery控制opacity實(shí)現(xiàn)的導(dǎo)航菜單。

下面和大家分享一下具體的實(shí)現(xiàn)過程。

HTML標(biāo)簽結(jié)構(gòu):

<ul class="animation_menu">
     <li class="current">
         <a href="#">菜單一<span>菜單一</span></a>
     </li>
     <li>
         <a href="#">菜單二<span>菜單二</span></a>
     </li>
     <li>
         <a href="#">菜單三<span>菜單三</span></a>
     </li>
     <li>
         <a href="#">菜單四<span>菜單四</span></a>
     </li>
 </ul>

CSS樣式：
li的樣式：

復(fù)制代碼代碼如下:

.animation_menu li{
    /*塊狀模式顯示，并使其水平平鋪顯示*/
    display:block;
    float: left;

    /*寬高是背景圖片的*/
    width: 111px;
    height: 50px;

    /*設(shè)置文字垂直水平居中*/
    line-height: 50px;
    text-align: center;

    font-weight: bold;
    font-size: 18px;
    list-style-type:none;
}

初始看到的a的樣式：

復(fù)制代碼代碼如下:

.animation_menu li a {
    /*這里是我們背景圖片*/
    background-image: url("images/bg-sprite-topmenu.png");
    background-repeat: no-repeat;

    /*設(shè)置position屬性是為了里面的span能夠以a為基準(zhǔn)進(jìn)行定位*/
    position: relative;

display: block;

    /*我們不使用純黑色*/
    color: #292724;
    text-decoration:none;
}

hover后看到的span的樣式：

復(fù)制代碼代碼如下:

.animation_menu li a span {
    /*這里是我們背景圖片*/
    background-image: url("images/bg-sprite-topmenu.png");
    background-repeat: no-repeat;

    /*設(shè)置塊模式顯示，并制定寬高和a的寬高一樣，和絕對位置，這是為了使其和a里面的文字重合顯示*/
    display: block;
    height: 50px;
    width: 111px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;

    color:#FFE2BB;
}

用sprite技術(shù)定位，a和span各種狀態(tài)的樣式：

復(fù)制代碼代碼如下:

/*正常狀態(tài)下的樣式*/
.animation_menu li a {
    /*一般灰色背景*/
    background-position: 0 -153px;
}
    /*hover藍(lán)色高亮背景*/
    .animation_menu li a span {
        background-position: 0 -102px;
    }

/*鏈接激活狀態(tài)下的樣式*/
.animation_menu li.current a {
     /*一般灰色高亮背景*/
    background-position: 0 0;
}
    /*hover黃色高亮背景*/
    .animation_menu li.current a span {
        background-position: 0 -51px;
    }

css的工作到此就結(jié)束了，下面我們來看看javascript。

最后是JavaScript
菜單的漸變效果主要是通過控制opacity實(shí)現(xiàn)的，請看下面代碼。

復(fù)制代碼代碼如下:

// 通過將opacity設(shè)置為0，將span的樣式和文字隱藏起來
$(".animation_menu li a span").css("opacity", "0");

// 綁定hover事件
$(".animation_menu li a span").hover(
    //mouse on事件
    function () {
        // 通過動態(tài)的改變opacity從0到1，這樣span的樣式和文字就會慢慢的顯示出來，覆蓋a的樣式
        $(this).stop().animate({
            opacity: 1
        }, "slow");
    },
    //mouse out事件
    function () {
        // 當(dāng)鼠標(biāo)移走的時候，動態(tài)改變?yōu)?，這樣span又看不見了，看到原來的a的樣式了。
        $(this).stop().animate({
            opacity: 0
        }, "slow");
    }
);

//綁定click事件，點(diǎn)擊當(dāng)前連接，為li添加current class，同時移除其他li的current class
$(".animation_menu li a").click(function () {
    $(".animation_menu li a").each(function (index, item) {
        $(item).parent().removeClass("current");
    });
    $(this).parent().addClass("current");
});

到此全部結(jié)束，希望這個jQuery導(dǎo)航菜單能夠給你一些靈感。

您可能感興趣的文章:

相關(guān)文章

兩種方法基于jQuery實(shí)現(xiàn)IE瀏覽器兼容placeholder效果
這篇文章主要介紹了兩種方法基于jQuery實(shí)現(xiàn)IE瀏覽器兼容placeholder效果,需要的朋友可以參考下
2014-10-10
為開發(fā)者準(zhǔn)備的10款最好的jQuery日歷插件
這篇文章介紹的是 10 款最棒而且又很有用的 jQuery 日歷插件，允許開發(fā)者們把這些漂亮的日歷插件結(jié)合到自己的網(wǎng)站中
2014-02-02
jQuery實(shí)現(xiàn)可拖拽的許愿墻效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)可拖拽的許愿墻效果,可實(shí)現(xiàn)拖拽圖片與層疊顯示功能,涉及jQuery插件的簡單使用,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-09-09
jQuery給指定的table動態(tài)添加刪除行的操作方法
今天在項(xiàng)目中，剛好用到給指定的table添加一行、刪除一行。添加一行，支持在任意行添加一行且可配置的，刪除一行支持動態(tài)刪除一行。本文給大家介紹的非常詳細(xì)，一起看看吧
2016-10-10
JQuery中屬性過濾選擇器用法實(shí)例分析
這篇文章主要介紹了JQuery中屬性過濾選擇器用法,實(shí)例分析了jQuery屬性過濾選擇器的相關(guān)使用技巧,需要的朋友可以參考下
2015-05-05
AeroWindow 基于JQuery的彈出窗口插件
AeroWindow是個Win7樣式的彈出窗口，jQuery插件，效果很酷!而且還像windows的窗口一樣可最大，最小化，隨意拖動。
2011-06-06
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格行上移下移和置頂?shù)姆椒?涉及jQuery操作頁面元素的相關(guān)技巧,需要的朋友可以參考下
2015-05-05