教程网3月28日整理
苹果风格的导航是比较炫酷的，用YUI3模仿这种导航风格。当鼠标移至菜单上，图标上移至顶部，然后滑动至展示区；鼠标移出时，图标移至导航下方，滑动至菜单后隐藏。效果如下：
直接上代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html lang="zh">
<head>
<title>YUI仿苹果风格图标滑出导航菜单 - Tutorial - 不名一格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="idd.chiang@gmail.com" />
<meta name="description" content="Demo for YUI仿苹果导航菜单" />
<meta name="keywords" content="css,js,YUI,apple-style, apple, apple-like, beautiful, tutorial, menu, navigation, icons" />
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" type="text/css" href="">
</head>
<body class="yui-skin-sam">
<div id="doc" class="demo">
<div id="hd">
<div class="page-title">
<h1>Apple-Style Slide Out Navigation Menu by YUI</h1>
</div>
</div>
<div id="bd">
<h2>Tutorial:YUI仿苹果风格图标滑出导航菜单</h2>
<p>IE7、FF3.5、safari、opera、chrome下测试通过，IE8无环境未测。</p>
<p><br/></p>
<!-- {{ Content -->
<div class="navigation">
<ul class="menu fl" id="menu">
<li><span class="game"><br/></span><a href="#" class="first">Game</a></li>
<li><span class="water"><br/></span><a href="#">Water</a></li>
<li><span class="code"><br/></span><a href="#">Coding</a></li>
<li><span class="tools"><br/></span><a href="#">ToolsBox</a></li>
<li><span class="curve"><br/></span><a href="#">Curve</a></li>
<li><span class="options"><br/></span><a href="#" class="last">Options</a></li>
</ul>
</div>
<!-- }} Content -->
</div>
<div id="ft">
<p>Copyright © 2010 <a href="" title="microidc">不名一格</a></p>
<p>Please send bug reports to idd.chiang[At]gmail.com</p>
</div>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
<!--
YUI({
//Combo JS
combine:true,
base:'http://cn.yimg.com/i/yui/3.0.0/build/',
root:"i/yui/3.0.0/build/",
comboBase:"?",
charset:'utf-8',
loadOptional:true
}).use('node','anim',function(Y) {
var _menu = Y.one('#menu'),
_li = _menu.queryAll('li'),
_a = _menu.queryAll('li a'),
_span = _menu.queryAll('li span');
//初始化
_menu.setStyle('zIndex','2');
_a.setStyle('zIndex','1');
_span.setStyle('zIndex','-1');
_span.each(function(node){
var anim = new Y.Anim({
node:node,
from:{
top:'10'
},
to:{
top:'-23'
},
easing: Y.Easing.backIn
});
anim.run();
});
//鼠标移上效果
/* @Y.delegate 事件委派
* EventHandle delegate ( type , fn , el , spec , context , args* )
* el <string|node> 委派元素
* spec <string> 匹配目标事件的选择器
*/
Y.delegate('mouseover', function(e){
var _span = this.one('span'),
_a = this.one('a');
_a.addClass('hover');
_span.setStyle('zIndex','1');
var anim = new Y.Anim({
node:_span,
to:{
top:45
},
duration: 0.3
});
anim.run();
}, '#menu', 'li');
Y.delegate('mouseout', function(e){
var _span = this.one('span'),
_a = this.one('a');
_a.removeClass('hover');
_span.setStyle('zIndex','-1');
var anim = new Y.Anim({
node:_span,
to:{
top:-23
},
duration: 0.3,
easing: Y.Easing.backIn
});
anim.run();
}, '#menu', 'li');
});
//-->
</script>
</div>
</body>
</html>
Javascript教程
相关文章
精彩导读
热门资讯
关注我们
