jquery 实现斜导航效果

更新时间：2009年05月27日 01:35:36 作者：

jquery 实现斜导航效果代码，就一个图片文件，利用css控制位置，非常不错。

运行后刷新一下，才可以，也可以保存本地直接运行也可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery导航菜单</title> <style type="text/css"> #menu1 { width:970px;height:45px;} #menu1,#menu1 a , #menu1 a span{ background-image:url(http://img.jb51.net/demo/images/daohao.gif);} #menu1 a{ display:block;float:left;height:45px;} #menu1 a span{ float:right;width:33px; height:45px; background-position:-970px 0;} #menu1 a span.sj{ background-position:-1003px 0;} #menu1 a.a1{ width:168px; background-position:0 0;} #menu1 a.a2{ width:117px; background-position:-168px 0;} #menu1 a.a3{ width:113px; background-position:-285px 0;} #menu1 a.a4{ width:114px; background-position:-398px 0;} #menu1 a.a5{ width:111px; background-position:-512px 0;} #menu1 a.a6{ width:114px; background-position:-623px 0;} #menu1 a.a7{ width:113px; background-position:-737px 0;} #menu1 a.a8{ width:120px; background-position:-850px 0;} #menu1 a.nowa1{ background-position:0 45px;} #menu1 a.nowa2{ background-position:-168px 45px;} #menu1 a.nowa3{ background-position:-285px 45px;} #menu1 a.nowa4{ background-position:-398px 45px;} #menu1 a.nowa5{ background-position:-512px 45px;} #menu1 a.nowa6{ background-position:-623px 45px;} #menu1 a.nowa7{ background-position:-737px 45px;} #menu1 a.nowa8{ background-position:-850px 45px;} </style> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></"></script> <script type="text/javascript"> function menu(nowa)//nowa 默认是哪个 0 1 2 3 4 5 6 7 {     $(function(){         $("#menu1 a:not(:last)").append('<span></span>');         $("#menu1 a").each(function(i){             $(this).addClass("a"+(i+1));             if(i!=nowa){                 $(this).hover(function(){                     $(this).addClass("nowa"+(i+1))                         .prev("a").find("span").addClass("sj");                 },function(){                     $(this).removeClass("nowa"+(i+1))                         .prev("a").find("span").removeClass("sj");                 });             }         });         $("#menu1 a:eq("+nowa+")").addClass("nowa"+(nowa+1))             .prev("a").find("span").addClass("sj");     }); } menu(0); </script> </head> <body>         <div id="menu1">             <a href="#"></a>             <a href="#"></a>             <a href="#"></a>             <a href="#"></a>             <a href="#"></a>             <a href="#"></a>             <a href="#"></a>             <a href="#"></a>         </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

js右键菜单效果代码
js右键菜单效果代码...
2007-07-07
msn上的tab功能Firefox对childNodes处理的一个BUG
今天公司用到一个tab功能发现 msn上的不错，但是在firefox兼容不好，msn他们的方法就是用了不少的div包含，不过网上有高人解决了。
2008-01-01
又一个漂亮的导航栏的下拉菜单
这篇文章主要介绍了又一个漂亮的导航栏的下拉菜单,需要的朋友可以参考下
2007-06-06
实用的多级树形展开菜单效果代码
实用的多级树形展开菜单，相信它支持的级别会让您满意，开始我还以为它是无限级的呢？希望这个菜单对大家有帮助哦。
2010-10-10
纯CSS实现的竖向导航菜单
纯CSS实战竖向导航菜单，这也算是一个典型的CSS菜单啦，这里要用到两个背景图片，在鼠标动作时分别加载不同的背景图片，以达到反差给人的清新效果，其实这种菜单的制作是很简单的，代码量不大，作为初级者的教程还是很不错的。
2010-03-03
yahoo首页伸缩效果代码
js伸缩效果代码
2008-05-05
jquery 实现斜导航效果
jquery 实现斜导航效果代码，就一个图片文件，利用css控制位置，非常不错。
2009-05-05
js无限级折叠菜单精简版
一个简单的js无限级折叠菜单，这里只列出JS版本的，JQUERY版本的可以到作者发的帖子上看，权当抛砖引玉了。
2011-03-03
鼠标触发移动的分层菜单层菜单moveMenu
会移动的菜单，层菜单，鼠标放在菜单上，菜单就会移动，上浮的菜单，像是TAB风格的菜单，使用了一张图片，顺着代码可下载到这张修饰的小图片,需要的朋友可以参考下
2012-12-12
JavaScript多级下拉菜单代码(简单实用)
JavaScript下拉菜单实现代码，js与css的良好结合。喜欢的朋友可以测试下。
2010-06-06

jquery 实现斜导航效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具