切换菜单项的时候,菜单项背景色具有淡入淡出的效果。
截图不能反映淡入淡出效果,建议运行代码试一下。
-
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
-
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
xml:lang
=
"zh"
lang
=
"zh"
dir
=
"ltr"
>
-
<
head
profile
=
"http://www.w3.org/2000/08/w3c-synd/#"
>
-
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html;charset=utf-8"
/>
-
<
meta
name
=
"keywords"
content
=
"Leo,HEnTStudio,LAMP,PHP,MySQL"
/>
-
<
meta
name
=
"DEscription"
content
=
"HEnTStudio"
/>
-
<
meta
name
=
"Author"
content
=
"Leo,HEnTStudio"
/>
-
<
title
>
NewPage|xHTML1.0Transitional
</
title
>
-
<
link
rel
=
"shortcuticon"
href
=
"favicon.ico"
/>
-
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css"
/>
-
<
script
type
=
"text/javascript"
src
=
"http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"
>
</
script
>
-
<
script
type
=
"text/javascript"
src
=
"http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"
>
</
script
>
-
<
script
type
=
"text/javascript"
>
-
var
Event
=
YAHOO
.util.Event;
-
var
Dom
=
YAHOO
.util.Dom;
-
Event.onDOMReady(function(){
-
var
lis
=
Dom
.get('nav').getElementsByTagName('li');
-
var
selected
=
null
;
-
for(var
i
=
0
;i
<
lis.length
;i++){
-
Event.addListener(lis[i],'mouseover',
-
function(){
-
if(selected!=this){
-
var
anim
=
new
YAHOO.util.ColorAnim(this,{backgroundColor:{to:'#d49346'}},0.5);
-
anim.animate();
-
}
-
});
-
Event.addListener(lis[i],'mouseout',
-
function(){
-
if(selected!=this){
-
var
anim
=
new
YAHOO.util.ColorAnim(this,{backgroundColor:{to:'#89a4b1'}},0.5);
-
anim.animate();
-
}
-
});
-
Event.addListener(lis[i],'click',
-
function(){
-
if(selected&&selected!=this){
-
var
anim0
=
new
YAHOO.util.ColorAnim(selected,{backgroundColor:{to:'#89a4b1'}},0.5);
-
anim0.animate();
-
}
-
selected
=
this
;
-
this.style.backgroundColor
=
'#ff9900'
;
-
});
-
}
-
-
-
});
-
</
script
>
-
<
style
type
=
"text/css"
>
-
.nav{
-
list-style-type:none;
-
width:100%;
-
font-size:2em;
-
color:#fff;
-
background:#89a4b1;
-
margin:0;
-
padding:0;
-
height:50px;
-
line-height:50px;
-
}
-
.navli{
-
float:left;
-
padding:0;
-
width:15%;
-
display:inline;
-
text-align:center;
-
border-right:1pxsolid#fff;
-
cursor:pointer;
-
}
-
.nav.home{
-
float:left;
-
margin-left:1%;
-
border-left:1pxsolid#fff;
-
}
-
</
style
>
-
</
head
>
-
<
body
>
-
<
ul
class
=
"nav"
id
=
"nav"
>
-
<
li
class
=
"home"
>
Home
</
li
>
-
<
li
class
=
"about"
>
About
</
li
>
-
<
li
>
Services
</
li
>
-
<
li
>
Contact
</
li
>
-
</
ul
>
-
-
</
body
>
-
</
html
>
分享到:
相关推荐
一些基本代码和相关介绍。。内部有yui css 基本代码。。
maven打包使用yui压缩css和js文件
一款很好的打包工具,已经写成直接可用的命令脚本。
YUI JS CSS 打包工具,经过测试没有问题,打包后性能明显提高。
js,css压缩文件实例,还可以合并js哦
用yuicompressor-2.4.7压缩你的JS和CSS 最近做了一个项目,使用了Ext框架,项目做好了,结果客户一试用,打开一个页面要6秒,这个页面是用户经常要用的,要频繁打开的,这样用户就受不了了,怎么办?怎么办?怎么...
使用YUICompressor和DOS批处理脚本压缩JavaScript和CSS整理.pdf
NULL 博文链接:https://chenhailong.iteye.com/blog/1124206
YUI Compressor压缩JS和Css工具,可对js以及css进行压缩、合并、打包,并包含详细工具使用配置说明,如果你一个web前端开发工程师你值得拥有!
yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件 [[Flattr this git repo] ( http://api.flattr.com/button/flattr-badge-large.png)]...
NULL 博文链接:https://ynp.iteye.com/blog/1296569
本文实例为大家分享了layui实现三级导航菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=...
JSCSS压缩工具 YUI Compressor
Yahoo的基于java的javascript/css压缩程序
::设置你的JS和CSS根目录,脚本会自动按树层次查找和压缩所有的JS和CSS SET JSFOLDER=D:\1 echo 正在查找 JavaScript, CSS ... chdir /d %JSFOLDER% for /r . %%a in (*.js *.css) do ( @echo 正在压缩 %%~a .....
基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip 基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip 基于java的开发源码-JSCSS压缩工具 YUI Compressor.zip 基于java的开发源码-JSCSS压缩工具 YUI ...
yui compressor js 、css 压缩大全,使用方法,可以在我的博客里找。
使用脚本+yuicompressor对js,css文件打包.pdf
使用YUI2.8 仿照JQuery UI 的select插件写的一个函数 详情见我的博客http://hi.baidu.com/hjzheng
IDEA(pycharm,phpstorm)添加外部插件-yuicompressor压缩js/css