資源描述：
《動(dòng)態(tài)下拉列表與可讀性思考》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、一、俗耐的開(kāi)篇語(yǔ)關(guān)于下拉菜單的可用性問(wèn)題，我之前一直都是忽略的，可以說(shuō)是不知道，常常僅僅止步于眼前的效果上。前段時(shí)間看到了Roger的”AccessingNavDrop-Downs“一文，就是講了下下拉菜單的可用性問(wèn)題。同時(shí)，巧的是，最近在看淘寶UED翻譯的《ppk談JavaScript》一書(shū)，其多次提到了可訪問(wèn)性的問(wèn)題，尤其在p28~p37對(duì)JavaScript及其一些可用性問(wèn)題發(fā)表了自己的看法。其中主要的觀點(diǎn)和注意事項(xiàng)與Roger的文章是一致的。這些閱讀的經(jīng)歷讓我意識(shí)到自己長(zhǎng)時(shí)間忽略下拉菜單的可訪
2、問(wèn)性，于是開(kāi)始結(jié)合實(shí)際情況，思考自己以后需要注意和提高的地方。這讓我對(duì)下拉菜單實(shí)現(xiàn)方式選擇、標(biāo)簽的使用等有了更加明確的認(rèn)識(shí)。不太成熟的思考，僅用于交流。再具體講述下拉菜單的可訪問(wèn)性之前，先簡(jiǎn)單說(shuō)說(shuō)下拉菜單以及下拉菜單的實(shí)現(xiàn)吧。二、關(guān)于下拉菜單及其實(shí)現(xiàn)百度百科對(duì)“下拉菜單”一詞的解釋是：以條形菜單欄和菜單欄中每個(gè)菜單項(xiàng)的彈出菜單窗口兩部分組成，一般作為應(yīng)用系統(tǒng)的主菜單使用。不過(guò)這段話就像《盜夢(mèng)空間》一樣，讓人很難懂。通俗點(diǎn)講，就是“經(jīng)過(guò)/會(huì)點(diǎn)擊就會(huì)顯示列表的菜單”就叫做下拉菜單。在web上非常之常見(jiàn)，例
3、如~~我隨便打開(kāi)個(gè)頁(yè)面，啊，就像是我瀏覽器現(xiàn)在顯示的百科的頁(yè)面的右上角：或是隔壁的微博頁(yè)面，啊，果然，看左上角的廣場(chǎng)下拉：恩恩，看來(lái)下拉菜單就像是男人一樣，滿地都是。就不一一舉例了，關(guān)于下拉菜單的實(shí)現(xiàn)，那方法可就多了，class切換，屬性綁定，js定位等，不同的頁(yè)面，不同的設(shè)計(jì)，不同的架構(gòu)，就有不同的實(shí)現(xiàn)方法。由于每個(gè)項(xiàng)目，每個(gè)頁(yè)面的情況都不一樣，所以，不能輕易的下結(jié)論，你是大熊貓，是國(guó)寶，它是小野貓，是雜草。但是，就可用性而言，不同的方法優(yōu)劣還是有標(biāo)準(zhǔn)來(lái)評(píng)判的，這個(gè)在后面會(huì)自然而然的展示?，F(xiàn)在，舉個(gè)
4、切換class實(shí)現(xiàn)下拉效果的簡(jiǎn)單例子，實(shí)例菜單原型來(lái)自Mtime時(shí)光網(wǎng)，//zxx:Mtime創(chuàng)始人在新浪微博上很活躍，你有興趣可以follow他，@馬日拉，你有沒(méi)有覺(jué)得這個(gè)名字很有遐想的空間呢？，截圖如下：此導(dǎo)航下拉的每個(gè)下拉內(nèi)容都已經(jīng)通過(guò)CSS定位好了，但是，考慮到加載的原因，其下拉內(nèi)容默認(rèn)是未裝載的。也就是說(shuō)，是鼠標(biāo)移至導(dǎo)航內(nèi)容上，才動(dòng)態(tài)load下拉div并嵌入導(dǎo)航li標(biāo)簽內(nèi)的，如下圖所示：當(dāng)然，作為靜態(tài)demo頁(yè)面，沒(méi)有必要?jiǎng)討B(tài)load下拉內(nèi)容，所以，demo頁(yè)面的下拉div默認(rèn)就是隱藏且裝載
5、好的，于是，我們就可以通過(guò)簡(jiǎn)單的class切換實(shí)現(xiàn)下拉效果。首先是HTML結(jié)構(gòu)，見(jiàn)下圖：核心CSS代碼如下：.i_n_l{display:none;}.showtime_hover.i_n_l,.quiz_hover.i_n_l,.home_hover.i_n_l,.movie_hover.i_n_l,.tv_hover.i_n_l,.person_hover.i_n_l,.blog_hover.i_n_l,.group_hover.i_n_l{display:block;}可見(jiàn)，我們只要讓li標(biāo)簽的
6、class，例如“我的時(shí)光”所在li標(biāo)簽，由”home”變成”home_hover”就可以控制下拉菜單的顯示與隱藏了，很簡(jiǎn)單吧，所以，相應(yīng)的js代表就會(huì)類(lèi)似于下面：然后，效果就如下圖所示，截自IE6瀏覽器：人用戶所有的電腦操作都依賴于讀屏軟件和鍵盤(pán)來(lái)完成。這三位用戶現(xiàn)在使用的都是永德讀屏軟件，它安裝后即在后臺(tái)運(yùn)行，把普通的操作系統(tǒng)變成了帶語(yǔ)音的操作系統(tǒng)。盲人朋友依靠tab鍵，方向鍵和部分快捷鍵來(lái)調(diào)整目前光標(biāo)的所在位置，而每按一次鍵盤(pán)，或屏幕上出現(xiàn)新的內(nèi)容，或可操作界面
