您的位置：首页 > 产品设计 > UI/UE

用YUI Animation 和css实现超酷导航菜单

2008-08-31 21:28 471 查看

切换菜单项的时候，菜单项背景色具有淡入淡出的效果。
截图不能反映淡入淡出效果，建议运行代码试一下。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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,HEnT Studio,LAMP,PHP,MySQL" />
    <meta name="DEscription" content="HEnT Studio" />
    <meta name="Author" content="Leo,HEnT Studio" />
    <title>New Page | xHTML1.0 Transitional</title>
    <link rel="shortcut icon" 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;
      }
      .nav li{
      float:left;
      padding:0;
      width:15%;
      display:inline;
      text-align:center;
      border-right:1px solid #fff;
      cursor:pointer;
      }
      .nav .home{
      float:left;
      margin-left:1%;
      border-left:1px solid #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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： animation yui css function stylesheet xhtml

相关文章推荐

新的分享

章节导航