Wxxslt's blog
专注于SEO技术、网站建设、趣味数学题、日语学习，致力于成为人们学习的优秀博客平台。
« Previous Entries
Next Entries »
2009/07/27
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 src="js/jquery.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> <!-- $(document).ready(function(){ $('#nav li').hover(function(){ $(this).children('ul').css({'display':'block'}); $(this).focus().css({'background':'url(imgs/nav-bg.gif) repeat-x 0 -52px'}); },function(){ $(this).children('ul').css({'display':'none'}); $(this).focus().css({'background':'none'}); }); $('input[type=text]').focus(function(){ $(this).blur(); }); }); --> </script> <style type="text/css"> <!-- * { padding:0; margin:0; } ul { list-style:none; } a { text-decoration:none; color:#000000; } body { font:12px Georgia, "Times New Roman", Times, serif; } #nav { height:26px; background:url(imgs/nav-bg.gif) repeat-x; margin-top:100px; margin-bottom:100px; padding-left:20px; } #nav li { float:left; position:relative; } #nav li a { display:block; padding:0 20px; float:left; height:26px; line-height:26px; } #nav li a:hover { background:url(imgs/nav-bg.gif) repeat-x left -26px; } #nav li a.arrow { background:url(imgs/arrow.gif) no-repeat right center; } #nav li a.arrow:hover { background:url(imgs/arrow.gif) no-repeat 190px center; } #nav li ul { position:absolute; width:200px; background:url(imgs/bg.png); border:1px solid black; display:none; } #nav li ul a { width:160px; } .secondary-menu { left:0; top:26px; } .third-menu { left:200px; top:-1px; } --> </style> </head> <body> <ul id="nav"> <li><a href="#">金庸</a> <ul class="secondary-menu"> <li><a href="#" class="arrow">小说</a> <ul class="third-menu"> <li><a href="#">《笑傲江湖》</a></li> <li><a href="#">《神雕侠侣》</a></li> <li><a href="#">《鹿鼎记》</a></li> <li><a href="#">《雪山飞狐》</a></li> <li><a href="#">《射雕英雄传》</a></li> </ul> </li> <li><a href="#">简介</a></li> </ul> </li> <li><a href="#">古龙</a> <ul class="secondary-menu"> <li><a href="#" class="arrow">小说</a> <ul class="third-menu"> <li><a href="#">《边城浪子》</a></li> <li><a href="#">《浣花洗剑录》</a></li> <li><a href="#">《剑气严霜》</a></li> <li><a href="#">《三少爷的剑》</a></li> <li><a href="#">《大旗英雄传》</a></li> </ul> </li> <li><a href="#">简介</a></li> </ul> </li> <li><a href="#">张爱玲</a> <ul class="secondary-menu"> <li><a href="#" class="arrow">小说</a> <ul class="third-menu"> <li><a href="#">《倾城之恋》</a></li> <li><a href="#">《心经》</a></li> <li><a href="#">《创世纪》</a></li> <li><a href="#">《半生缘》</a></li> <li><a href="#">《金锁记》</a></li> </ul> </li> <li><a href="#">简介</a></li> </ul> </li> <li><a href="#">余秋雨</a> <ul class="secondary-menu"> <li><a href="#" class="arrow">散文</a> <ul class="third-menu"> <li><a href="#">《借我一生》</a></li> <li><a href="#">《霜冷长河》</a></li> <li><a href="#">《千年一叹》</a></li> <li><a href="#">《行者无疆》</a></li> <li><a href="#">《文化苦旅》</a></li> </ul> </li> <li><a href="#">简介</a></li> </ul> </li> </ul> <input name="name" type="text" /> </body> </html>
提示：您可以先修改部分代码再运行
Tags:
jquery
,
三级导航
,
菜单
2009/07/27 16:15,
wxxslt
,
网站建设
»
JS
,
评论(0)
,
阅读(1876)
可编辑表格（JQ实现）
样式表命名规范
发表评论
表情
1
2
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称
密码
游客无需密码
网址
电邮
[注册]
« Previous Entries
Next Entries »
Navigation
首页
RSS
登入
注册
标签
留言
边栏
链接
归档
分类
SEO技术
[3]
网站建设
[59]
相关资料
[12]
Web标准
[7]
JS
[16]
C#.NET
[8]
PHP+MYSQL
[12]
C/C++
[4]
日语
[4]
趣味数学题
[4]
文学作品
[13]
杂七杂八
[10]
风云
[3]
纵观天下
[4]
心情日志
[96]
日历
<
2012
>
<
2
>
日
一
二
三
四
五
六
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
搜索
日志标题
日志全文
评论引用
所有留言
最新日志
SEO文章排版工具
网站日志分析
关键词密度算法
阿基米德原理
九宫格延伸
链接
自己链接
友情链接
Zend Studio
其他
登入
注册
申请链接
RSS：
日志
|
评论
编码：UTF-8
XHTML 1.0
Theme by Marshal. Powered by
Bo-Blog 2.1.1 Release
2009/07/27 16:15, 
可编辑表格（JQ实现）
样式表命名规范
