DIV CSS 佈局教程網

jquery樹形菜單
編輯:JQuery常見問題     
以下是樹形菜單效果, 也可以點擊這裡查看效果
  • jquery 特效
    • jquery圖片特效
      • jquery圖片切換
      • jquery幻燈片
      • jquery圖片滾動
      • jquery圖片放大鏡
      • jquery廣告
    • jquery導航菜單
      • jquery動畫菜單
      • jquery樹形菜單
      • jquery下拉菜單
      • jquery右鍵菜單
    • jquery選項卡特效
      • jquery選項卡切換
      • jquery滑動選項卡
    • jquery文字特效
      • jquery文字滾動
      • jquery文字閃爍
      • jquery文字切換
      • jquery文字數量
      • jquery文字改變
    • jquery表單特效
      • jquery表單驗證
      • jquery表單美化
      • jquery搜索提示
      • jquery搜索提示
      • jquery全選反選
    • jquery表格特效
      • jquery圖表插件
      • jquery表格排序
      • jquery表格排序
      • jquery表格變色
  • js特效
    • js圖片特效
      • js圖片切換
      • js幻燈片
      • js圖片滾動
      • js圖片放大鏡
      • js廣告
    • js導航菜單
      • js動畫菜單
      • js樹形菜單
      • js下拉菜單
      • js右鍵菜單
    • js選項卡特效
      • js選項卡切換
      • js滑動選項卡
    • js文字特效
      • js文字滾動
      • js文字閃爍
      • js文字切換
      • js文字數量
      • js文字改變
    • js表單特效
      • js表單驗證
      • js表單美化
      • js搜索提示
      • js搜索提示
      • js全選反選
    • js表格特效
      • js圖表插件
      • js表格排序
      • js表格排序
  • flash特效
    • flash圖片特效
    • flash導航菜單
  • div+css教程
    • div+css布局
    • css3教程
  • html5教程
    • www.
    • html5圖表


另外推薦一個:http:///a/bjac/3n8d6g5f.htm

下面是完整代碼,適用於在多種浏覽器,例如IE,Chrome,火狐等:

<!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.</title>
<meta name="description" content="jquery樹形導航菜單插件制作一個類似樹形展示的slider滑動多級二級下拉菜單目錄,支持無限嵌套。jquery插件,jquery下載。" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http:///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:///keleyi/phtml/jtree/icon-folder-open.gif) 5px 50% no-repeat;}
.tree li a.tree-parent-collapsed{background:url(http:///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:///" target="_blank" title="jquery圖片切換">jquery圖片切換</a></li>
<li><a href="http:///" target="_blank" title="jquery幻燈片">jquery幻燈片</a></li>
<li><a href="http:///" target="_blank" title="jquery圖片滾動">jquery圖片滾動</a></li>
<li><a href="http:///" target="_blank" title="jquery圖片放大鏡">jquery圖片放大鏡</a></li>
<li><a href="http:///" target="_blank" title="jquery廣告">jquery廣告</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">jquery導航菜單</a>
<ul class="tree">
<li><a href="http:///" target="_blank" title="jquery動畫菜單">jquery動畫菜單</a></li>
<li><a href="http:///" target="_blank" title="jquery樹形菜單">jquery樹形菜單</a></li>
<li><a href="http:///" target="_blank" title="jquery下拉菜單">jquery下拉菜單</a></li>
<li><a href="http:///" target="_blank" title="jquery右鍵菜單">jquery右鍵菜單</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">jquery選項卡特效</a>
<ul class="tree">
<li><a href="http:///" target="_blank" title="jquery選項卡切換">jquery選項卡切換</a></li>
<li><a href="http:///" target="_blank" title="jquery滑動選項卡">jquery滑動選項卡</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">jquery文字特效</a>
<ul class="tree">
<li><a href="http:///" target="_blank" title="jquery文字滾動">jquery文字滾動</a></li>
<li><a href="http:///" target="_blank" title="jquery文字閃爍">jquery文字閃爍</a></li>
<li><a href="http:///" target="_blank" title="jquery文字切換">jquery文字切換</a></li>
<li><a href="http:///" target="_blank" title="jquery文字數量">jquery文字數量</a></li>
<li><a href="http:///" target="_blank" title="jquery文字改變">jquery文字改變</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">jquery表單特效</a>
<ul class="tree">
<li><a href="http:///" target="_blank" title="jquery表單驗證">jquery表單驗證</a></li>
<li><a href="http:///" target="_blank" title="jquery表單美化">jquery表單美化</a></li>
<li><a href="http:///" target="_blank" title="jquery搜索提示">jquery搜索提示</a></li>
<li><a href="http:///" target="_blank" title="jquery搜索提示">jquery搜索提示</a></li>
<li><a href="http:///" target="_blank" title="jquery全選反選">jquery全選反選</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">jquery表格特效</a>
<ul class="tree">
<li><a href="http:///" target="_blank" title="jquery圖表插件">jquery圖表插件</a></li>
<li><a href="http:///" target="_blank" title="jquery表格排序">jquery表格排序</a></li>
<li><a href="http:///" target="_blank" title="jquery表格排序">jquery表格排序</a></li>
<li><a href="http:///" 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:///" target="_blank" title="js圖片切換">js圖片切換</a></li>
<li><a href="http:///" target="_blank" title="js幻燈片">js幻燈片</a></li>
<li><a href="http:///" target="_blank" title="js圖片滾動">js圖片滾動</a></li>
<li><a href="http:///" target="_blank" title="js圖片放大鏡">js圖片放大鏡</a></li>
<li><a href="http:///" target="_blank" title="js廣告">js廣告</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">js導航菜單</a>
<ul class="tree">
<li><a href="http:///" target="_blank" title="js動畫菜單">js動畫菜單</a></li>
<li><a href="http:///" target="_blank" title="js樹形菜單">js樹形菜單</a></li>
<li><a href="http:///" target="_blank" title="js下拉菜單">js下拉菜單</a></li>
<li><a href="http:///" target="_blank" title="js右鍵菜單">js右鍵菜單</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">js選項卡特效</a>
<ul class="tree">
<li><a href="http:///" target="_blank" title="js選項卡切換">js選項卡切換</a></li>
<li><a href="http:///" target="_blank" title="js滑動選項卡">js滑動選項卡</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">js文字特效</a>
<ul class="tree">
<li><a href="http:///" target="_blank" title="js文字滾動">js文字滾動</a></li>
<li><a href="http:///" target="_blank" title="js文字閃爍">js文字閃爍</a></li>
<li><a href="http:///" target="_blank" title="js文字切換">js文字切換</a></li>
<li><a href="http:///" target="_blank" title="js文字數量">js文字數量</a></li>
<li><a href="http:///" target="_blank" title="js文字改變">js文字改變</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">js表單特效</a>
<ul class="tree">
<li><a href="http:///" target="_blank" title="js表單驗證">js表單驗證</a></li>
<li><a href="http:///" target="_blank" title="js表單美化">js表單美化</a></li>
<li><a href="http:///" target="_blank" title="js搜索提示">js搜索提示</a></li>
<li><a href="http:///" target="_blank" title="js搜索提示">js搜索提示</a></li>
<li><a href="http:///" target="_blank" title="js全選反選">js全選反選</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">js表格特效</a>
<ul class="tree">
<li><a href="http:///" target="_blank" title="js圖表插件">js圖表插件</a></li>
<li><a href="http:///" target="_blank" title="js表格排序">js表格排序</a></li>
<li><a href="http:///" target="_blank" title="js表格排序">js表格排序</a></li>
<li><a href="http:///" target="_blank" title=""></a></li>
</ul>
</li>
</ul>
</li>

<li><a href="javascript:void(0);">flash特效</a>
<ul class="tree">
<li><a href="http:///" target="_blank" title="flash圖片特效">flash圖片特效</a></li>
<li><a href="http:///" 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:///" target="_blank" title="div+css布局">div+css布局</a></li>
<li><a href="http:///" target="_blank" title="www."></a></li>
<li><a href="http:///" target="_blank" title="css3教程">css3教程</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">html5教程</a>
<ul class="tree">
<li><a href="http:///" target="_blank" title="">www.</a></li>
<li><a href="http:///" target="_blank" title="html5圖表">html5圖表</a></li>
</ul>
</li>
</ul></div>

</body>
</html>



樹形彈出菜單參考:http:///a/bjac/uk9m33s4.htm
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved