網(wǎng)站導(dǎo)航

z-blogPHP實(shí)現(xiàn)子分類下拉、多級導(dǎo)航

相關(guān)多級導(dǎo)航文章：

有的時候需要設(shè)置多級導(dǎo)航，但是系統(tǒng)并不支持，在index.php中{module:navbar}，表示顯示所有子分類；
所以就需改動一些地方使其支持多級分類；以系統(tǒng)自帶模板WhitePage為例；
第一步：首先在后臺的導(dǎo)航欄設(shè)置三級嵌套

<div id="divNavBar">
<ul>
  <li>一級</li>
  <li>二級
    <ul>
          <li>二級</li>
          <li>二級
            <ul>
                  <li>三級</li>
                  <li>三級</li>
                </ul>
          </li>
        </ul>
  </li>
</ul>
</div>

第二步：這時你會發(fā)現(xiàn)然并卵開始第二步
在style文件下的css文件加上代碼
#divNavBar ul li {float:left; margin:0 10px; font-size:1.25em; line-height:40px; position:relative; transition:all 0.4s ease 0s;}
一級導(dǎo)航，float：left意思是橫向排列，position：relative；意思是設(shè)置定位點(diǎn)
#divNavBar ul li ul {position:absolute; left:-1px; top:40px; background:#fff; border:1px solid #eee; border-radius:0 0 3px 3px; width:100%; padding:5px 0; display:none; z-index:2;}
二級導(dǎo)航 position:absolute;意思是相對于relative來定位，display：none；默認(rèn)不顯示
#divNavBar ul li ul li {font-size:0.75em; margin:0; float:none;text-align:center; line-height:2em;}
二級導(dǎo)航float：none意思是豎排
#divNavBar ul li ul li ul{position:absolute;z-index: 4;left:100%;top:-5px}

三級導(dǎo)航 position：absolute；同上
其中top：；left；可以自己調(diào)節(jié)位置
第三步：到了這個時候你會發(fā)現(xiàn)怎么點(diǎn)導(dǎo)航都出不來；因?yàn)橹霸O(shè)置了display：none；

在模板代碼之后加入JS：

$(document).ready(function(){
      $('ul li').hover(function(){                
                $(this).children('ul').show();
        },function(){
                $(this).find('ul').hide();
        });
})

好了，大功告成

此案例的完整代碼（使用中酌情修改）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>z-blogPHP實(shí)現(xiàn)子分類下拉、多級導(dǎo)航</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
#divNavBar ul, #divNavBar li {
 list-style: none;
}
#divNavBar ul li {
 float: left;
 margin: 0 10px;
 font-size: 1.25em;
 line-height: 40px;
 position: relative;
 transition: all 0.4s ease 0s;
}
#divNavBar ul li ul {
 position: absolute;
 left: -1px;
 top: 40px;
 background: #fff;
 border: 1px solid #eee;
 border-radius: 0 0 3px 3px;
 width: 100%;
 padding: 5px 0;
 display: none;
 z-index: 2;
}
#divNavBar ul li ul li {
 font-size: 0.75em;
 margin: 0;
 float: none;
 text-align: center;
 line-height: 2em;
}
#divNavBar ul li ul li ul {
 position: absolute;
 z-index: 4;
 left: 100%;
 top: -5px
}
</style>
<body>
<div id="divNavBar">
  <ul>
    <li>一級</li>
    <li>一級
      <ul>
        <li>二級</li>
        <li>二級
          <ul>
            <li>三級</li>
            <li>三級</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
<script>
$(document).ready(function(){
  $('ul li').hover(function(){                
                $(this).children('ul').show();
        },function(){
                $(this).find('ul').hide();
        });
});
 </script>
</body>
</html>