今天的教程中，我們將創建一個完整的頁面列表，該菜單具有兩個良好的特性:當在菜單項上方停留時，我們將移動一個適用于當前項的寬度的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。移動到正確的位置，并從描述項中滑出。

這是它!我們希望你喜歡它并且覺得它很有用！