|
菜單高亮效果是每個(gè)網(wǎng)頁(yè)經(jīng)常采用的設(shè)計(jì)方式，它能有效地讓用戶知道自己當(dāng)前所在的欄目。這也是我經(jīng)常采用的方式，一般的網(wǎng)頁(yè)至少都有兩級(jí)菜單，第一個(gè)是頂部的總導(dǎo)航條菜單，另一個(gè)是左側(cè)的分類導(dǎo)航菜單。一般要求在一級(jí)菜單高亮下二級(jí)菜單也能記錄當(dāng)前狀態(tài)。
對(duì)于一個(gè)包含頂部菜單的頁(yè)頭區(qū)域如果固定不變的，也就是它不用每次都重新加載，這種情況下用純CSS或JS方式可以很容易地實(shí)現(xiàn)，但今天我要談的不是這種，今天說(shuō)的是一級(jí)菜單和二級(jí)菜單在每個(gè)頁(yè)面中都是動(dòng)態(tài)加載的，也就是它們是作為用戶控件的方式載入的。這種情況下要想記錄菜單的高亮狀態(tài)是一件比較困難的事情。
當(dāng)然，你可能會(huì)說(shuō)，用cookie可以記錄每個(gè)頁(yè)面加載時(shí)上次記錄的高亮狀態(tài)，是的，它確實(shí)可以記錄，但是這種方式在一些復(fù)雜的包含許多子頁(yè)面的應(yīng)用中，會(huì)給用戶造成許多困擾和麻煩。比如在cookie生存周期內(nèi)，重新打開這個(gè)項(xiàng)目時(shí)，此時(shí)cookie的生存周期還沒有完全結(jié)束，它還記錄著上次保存的狀態(tài)，而這時(shí)頁(yè)面地址已經(jīng)發(fā)生了變化，那么當(dāng)前高亮的菜單所指向的就不是用戶所希望看到的頁(yè)面。實(shí)踐證明，這個(gè)cookie的生存周期無(wú)論你設(shè)置多長(zhǎng)都不能完美解決用戶惡意刷新頁(yè)面的狀況。這確實(shí)是一件糟糕的事情！
那么有沒有一種較好的辦法來(lái)解決這種狀況呢？
答案是有的。我們知道要解決這個(gè)問題，最理想的辦法是在每個(gè)頁(yè)面加載時(shí)，根據(jù)頁(yè)面的url地址顯式地設(shè)置當(dāng)前菜單的高亮樣式。這能完美地解決此類問題，并且這種方式無(wú)論用戶如何惡意點(diǎn)擊刷新按鈕，高亮狀態(tài)依舊保持不變。 知道了原理，要實(shí)現(xiàn)起來(lái)就容易多了。
結(jié)構(gòu)層
一級(jí)菜單結(jié)構(gòu)層：
<ul id="menu">
<li><a href="default.html">首頁(yè)</a></li>
<li><a href="clothing.html">服裝用品</a></li>
<li><a href="house.html">家居用品</a></li>
<li><a href="cosmetic.html">化妝用品</a></li>
</ul>
可以看到在這個(gè)一級(jí)菜單中，其鏈接地址一般是沒有參數(shù)值的。 二級(jí)菜單的結(jié)構(gòu)層：
<ul id="othermenu">
<li><a href="house.html?pId=2&sId=1">日常用品</a></li>
<li><a href="house.html?pId=2&sId=2">小型家具</a></li>
<li><a href="house.html?pId=2&sId=3">電器配件</a></li>
<li><a href="house.html?pId=2&sId=4">床品套件</a></li>
<li><a href="house.html?pId=2&sId=5">婚慶床品</a></li>
<li><a href="house.html?pId=2&sId=6">兒童床品</a></li>
<li><a href="house.html?pId=2&sId=7">工藝擺設(shè)</a></li>
<li><a href="house.html?pId=2&sId=8">清潔工具</a></li>
<li><a href="house.html?pId=2&sId=9">家居清潔</a></li>
</ul>
與一級(jí)菜單不同的是，我們將二級(jí)菜單中的鏈接地址加入兩個(gè)參數(shù)值，pId參數(shù)指向的是頂部一級(jí)菜單的的序號(hào)，而sId則是菜單自己的順序號(hào)。我們將這兩個(gè)菜單的總?cè)萜鱱l都設(shè)置了兩個(gè)不同中的ID，它們需要在JS中調(diào)用，所以千萬(wàn)不能少。
樣式層
關(guān)于樣式，其實(shí)都沒有什么特別的地方，你可以隨心所意地設(shè)置成你想要的樣式，只是需要注意的地方是，我們需要單獨(dú)設(shè)置菜單高亮的三種狀態(tài)樣式，以供JS動(dòng)態(tài)調(diào)用。
/*一級(jí)菜單的三種樣式設(shè)置*/
#menu li a.normal{background:#fff;}//普通樣式
#menu li a.over{background:#00ff00;} //翻滾樣式
#menu li a.cur{background:#ff0000;color:#fff;} //高亮樣式
/*二級(jí)菜單的三種樣式設(shè)置*/
#othermenu li a.normal{background:#fff;} //普通樣式
#othermenu li a.over{background:#AA7F00;color:#fff;} //翻滾樣式
#othermenu li a.cur{background:#7F0000;color:#fff;} //高亮樣式
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 不用Cookie的仿刷新二級(jí)高亮菜單 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 不用Cookie的仿刷新二級(jí)高亮菜單 [1]
第 2 頁(yè) 
