返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

jquery树形菜单效果的简单实例

2020-05-27 18:13:51易采站长站整理


<!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.jb51.net</title>
<meta name="description" content="jquery树形导航菜单插件制作一个类似树形展示的slider滑动多级二级下拉菜单目录，支持无限嵌套。jquery插件,jquery下载。" />
<script type="text/javascript" src="http://jb51.net/keleyi/pmedia/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://jb51.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://huoche.7234.cn/images/jb51/youuxlnv0hk.gif) 5px 50% no-repeat;}
.tree li a.tree-parent-collapsed{background:url(http://huoche.7234.cn/images/jb51/4d2dwy0naxg.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://jb51.net/" target="_blank" title="jquery图片切换">jquery图片切换</a></li>
<li><a href="http://jb51.net/" target="_blank" title="jquery幻灯片">jquery幻灯片</a></li>
<li><a href="http://jb51.net/" target="_blank" title="jquery图片滚动">jquery图片滚动</a></li>
<li><a href="http://jb51.net/" target="_blank" title="jquery图片放大镜">jquery图片放大镜</a></li>
<li><a href="http://jb51.net/" target="_blank" title="jquery广告">jquery广告</a></li>
相关文章 大家在看