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