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