今天跟大家分享一下如何通過HTML的結構化方式實現無限級導航菜單列表的功能！首先讓大家看一下兩個實例演示——
這里詳細分析的并非JS的源碼部分（封裝好的JS源碼是從國外網站摘錄下來的），而是前臺直接調用的關鍵部分，主要有三點——
1、直接調用的JS函數
ddlevelsmenu.setup(導航菜單ID, 列表方式);
顯然易見，我們要預先給導航菜單設定一個ID，這里沒固定是DIV還是UL等其它HTML標簽。而“列表方式”的參數值有兩個——topbar：豎式列表顯示，sidebar：橫式列表顯示。
2、HTML的結構
這里包含的結構主要有主菜單（導航）、下級菜單兩種HTML結構和rel標簽屬性。
（1）其中主菜單的結構是用基本的UL、LI（li里面有超鏈接內容）結構，形如：
<ul id=’NavBar’>
<li><a href=’#’ rel=’Menu1’></li>
<li><a href=’#’ rel=’Menu2’></li>
<li><a href=’#’ rel=’Menu3’></li>
<li><a href=’#’ rel=’Menu4’></li>
……
</ul>
其中，rel的屬性值在這相當于id的作用——沒有rel表示沒有下級菜單，否則表示有；而其值跟下級菜單的id是一一對應的。比如：rel=’Menu1’表示對象id=’Menu1’是它的下級菜單內容，如此類推。
（2）下級菜單結構同樣由ul、li來組成，不同的是沒有了rel屬性。如果想繼續增加下級菜單，在該菜單的后面（li標簽外）再添加一個ul、li的基本機構……就類似這樣，一層一層地往下無限添加下級菜單……
3、CSS樣式設置
至于菜單的樣式問題，其實跟上述的JS和HTML布局是完全無關的，設計者可以跟平常一樣任意設定。
從以上分析可知，無論是豎式還是橫式的菜單列表，它們的HTML結構是完全一樣的，只要設定主函數的屬性值即可靈活實現。另外，該實例中式包含了分級菜單的指示圖標。這個是可以改變的，具體可以打開ddlevelsfiles/ddlevelsmenu.js文件，找到arrowpointers的設置，里面包含了圖片的相對位置和長寬大�。ㄈ绻L寬設置為0可視為不使用圖標方式）。有興趣的朋友可以根據自個需要進行調整。
最后把完整的實例源碼打包跟大家分享一下。
/UpFile/201404/2014041683228113.rar 
