Welcome, Old Sport!

一款动感十足的菜单CSS & jQuery

by ilikecss ON 2010/11/04 4937

今天,我们将创建一个动感十足动画菜单。单击菜单项目,将会扩展和展示一些说明或链接的内容区域。当再次单击该菜单项,形状会重新恢复,回到初始背景图像。这款效果比较华丽,制作简单。

Changeable-Boxes-Menu

Step1. 创建HTML

<div id="littleBoxes" class="littleBoxes">
<div class="boxlink bg1" style="top: 0px; left: 0px;">
    <a href="">Home</a>
    <div class="boxcontent">
        <p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life. </p>
    </div>
</div>
<div class="bg5" style="background-position:-90px 0; top:0px; left:95px;"></div>
<div class="bg5" style="background-position:-180px 0; top:0px; left:190px;"></div>
<div class="bg5" style="background-position:-270px 0; top:0px; left:285px;"></div>

<div class="bg5" style="background-position: 0 -90px; top:95px; left:0px;"></div>
<div class="boxlink bg2" style="top: 95px; left: 95px;">
    <a href="">About</a>
    <div class="boxcontent">
        <p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life. </p>
    </div>
</div>
<div class="bg5" style="background-position:-180px -90px;top:95px;left:190px;"></div>
<div class="bg5" style="background-position:-270px -90px;top:95px;left:285px;"></div>

<div class="bg5" style="background-position:0 -180px;top:190px;left:0px;"></div>
<div class="bg5" style="background-position:-90px -180px;top:190px;left:95px;"></div>
<div class="boxlink bg3" style="top:190px;left:190px;">
    <a href="">Blog</a>
    <div class="boxcontent">
        <p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life. </p>
    </div>
</div>
<div class="bg5" style="background-position:-270px -180px;top:190px;left:285px;"></div>

<div class="bg5" style="background-position:0 -270px;top:285px;left:0px;"></div>
<div class="bg5" style="background-position:-90px -270px;top:285px;left:95px;"></div>
<div class="bg5" style="background-position:-180px -270px;top:285px;left:190px;"></div>
<div class="boxlink bg4" style="top:285px;left:285px;">
    <a href="">Contact</a>
    <div class="boxcontent">
       <p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life. </p>
    </div>
</div>
</div>

Step2. 创建CSS

.littleBoxes{
width: 380px;
margin: 0 auto 380px auto;
position: relative;
}
.littleBoxes div{
width: 90px;
position: absolute;
text-align: center;
border: 2px solid white;
overflow: hidden;
background-color: #f7f7f7;
-moz-box-shadow: 0px 0px 3px #555;
-webkit-box-shadow: 0px 0px 3px #555;
box-shadow: 0px 0px 3px #555;
background-position: center center;
z-index: 999;
}
.littleBoxes div a{
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
letter-spacing: -1px;
display: block;
line-height: 90px;
text-decoration: none;
color: #fff;
background: #91EF4A;
outline: none;
text-shadow: 1px 1px 1px #888;
-moz-box-shadow: 1px 1px 3px #777;
-webkit-box-shadow: 1px 1px 3px #777;
box-shadow: 1px 1px 3px #777;
}
.littleBoxes div.boxcontent{
width: 334px;
text-align:left;
padding: 10px;
font-size: 14px;
background-color: #f0f0f0;
border: 2px solid #fff;
margin: 10px auto 0 auto;
text-shadow: 1px 1px 1px #fff;
-moz-box-shadow: 1px 1px 3px #777;
-webkit-box-shadow: 1px 1px 3px #777;
box-shadow: 1px 1px 3px #777;
opacity: 0.8;
display: none;
position: relative;
overflow: hidden;
}
.littleBoxes div.boxcontent p {
color: #333;
line-height: 1.5em;
}
.bg1, .bg2, .bg3, .bg4{
background-repeat:no-repeat;
}
.bg1{
background-image:url(../images/1.jpg);
}
.bg2{
background-image:url(../images/2.jpg);
}
.bg3{
background-image:url(../images/3.jpg);
}
.bg4{
background-image:url(../images/4.jpg);
}
.bg5{
height: 90px;
background-image:url(../images/5.jpg);
}

Step3. 插入jQuery和脚本包

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

脚本:

$(function() {
/* object to save the initial positions of each box */ 对象的初始位置
var divinfo = {"initial": []};
/* index of the selected / clicked box */ 选择的对象
var current = -1;

/* we save the index,top and left of each one of the boxes */ 上面和左边的每一个Box元素
$('#littleBoxes > div').each(function(){
var $this = $(this);
var initial = {
		'index' : $this.index(),
		'top'     : $this.css('top'),
		'left'     : $this.css('left')
};
divinfo.initial.push(initial);
});

/* clcik event for the anchors inside of the boxes */ 点击Box元素事件
$('#littleBoxes a').bind('click',function(e){
var $this         = $(this);
var $currentBox    = $this.parent();
/* set a z-index lower than all the other boxes,
to see the other boxes animation on the top*/ 设置一个Box元素的 z-index 值低于其他任何一个元素
$currentBox.css('z-index','1');

/* if we are clicking on a expanded box : */ 当我们点击一个展开的Box元素
if(current == $currentBox.index()){
	/* put it back (decrease width,height, and set the top and left like it was before).
	the previous positions are saved in the divinfo obj*/ 重置Box元素
	$currentBox.stop().animate({
			'top'         : divinfo.initial[$currentBox.index()].top,
			'left'        : divinfo.initial[$currentBox.index()].left,
			'width'     : '90px',
			'height'    : '90px'
	},800,'easeOutBack').find('.boxcontent').fadeOut();

	$('#littleBoxes > div').not($currentBox).each(function(){
		var $ele         = $(this);
		var elemTop     = divinfo.initial[$ele.index()].top;
		var elemLeft     = divinfo.initial[$ele.index()].left;
		$ele.stop().show().animate({
			'top'         : elemTop,
			'left'        : elemLeft,
			'opacity'    : 1
		},800);
	});
	current = -1;
}
/* if we are clicking on a small box : */ 如果我们点击一个小的Box元素
else{
	/* randomly animate all the other boxes.
	Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450.
	This range is considering the initial lefts/tops of the elements. It's not the exact right
	range, since we would have to calculate the range based on each one of the boxes. Anyway, it
	fits our needs...
	*/ 随机动画函数,取一个-150到450之间的随机数值
	$('#littleBoxes > div').not($currentBox).each(function(){
		var $ele = $(this);
		$ele.stop().animate({
			'top' : (Math.floor(Math.random()*601) - 150)  'px',
			'left': (Math.floor(Math.random()*601) - 150)  'px',
			'opacity':0
		},800,function(){
			$(this).hide();
		});
	});

	/* expand the clicked one. Also, fadeIn the content (boxcontent)
	if you want it to fill the space of the littleBoxes container,
	then these are the right values */ 点击扩大效果之一,淡入效果
	var newwidth     = 379;
	var newheight     = 379;
	$currentBox.stop().animate({
		'top'     : '0px',
		'left'    : '0px',
		'width' : newwidth  'px',
		'height': newheight 'px'
	},800,'easeOutBack',function(){
		current = $currentBox.index();
		$(this).find('.boxcontent').fadeIn();
	});

}
e.preventDefault();
});
});
目前还没有评论



TOP