做响应式网站的菜单栏
说实话，很多刚入行做前端或者自己折腾网站的朋友，一听到“响应式”三个字就头大。特别是那个汉堡菜单，看着简单，真做起来全是细节。我干这行这几年，见过太多为了追求所谓的“高大上”动画效果，结果在低端安卓机上卡成PPT的案例。今天不整那些虚头巴脑的理论，就聊聊怎么把做响应式网站的菜单栏弄得既好用又不掉链子。
先说个真事。去年有个老客户找我救火，他的网站在PC端看着挺正常，一到手机端，那个下拉菜单直接溢出屏幕，而且点击区域小得可怜，用户根本点不准。他之前找了个外包，为了炫技，用了复杂的CSS3动画加JS库，结果兼容性差得一塌糊涂。我接手后，第一件事就是砍掉所有花里胡哨的过渡效果，回归原生。
做响应式网站的菜单栏，核心就俩字：实用。别总想着怎么让它动起来，先想着怎么让用户点得爽。
第一步，确定断点。别一上来就写代码，先拿尺子量（开玩笑的，是用浏览器开发者工具）。通常992px或者1024px是个常见的分界线。当屏幕宽度小于这个值时，横向导航栏必须消失，换成垂直堆叠或者折叠样式。这里有个坑，很多新手直接把PC端的导航CSS复制过来改改，结果导致菜单项重叠或者文字换行乱码。记住，移动端的导航结构应该更扁平，层级不要超过三级，否则用户会晕。
第二步，优化触摸区域。这是最容易被忽视的地方。在PC上，鼠标悬停就能触发菜单，但在手机上，手指比鼠标粗多了。如果你把菜单项的高度设得太低，比如只有20px，用户根本点不准。我一般建议移动端菜单项的最小点击区域高度设为44px，宽度不限，但间距要够。这样哪怕用户手指粗，或者手抖，也能一次点中。我有个朋友，之前没注意这点，导致他们网站的移动端跳出率高达70%，后来把菜单项高度加到44px，跳出率直接降到了40%左右。这数据虽然不绝对权威，但在行业内算是个共识。
第三步，处理汉堡菜单的交互。那个三道杠的图标，别随便找个字体图标凑合。最好是用SVG或者纯CSS画，保证清晰度。点击后的动画，建议用简单的淡入淡出或者滑入，别用那种旋转、缩放再旋转的复杂动画，加载慢还费电。我见过一个案例，用了个旋转90度的动画，结果在iPhone 6s上偶尔会卡顿，用户点两次才能打开，体验极差。
第四步，别忘了无障碍访问。这点很多老板不在乎，但搜索引擎很在乎。给汉堡按钮加上aria-label，告诉屏幕阅读器这是什么。给菜单项加上正确的tabindex，让键盘用户也能操作。这不仅是道德问题，更是SEO的加分项。
最后，测试测试再测试。别只在自己的电脑上测。拿几台不同品牌的手机，不同版本的浏览器，甚至是用模拟器模拟弱网环境。我有一次在测试时发现，在华为的某些旧机型上，菜单展开后背景遮罩层没覆盖全，导致用户误触关闭菜单。这种细节，只有真机测试才能发现。
做响应式网站的菜单栏，真的不是写几行CSS那么简单。它关乎用户体验，关乎转化率，甚至关乎你的网站能不能被搜索引擎友好地抓取。别为了炫技而炫技，简单、快速、准确，才是王道。
总结一下，别整那些花里胡哨的，把触摸区域做大，把动画做简，把测试做细。这样做出来的菜单栏，用户爱用，你也省心。
