Chinaunix首页 | 论坛 | 博客
  • 博客访问: 265605
  • 博文数量: 99
  • 博客积分: 3010
  • 博客等级: 中校
  • 技术积分: 1270
  • 用 户 组: 普通用户
  • 注册时间: 2009-03-20 13:27
文章分类

全部博文(99)

文章存档

2011年(1)

2010年(21)

2009年(77)

我的朋友

分类: Java

2009-08-29 15:23:37

一个简单清爽的导航条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>当行条</title>
<script src="js/jquery-1.3.2.js"></script>
<script>
   var obj = null ;
   function checkHover(){
     if(obj){
     obj.find("ul").fadeOut('fast');
     }
   }
   $(document).ready(function(){
     $(".mainList>li").hover(function(){
     if(obj){
         obj.find("ul").fadeOut('fast');
             obj=null;
         }
         $(this).find("ul").fadeIn('fast');
     },function(){
     obj=$(this);
         setTimeout("checkHover()",400);
     });
    
   });

</script>

<style>
.mainList{ width:200px; list-style:none; border:2px solid #006633}
.mainList li{ width:150px; margin:1px; background-color:#CCFF66;}
.secondList{ width:100px; list-style:none; background-color:#CC6633; margin:1px; display:none}
</style>
</head>

<body>
  <ul class="mainList">
    <li>
     test1
     <ul class="secondList">
     <li>test_1</li>
         <li>test_2</li>
     </ul>
    </li>
    <li>
     test1
     <ul class="secondList">
     <li>test_1</li>
         <li>test_2</li>
     </ul>
    </li>
    <li>
     test1
     <ul class="secondList">
     <li>test_1</li>
         <li>test_2</li>
     </ul>
    </li>
    <li>
     test1
     <ul class="secondList">
     <li>test_1</li>
         <li>test_2</li>
     </ul>
    </li>
    <li>
     test1
     <ul class="secondList">
     <li>test_1</li>
         <li>test_2</li>
     </ul>
    </li>
  </ul>

</body>
</html>

阅读(710) | 评论(0) | 转发(1) |
0

上一篇:Flex和Java-配置

下一篇:渐隐半透明效果

给主人留下些什么吧!~~