用jQuery和CSS3做的超棒的立体菜单

在今天的教程中，我们将创建一个完整的页面列表，该菜单具有两个良好的特性:当在菜单项上方停留时，我们将移动一个适用于当前项的宽度的hover状态项，并且我们将从页面的左侧滑动出一个描述条，到达当前菜单项。

我们将使用jQuery实现该风格的效果和一些CSS3属性。我们不打算使用任何图像。

那么，让我们开始吧!

标记

HTML结构将包含一个无序列表，它表示我们的菜单和一个用于描述元素的div:

<div id="slidingMenuDesc" class="slidingMenuDesc">
<div><span>Description for "About"</span></div>
...
</div>
<ul id="slidingMenu" class="slidingMenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Get a quote</a></li>
</ul>

我们省略了“家”的描述，因为没有什么可描述的。当我们在其他项目上悬停时，滑动的div应该出现。

CSS

首先，我们将对菜单及其导航项目进行样式化，然后我们将对这些描述元素进行样式化。

让我们重新设置一些样式:

body, ul, li, h1, h2, span{
	margin:0;
	padding:0;
}
ul{
	list-style:none;
}

背景是暗灰色的:

body{	background:#292929;}

菜单上的东西的列表会完全放在屏幕的右边:

.slidingMenu {
	position: absolute;
	height:410px;
	width: 410px;
	top:40px;
	overflow:hidden;
	right:1px;
	font-family: Arial, Helvetica, sans-serif;
}

菜单项用于右浮动:

.slidingMenu li {	display:block;	float:right;	clear:both;	position:relative;	overflow:hidden;}

" mover "元素的位置是绝对的，我们会将它动态地放置在顶部和宽度上:

.slidingMenu li.move {	width: 9px;	height: 68px;	right:0px;	padding-right:10px;	margin-top:2px;	z-index: 8;	position: absolute;	background: #2183c4;	background:
-webkit-gradient(
linear,
left top,
left bottom,			from(#0771b8),			to(#2183c4)
);	background:
-moz-linear-gradient(
top,			#0771b8,			#2183c4
);	-moz-border-radius: 8px 0px 0px 8px;	-webkit-border-top-left-radius: 8px;	-webkit-border-bottom-left-radius: 8px;	border-top-left-radius: 8px;	border-bottom-left-radius: 8px;	-moz-box-shadow:1px 1px 5px #000;	-webkit-box-shadow:1px 1px 5px #000;	box-shadow:1px 1px 5px #000;	}

我们将以非常微妙的背景梯度和一些盒式阴影来提供这种移动的悬停元素。

链接元素的样式如下:

.slidingMenu li a {	font-size:66px;	text-transform:uppercase;	text-decoration: none;	color: #ddd;	outline: none;	text-indent:5px;	z-index: 10;	display: block;	float: right;	height: 66px;	line-height: 66px;	position: relative;	overflow: hidden;	padding-right:10px;}

这些描述将在一个相对定位的容器中。我们将margin-top设置为相同的值的顶部菜单列表:

/* Descriptions */
.slidingMenuDesc{
	margin-top:40px;
	position:relative;
}

内部具有描述跨度的div将具有与移动器相同的背地梯度以及相同的盒式阴影。圆形的边界将会在相反的角落:

.slidingMenuDesc div{background: #2183c4;background:-webkit-gradient(linear,left top,left bottom,from(#0771b8),to(#2183c4));background:-moz-linear-gradient(top,#0771b8,#2183c4);height: 68px;padding-right:5px;left:-5px;width:0px;margin-top:2px;overflow:hidden;position:absolute;-moz-box-shadow:1px 1px 5px #000;-webkit-box-shadow:1px 1px 5px #000;box-shadow:1px 1px 5px #000;-moz-border-radius: 0px 8px 8px 0px;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}	

我们需要将这些元素设置为绝对的，因为我们将把顶部调整为当前列表元素，我们将在这里悬停。

描述张成的空间也将是绝对的。这不是必需的,但它给你更多的选择如果你想申请其他动画效果:

.slidingMenuDesc div span {
	font-size:36px;
	color: #f0f0f0;
	text-indent:5px;
	z-index: 10;
	display: block;
	height: 66px;
	line-height: 66px;
	position:absolute;
	right:10px;
	margin-left:5px;
	top:-3px;
}

现在，让我们来看一下JavaScript !

JavaScript

首先，我们将把下列脚本添加到我们的HTML头部:

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

我们将添加以下脚本:

$(function() {
Cufon.replace('a, span').CSS.ready(function() {		var $menu 		= $("#slidingMenu");		/**
* the first item in the menu,
* which is selected by default
*/
var $selected	= $menu.find('li:first');		/**
* this is the absolute element,
* that is going to move across the menu items
* It has the width of the selected item
* and the top is the distance from the item to the top
*/
var $moving		= $('<li />',{
className	: 'move',
top			: $selected[0].offsetTop + 'px',
width		: $selected[0].offsetWidth + 'px'
});		/**
* each sliding div (descriptions) will have the same top
* as the corresponding item in the menu
*/
$('#slidingMenuDesc > div').each(function(i){			var $this = $(this);
$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
});		/**
* append the absolute div to the menu;
* when we mouse out from the menu
* the absolute div moves to the top (like initially);
* when hovering the items of the menu, we move it to its position
*/
$menu.bind('mouseleave',function(){
moveTo($selected,400);
})
.append($moving)
.find('li')
.not('.move')
.bind('mouseenter',function(){ var $this = $(this); var offsetLeft = $this.offset().left - 20; //slide in the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');				//move the absolute div to this item
moveTo($this,400);
})
.bind('mouseleave',function(){				var $this = $(this);				var offsetLeft = $this.offset().left - 20;				//slide out the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
});;		/**
* moves the absolute div,
* with a certain speed,
* to the position of $elem
*/
function moveTo($elem,speed){
$moving.stop(true).animate({
top		: $elem[0].offsetTop + 'px',
width	: $elem[0].offsetWidth + 'px'
}, speed, 'easeOutExpo');
}
}) ;
});

在我们将字体(所有的“a”元素和所有“span”元素)化之后，主函数就会被执行。我们在默认情况下选择了第一项，那就是我们的“Home”。当我们悬停在菜单项上时，我们将移动li。移动到正确的位置，并从描述项中滑出。

这是它!我们希望你喜欢它并且觉得它很有用！