jquery打造绚丽的导航菜单

前几天见到一个网站的导航菜单效果很华丽，回来自己就想着用jquery也写一个。于是就在今天开始动手写了，效果出来了只是我没有使用图片而是简单的背景，你要是想更漂亮你可以把背景颜色改成漂亮的图片。是什么效果呢？下面我就把例子给大家。其中实现的方法我就不说了因为代码中什么都有，你可以参看。

<!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=utf-8" /> <title>绚丽的导航效果</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#nav li").wrapInner('<span class="content"></span>').append('<span class="bg"></span>'); $("#nav li span.content").hover(function(){ $(this).next('span').animate({left:"0px"},800); },function(){ $(this).next('span').animate({left:"-198px"},800); }); }) </script> <style type="text/css"> *{ padding:0px; margin:0px;} #nav{ width:200px; height:200px; margin:0 auto; text-align:center; font-size:1.3em;} ul,li{ list-style:none;} li{ width:200px; height:40px; background-color:#99CC00; line-height:40px; border-bottom:1px #fff solid; position:relative; overflow:hidden; float:left;} li span.content{ position:absolute; left:0px; top:0px; display:block; z-index:10; height:40px; width:200px;} li span.bg{ position:absolute; left:-198px; top:0px; width:200px; background-color:red; height:40px; z-index:1;} </style> </head> <body> <ul id="nav"> <li>jquery教程</li> <li>css教程</li> <li>seo教程</li> <li>fireworks教程</li> <li>ps教程</li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

标签: jquery打造绚丽的导航菜单, jquery教程

发表于 jquery

0 comments 0 people listening

Comment help
Get Livefyre

Sort: Newest | Oldest

jquery打造绚丽的导航菜单

站内搜索

热门文章

页面

最新评论

好站推荐

工具

常逛

标签

存档

功能