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/
<html xmlns="http://www.w3.org/1999/
文章正文
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | <!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>jquery树形导航菜单插件制作滑动多级二级下拉菜单展示 www.phpstudy.net</title> <meta name= "description" content= "jquery树形导航菜单插件制作一个类似树形展示的slider滑动多级二级下拉菜单目录,支持无限嵌套。jquery插件,jquery下载。" /> <script type= "text/javascript" src= "http://phpstudy.net/keleyi/pmedia/jquery-1.8.2.min.js" ></script> <script type= "text/javascript" src= "http://phpstudy.net/keleyi/phtml/jtree/jquery.tree.js" ></script> <script type= "text/javascript" > $( function () { $( '#files' ).tree({ expanded: 'li:first' }); }); </script><style type= "text/css" > *{margin:0;padding:0;list-style-type:none;font-size:12px;} a,img{border:0;} #files{margin:100px auto;width:400px;} .tree,.tree ul,.tree li{list-style:none;margin:0;padding:0;zoom: 1;} .tree ul{margin-left:8px;} .tree li a{color:#555;padding:.1em 7px .1em 27px;display:block;text-decoration:none;border:1px dashed #fff;background:url(file.gif) 5px 50% no-repeat;} .tree li a.tree-parent{background:url(http: //phpstudy.net/keleyi/phtml/jtree/icon-folder-open.gif) 5px 50% no-repeat;} .tree li a.tree-parent-collapsed{background:url(http: //phpstudy.net/keleyi/phtml/jtree/icon-folder.gif) 5px 50% no-repeat;} .tree li a:hover,.tree li a.tree-parent:hover,.tree li a:focus,.tree li a.tree-parent:focus,.tree li a.tree-item-active{color:#000;border:1px solid#eee;background-color:#fafafa;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;} .tree li a:focus,.tree li a.tree-parent:focus,.tree li a.tree-item-active{border:1px solid #e2f3fb;background-color:#f2fafd;} .tree ul.tree-group-collapsed{display:none;} </style> </head> <body> <div > <ul id= "files" class = "tree" > <li><a href= "javascript:void(0);" >jquery 特效</a> <ul class = "tree" > <li><a href= "javascript:void(0);" >jquery图片特效</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery图片切换" >jquery图片切换</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery幻灯片" >jquery幻灯片</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery图片滚动" >jquery图片滚动</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery图片放大镜" >jquery图片放大镜</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery广告" >jquery广告</a></li> </ul> </li> <li><a href= "javascript:void(0);" >jquery导航菜单</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery动画菜单" >jquery动画菜单</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery树形菜单" >jquery树形菜单</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery下拉菜单" >jquery下拉菜单</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery右键菜单" >jquery右键菜单</a></li> </ul> </li> <li><a href= "javascript:void(0);" >jquery选项卡特效</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery选项卡切换" >jquery选项卡切换</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery滑动选项卡" >jquery滑动选项卡</a></li> </ul> </li> <li><a href= "javascript:void(0);" >jquery文字特效</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery文字滚动" >jquery文字滚动</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery文字闪烁" >jquery文字闪烁</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery文字切换" >jquery文字切换</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery文字数量" >jquery文字数量</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery文字改变" >jquery文字改变</a></li> </ul> </li> <li><a href= "javascript:void(0);" >jquery表单特效</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery表单验证" >jquery表单验证</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery表单美化" >jquery表单美化</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery搜索提示" >jquery搜索提示</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery搜索提示" >jquery搜索提示</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery全选反选" >jquery全选反选</a></li> </ul> </li> <li><a href= "javascript:void(0);" >jquery表格特效</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery图表插件" >jquery图表插件</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery表格排序" >jquery表格排序</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery表格排序" >jquery表格排序</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "jquery表格变色" >jquery表格变色</a></li> </ul> </li> </ul> </li> <li><a href= "javascript:void(0);" >js特效</a> <ul class = "tree" > <li><a href= "javascript:void(0);" >js图片特效</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "js图片切换" >js图片切换</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js幻灯片" >js幻灯片</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js图片滚动" >js图片滚动</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js图片放大镜" >js图片放大镜</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js广告" >js广告</a></li> </ul> </li> <li><a href= "javascript:void(0);" >js导航菜单</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "js动画菜单" >js动画菜单</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js树形菜单" >js树形菜单</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js下拉菜单" >js下拉菜单</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js右键菜单" >js右键菜单</a></li> </ul> </li> <li><a href= "javascript:void(0);" >js选项卡特效</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "js选项卡切换" >js选项卡切换</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js滑动选项卡" >js滑动选项卡</a></li> </ul> </li> <li><a href= "javascript:void(0);" >js文字特效</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "js文字滚动" >js文字滚动</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js文字闪烁" >js文字闪烁</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js文字切换" >js文字切换</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js文字数量" >js文字数量</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js文字改变" >js文字改变</a></li> </ul> </li> <li><a href= "javascript:void(0);" >js表单特效</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "js表单验证" >js表单验证</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js表单美化" >js表单美化</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js搜索提示" >js搜索提示</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js搜索提示" >js搜索提示</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js全选反选" >js全选反选</a></li> </ul> </li> <li><a href= "javascript:void(0);" >js表格特效</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "js图表插件" >js图表插件</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js表格排序" >js表格排序</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "js表格排序" >js表格排序</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "phpstudy.net" >柯乐义</a></li> </ul> </li> </ul> </li> <li><a href= "javascript:void(0);" >flash特效</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "flash图片特效" >flash图片特效</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "flash导航菜单" >flash导航菜单</a></li> </ul> </li> <li><a href= "javascript:void(0);" >div+css教程</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "div+css布局" >div+css布局</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "www.phpstudy.net" >柯乐义</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "css3教程" >css3教程</a></li> </ul> </li> <li><a href= "javascript:void(0);" >html5教程</a> <ul class = "tree" > <li><a href= "http://phpstudy.net/" target= "_blank" title= "柯乐义" >www.phpstudy.net</a></li> <li><a href= "http://phpstudy.net/" target= "_blank" title= "html5图表" >html5图表</a></li> </ul> </li> </ul></div> </body> </html> |
以上这篇jquery树形菜单效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持phpstudy。
代码注释