您现在的位置:主页 > 图像设计 > 设计技巧 >

新2备用网址hg622.com|首页吧:js下拉菜单实现与可访问性的思考

来源:新2备用网址hg622.com|首页吧 责任编辑:Jzq8 发表时间:2011-02-16 点击:次

一、俗耐的开篇语

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

这些阅读的经历让我意识到自己长时间忽略下拉菜单的可访问性,于是开始结合实际情况,思考自己以后需要注意和提高的地方。这让我对下拉菜单实现方式选择、标签的使用等有了更加明确的认识。不太成熟的思考,仅用于交流。再具体讲述下拉菜单的可访问性之前,先简单说说下拉菜单以及下拉菜单的实现吧。

二、关于下拉菜单及其实现

对“下拉菜单”一词的解释是:以条形菜单栏和菜单栏中每个菜单项的弹出菜单窗口两部分组成,一般作为应用系统的主菜单使用。

不过这段话就像《盗梦空间》一样,让人很难懂。通俗点讲,就是“经过/会点击就会显示列表的菜单”就叫做下拉菜单。在web上非常之常见,例如~~我随便打开个页面,啊,就像是我浏览器现在显示的百科的页面的右上角:

或是隔壁的微博页面,啊,果然,看左上角的广场下拉:

恩恩,看来下拉菜单就像是男人一样,满地都是。就不一一举例了,关于下拉菜单的实现,那方法可就多了,class切换,属性绑定,js定位等,不同的页面,不同的设计,不同的架构,就有不同的实现方法。由于每个项目,每个页面的情况都不一样,所以,不能轻易的下结论,你是大熊猫,是国宝,它是小野猫,是杂草。但是,就可用性而言,不同的方法优劣还是有标准来评判的,这个在后面会自然而然的展示。

现在,举个切换class实现下拉效果的简单例子,实例菜单原型来自,//zxx:Mtime创始人在新浪微博上很活跃,你有兴趣可以follow他, @,你有没有觉得这个名字很有遐想的空间呢?,截图如下:

?

?

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片 匿名?

推荐图文

  • 60个图标与按钮PSD模板
  • 新2备用网址hg622.com|首页吧:25张让你流口水的UI设计
  • 新2备用网址hg622.com|首页吧:44个有创意的设计工作室网站
  • 网页设计的12种颜色
  • 18个设计一流的单页网站
  • 调出照片柔和的蓝黄色-简单方法
  • Photoshop绘制虚线的巧妙方法
  • 中文logo设计的10个祖传秘方
  • Photoshop制作具有现代感的博客网站模板
Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
Copyright ? 2010-2012 JZQ8.COM. 新2备用网址hg622.com|首页吧|新2备用网址hg622.com|首页去吧 版权所有
冀ICP备09002514号
冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款