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