知之为知之，不知Google知！
6 10月 2011
jQuery版
<!DOCTYPE html PUBLIC "-//W3C//liD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/liD/xhtml1-transitional.lid"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3d导航-jQuery导航效果</title> <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible"/> <style> <!-- /* reset */ body,html{color:#444;margin:0; font-size:12px; line-height:24px; padding:0; margin:0;} div,form,img,ul,ol,li,dl,dt,dd {margin:0;padding:0;border:0;} input,select,h2,object{margin:0;padding:0;} ul,li{list-style-type:none} a{text-decoration:none;color:#2C2C2C} a:hover{text-decoration:underline;color:#F60;} /*** -------------------------------------------------------------- ****/ #hdw {background:#c00;height: 50px;margin-top: 50px;} #hd { margin: 0 auto; position: relative;width: 960px;z-index: 2;} .menu { display: block;height: 45px;padding-top: 3px;} .menu li {float: left;line-height: 45px;overflow: hidden; position: relative; text-align: center;} .menu li a {cursor: pointer;display: block;font-family: "微软雅黑";font-size: 14px;font-weight: bold; height: 45px;letter-spacing: 1px;position: relative; text-decoration: none;text-transform: uppercase;width: 80px;} .nenu li a:hover{ text-decoration: none;} .menu li a span {left: 0; position: absolute; width: 80px;height: 45px;} .menu li a .over, .menu li a .bg { background-color: #333;top: -45px;} .dangqian {background-color:#333;color:#FFF;} /*** example1 -------------------------------------------------------------- ****/ #menu li a {color: #000;} #menu .dangqian a { color: #fff;} #menu li a .over {color: #FFF;background-color: #333;} /*** example2 -------------------------------------------------------------- ****/ #menu2 li a {color: #fff;} #menu2 .dangqian a { color: #fff;} #menu2 li a .over {color: #CCC;background-color: #333;} --> </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script language="javascript"> /*ASdht.js*/ jQuery(document).ready(function () { /* 1st example */ /// wrap inner content of each anchor with first layer and append background layer jQuery("#menu li a").wrapInner('<span class="out"></span>').append('<span class="bg"></span>'); // loop each anchor and add copy of text content jQuery("#menu li a").each(function () { jQuery('<span class="over">' + $(this).text() + '</span>').appendTo(this); }); jQuery("#menu li a").hover(function () { // this function is fired when the mouse is moved over jQuery(".out", this).stop().animate({ 'top': '45px' }, 250); // move down - hide jQuery(".over", this).stop().animate({ 'top': '0px' }, 250); // move down - show jQuery(".bg", this).stop().animate({ 'top': '0px' }, 120); // move down - show }, function () { // this function is fired when the mouse is moved off jQuery(".out", this).stop().animate({ 'top': '0px' }, 250); // move up - show jQuery(".over", this).stop().animate({ 'top': '-45px' }, 250); // move up - hide jQuery(".bg", this).stop().animate({ 'top': '-45px' }, 120); // move up - hide }); /* 2nd example */ jQuery("#menu2 li a").wrapInner('<span class="out"></span>'); jQuery("#menu2 li a").each(function () { jQuery('<span class="over">' + $(this).text() + '</span>').appendTo(this); }); jQuery("#menu2 li a").hover(function () { jQuery(".out", this).stop().animate({ 'top': '45px' }, 200); // move down - hide jQuery(".over", this).stop().animate({ 'top': '0px' }, 200); // move down - show }, function () { jQuery(".out", this).stop().animate({ 'top': '0px' }, 200); // move up - show jQuery(".over", this).stop().animate({ 'top': '-45px' }, 200); // move up - hide }); }); </script> </head> <body> <div id="hdw"> <div id="hd"> <div id="menu2" class="menu"> <ul> <li class="dangqian"><a href="http://www.ahuing.com/">今日团购</a></li> <li><a href="http://www.ahuing.com/">往期团购</a></li> <li><a href="http://www.ahuing.com/">热销商品</a></li> <li><a href="http://www.ahuing.com/">品牌商户</a></li> <li><a href="http://www.ahuing.com/">团购达人</a></li> <li><a href="http://www.ahuing.com/">讨论区</a></li> <li><a href="http://www.ahuing.com/">购物车</a></li> </ul> </div> </div> </div> </body> </html>
提示：你可以先修改部分代码再运行。
原生JS版
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>3d导航-用原生JS实现jQuery导航效果</title> <style> body { margin:0; background:#66FF99; } ul { padding-left:0; margin:0; } li { list-style:none; } #nav { height:40px; background:#900; margin-top:50px; } #nav ul { width:800px; height:40px; margin:0 auto; } #nav li { float:left; height:40px; } #nav a { float:left; position:relative; height:40px; overflow:hidden; font-size:14px; color:#e0e03a; text-decoration:none; cursor:pointer; } #nav strong { float:left; } #nav span { float:left; padding:0 20px; height:40px; line-height:40px; background:#900; clear:both; } #nav .active,#nav .current span { background:#600; color:#fff; } #nav .current .active { color:#e0e03a; } </style> <script> window.onload=function() { var oDiv=document.getElementById('nav'); var aStrong=oDiv.getElementsByTagName('strong'); var aA=oDiv.getElementsByTagName('a'); var iTarget=oDiv.getElementsByTagName('li')[0].offsetHeight; for(var i=0; i<aStrong.length; i++) { aA[i].style.width=aStrong[i].style.width=aStrong[i].getElementsByTagName('span')[0].offsetWidth+'px'; aStrong[i].style.position='absolute'; aStrong[i].style.top=aStrong[i].style.left=0; aStrong[i].onmouseover=function() { startMove(this, -iTarget); }; aStrong[i].onmouseout=function() { startMove(this, 0); }; } }; function startMove(obj,target) { clearInterval(obj.iTime); obj.iTime=setInterval(function(){ if(obj.offsetTop==target) { clearInterval(obj.iTime); } else { var iSpeed=(target-obj.offsetTop)/4; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); obj.style.top=obj.offsetTop+iSpeed+'px'; } }, 30); } </script> </head> <body> <div id="nav"> <ul> <li class="current"> <a href="http://www.miaov.com"> <strong> <span>首页</span> <span class="active">首页</span> </strong> </a> </li> <li> <a href="http://www.miaov.com/course.html.php"> <strong> <span>前端开发课程</span> <span class="active">前端开发课程</span> </strong> </a> </li> <li> <a href="http://bbs.miaov.com/viewthread.php?tid=952&extra=page%3D1"> <strong> <span>妙味视频教程</span> <span class="active">妙味视频教程</span> </strong> </a> </li> <li> <a href="http://bbs.miaov.com/viewthread.php?tid=994&extra=page%3D1"> <strong> <span>周末班上课安排</span> <span class="active">周末班上课安排</span> </strong> </a> </li> <li> <a href="http://bbs.miaov.com/viewthread.php?tid=775&extra=page%3D1"> <strong> <span>结课标准</span> <span class="active">结课标准</span> </strong> </a> </li> <li> <a href="http://www.miaov.com/contact.html.php"> <strong> <span>联系妙味</span> <span class="active">联系妙味</span> </strong> </a> </li> </ul> </div> </body> </html>
