动态下拉列表与可读性思考

《动态下拉列表与可读性思考》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、一、俗耐的开篇语关于下拉菜单的可用性问题，我之前一直都是忽略的，可以说是不知道，常常仅仅止步于眼前的效果上。前段时间看到了Roger的”AccessingNavDrop-Downs“一文，就是讲了下下拉菜单的可用性问题。同时，巧的是，最近在看淘宝UED翻译的《ppk谈JavaScript》一书，其多次提到了可访问性的问题，尤其在p28~p37对JavaScript及其一些可用性问题发表了自己的看法。其中主要的观点和注意事项与Roger的文章是一致的。这些阅读的经历让我意识到自己长时间忽略下拉菜单的可访

2、问性，于是开始结合实际情况，思考自己以后需要注意和提高的地方。这让我对下拉菜单实现方式选择、标签的使用等有了更加明确的认识。不太成熟的思考，仅用于交流。再具体讲述下拉菜单的可访问性之前，先简单说说下拉菜单以及下拉菜单的实现吧。二、关于下拉菜单及其实现百度百科对“下拉菜单”一词的解释是：以条形菜单栏和菜单栏中每个菜单项的弹出菜单窗口两部分组成，一般作为应用系统的主菜单使用。不过这段话就像《盗梦空间》一样，让人很难懂。通俗点讲，就是“经过/会点击就会显示列表的菜单”就叫做下拉菜单。在web上非常之常见，例

3、如~~我随便打开个页面，啊，就像是我浏览器现在显示的百科的页面的右上角：或是隔壁的微博页面，啊，果然，看左上角的广场下拉：恩恩，看来下拉菜单就像是男人一样，满地都是。就不一一举例了，关于下拉菜单的实现，那方法可就多了，class切换，属性绑定，js定位等，不同的页面，不同的设计，不同的架构，就有不同的实现方法。由于每个项目，每个页面的情况都不一样，所以，不能轻易的下结论，你是大熊猫，是国宝，它是小野猫，是杂草。但是，就可用性而言，不同的方法优劣还是有标准来评判的，这个在后面会自然而然的展示。现在，举个

4、切换class实现下拉效果的简单例子，实例菜单原型来自Mtime时光网，//zxx:Mtime创始人在新浪微博上很活跃，你有兴趣可以follow他，@马日拉，你有没有觉得这个名字很有遐想的空间呢？，截图如下：此导航下拉的每个下拉内容都已经通过CSS定位好了，但是，考虑到加载的原因，其下拉内容默认是未装载的。也就是说，是鼠标移至导航内容上，才动态load下拉div并嵌入导航li标签内的，如下图所示：当然，作为静态demo页面，没有必要动态load下拉内容，所以，demo页面的下拉div默认就是隐藏且装载

5、好的，于是，我们就可以通过简单的class切换实现下拉效果。首先是HTML结构，见下图：核心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;}可见，我们只要让li标签的

6、class，例如“我的时光”所在li标签，由”home”变成”home_hover”就可以控制下拉菜单的显示与隐藏了，很简单吧，所以，相应的js代表就会类似于下面：然后，效果就如下图所示，截自IE6浏览器：人用户所有的电脑操作都依赖于读屏软件和键盘来完成。这三位用户现在使用的都是永德读屏软件，它安装后即在后台运行，把普通的操作系统变成了带语音的操作系统。盲人朋友依靠tab键，方向键和部分快捷键来调整目前光标的所在位置，而每按一次键盘，或屏幕上出现新的内容，或可操作界面