Welcome, Old Sport!

漂亮的大背景图片导航栏CSS & jQuery

by ilikecss ON 2010/11/05 16932

在这个教程中我们学习如何制作拥有大块背景的导航栏。主要的想法如果有三个列表项但包含不同的背景,当你切换哪个选项背景就随之变换的效果,当然是包含动画效果的。导航栏也包括子菜单,每栏子菜单都拥有各自的不同颜色背景。

Step1. 创建HTML

<div id="menuWrapper" class="menuWrapper bg1">
    <ul class="menu" id="menu">
        <li class="bg1" style="background-position:0 0;">
            <a id="bg1" href="#">Home</a>
            <ul class="sub sub1" style="background-position:0 0;">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
            </ul>
        </li>
        <li class="bg1" style="background-position:-266px 0px;">
            <a id="bg2" href="#">About Me</a>
            <ul class="sub sub2" style="background-position:-266px 0;">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
            </ul>
        </li>
        <li class="last bg1" style="background-position:-532px 0px;">
            <a id="bg3" href="#">Contact</a>
            <ul class="sub sub3" style="background-position:-266px 0;">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
            </ul>
        </li>
    </ul>
</div>

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和脚本包

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>

脚本:

$(function() {
	/* position of the <li> that is currently shown */ 当前li位置显示
	var current = 0;

	var loaded  = 0;
	for(var i = 1; i <4;   i)
		$('<img />').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 <li> 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 <li> 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 <li> 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);
		}
	}
});
3条评论
  1. #1

    majw说道:

    很不错的效果,就是实用性差些,支持一下。

  2. #2

    360说道:

    学习了。谢谢分享。很漂亮。




TOP