jQuery漸層發光導航選單的實例代碼

jQuery漸層發光導航選單的實例代碼_jquery

WBOY

發布： 2016-05-16 17:39:10

原創

1598 人瀏覽過

jQuery漸層發光導航選單的實例代碼_jquery

下面跟大家分享一下具體的實現過程。

HTML標籤結構:

複製程式碼代碼如下:

選單一選單一

菜單二

>">選單三

選單四選單四

CSS樣式：li的樣式：

複製程式碼程式碼如下:

.animation_menu li{

.animation_menu li{
顯示，並使其水平平鋪顯示*/
display:block; float: left;

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

height: 50px;

/*設定文字垂直水平居中*/
line-height: 50px;

text-align: center;

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

初始看到的a的樣式：

複製程式碼

程式碼如下:

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

為了裡面的span能夠以a為基準進行定位*/
    position: relative;

display: block;

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

hover後看到的span的樣式：

複製程式碼程式碼如下:

.animation_menu li a sp是我們背景圖片*/
    background-image: url("images/bg-sprite-topmenu.png");
    background-repeat: no-repeat;
    /*設定區塊模式顯示，並製定寬高和a的寬高一樣，和絕對位置，這是為了使其和a裡面的文字重合顯示*/

    display: block;
    height : 50px;
    width: 111px;
    text-align: center;
    position: absolute;
      color:#FFE2BB ;
}

用sprite技術定位，a和span各種狀態的樣式：

複製程式碼

程式碼如下:

/*正常狀態下的樣式*/
.animation_menu li a {
    /*一般灰色背景*/
    background-position: 0 -153px;}    /*hover藍色高亮背景*/
    .animation_menu li a span {
        background
/*連結啟動狀態下的樣式*/
.animation_menu li.current a {
     /*一般灰色高亮背景*/    background-position: 0 0;

   background-position: 0 0;}}
    /*hover黃色高亮背景*/
    .animation_menu li.current a span {

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

最後是JavaScript
選單的漸變效果主要是透過控制opacity實現的，請看下面程式碼。

複製代碼

代碼如下:

// 將opacity設為0，將span的樣式和文字隱藏起來 $(".animation_menu li a span").css("opacity", "0"); // 綁定hover事件$(".animation_menu li a span").hover( //mouse on事件

從0到1，這樣span的樣式和文字就會慢慢的顯示出來，覆蓋a的樣式

        $(this).stop().animate({
          slow");
    },    //mouse out事件

    function () {
        // 當滑鼠移走的時候，可讓滑鼠移走的時候，動態改變了，這樣s原來的a的樣式了。 🎜>);

//綁定click事件，點選目前連接，為li新增current class，同時移除其他li的current class
$(".animation_menu li a").click(function () {
$(".animation_menu li a").each(function (index, item) {
        $(item).parent().removeClass("current");
  ).parent().addClass("current");
});

到此全部結束，希望這個jQuery導航選單能給你一些靈感。