漂亮的大背景圖片導航欄CSS & jQuery

在這個教程中我們學習如何製作擁有大塊背景的導航欄。主要的想法如果有三個列表項但包含不同的背景，當你切換哪個選項背景就隨之變換的效果，當然是包含動畫效果的。導航欄也包括子菜單，每欄子菜單都擁有各自的不同顏色背景。


View Demo

Step1. 創建HTML

程序代碼

    

        
• 
              Home
              
                  
  • Submenu 1
                  
  • Submenu 2
                  
  • Submenu 3
              
  
          
        
• 
              About Me
              
                  
  • Submenu 1
                  
  • Submenu 2
                  
  • Submenu 3
              
  
          
        
• 
              Contact
              
                  
  • Submenu 1
                  
  • Submenu 2
                  
  • Submenu 3
              
  
          
    

Step2. 創建CSS

程序代碼

.menuWrapper{
width: 797px;
font-size: 14px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: normal;
line-height: 1.45em;
position: relative;
margin: 20px auto;
background-position: 0 0;
background-repeat: no-repeat;
background-color: transparent;
}
ul.menu{
width: 797px;
list-style: none;
overflow: hidden;
}
ul.menu > li{
width: 265px;
height: 542px;
float: left;
border-right: 1px solid #444;
background-repeat: no-repeat;
background-color: transparent;
}
ul.menu > li.last{
border:none;
}
.bg1{
background-image: url(../images/1.jpg);
}
.bg2{
background-image: url(../images/2.jpg);
}
.bg3{
background-image: url(../images/3.jpg);
}
ul.menu > li > a{
width: 265px;
float: left;
margin-top: 450px;
text-align: center;
line-height: 50px;
color: #ddd;
background-color: #333;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
font-weight: bold;
}
ul.menu > li ul{
width: 100%;
height: 110px;
list-style: none;
float: left;
margin-top: -180px;
padding-top: 20px;
background-repeat: no-repeat;
background-color: transparent;
}
ul.menu > li ul li{
display: none;
}
ul.menu > li ul.sub1{
background-image: url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
background-image: url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
background-image: url(../images/bg3sub.png);
}
ul.menu > li ul li a{
color: #fff;
text-decoration: none;
line-height: 30px;
margin-left: 20px;
font-size: 12px;
}
ul.menu > li ul.sub1 li{
display: block;
}
ul.menu > li ul li a:hover{
color: #BBB;
text-decoration: underline;
}

Step3. 插入jQuery和腳本包

程序代碼

腳本:
$(function() {
    /* position of the

that is currently shown */ 當前li位置顯示
    var current = 0;

    var loaded  = 0;
    for(var i = 1; i <4;   i)
        $('').load(function(){
              loaded;
            if(loaded == 3){
                $('#bg1,#bg2,#bg3').mouseover(function(e){

                    var $this = $(this);
                    /* if we hover the current one, then don't do anything */ 瀏覽當前的一個
                    if($this.parent().index() == current)
                        return;

                    /* item is bg1 or bg2 or bg3, depending where we are hovering */ b1 b2 b3取決於自己瀏覽
                    var item = e.target.id;

                    /*
                    this is the sub menu overlay. Let's hide the current one
                    if we hover the first

or if we come from the last one,
                    then the overlay should move left -> right,
                    otherwise right->left
                     */ 子菜單的狀態，用來隱藏當前選項
                    if(item == 'bg1' || current == 2)
                        $('#menu .sub' parseInt(current 1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
                            $(this).find('li').hide();
                        });
                    else
                        $('#menu .sub' parseInt(current 1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
                            $(this).find('li').hide();
                        });

                    if(item == 'bg1' || current == 2){
                        /* if we hover the first

or if we come from the last one, then the images should move left -> right */
                        $('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
                        move(1,item);
                    }
                    else{
                        /* if we hover the first

or if we come from the last one, then the images should move right -> left */
                        $('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
                        move(0,item);
                    }

                    /*
                    We want that if we go from the first one to the last one (without hovering the middle one),
                    or from the last one to the first one, the middle menu's overlay should also slide, either
                    from left to right or right to left.
                     */
                    if(current == 2 && item == 'bg1'){
                        $('#menu .sub' parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
                    }
                    if(current == 0 && item == 'bg3'){
                        $('#menu .sub' parseInt(current 2)).stop().animate({backgroundPosition:"(266px 0)"},300);
                    }

                    /* change the current element */
                    current = $this.parent().index();

                    /* let's make the overlay of the current one appear */

                    $('#menu .sub' parseInt(current 1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
                        $(this).find('li').fadeIn();
                    });
                });
            }
        }).attr('src', 'images/' i '.jpg');

    /*
    dir:1 - move left->right
    dir:0 - move right->left
     */
    function move(dir,item){
        if(dir){
            $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
            $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
            $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
                $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
            });
        }
        else{
            $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
                $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
            });
            $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
            $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
        }
    }
});

Download


文章提供: BAYSTARS DESIGN網頁設計公司