今天折腾项目里的老古董菜单栏，用户老是吐槽找不到入口。我寻思着得动动手了，抄起鼠标就开干。

一、发现眼瞎的滚动条

先打开用了三年的管理后台，左边菜单密密麻麻堆着二十多个按钮。试着往下滑，好家伙！滚动条细得像根线，鼠标挪了八次才拽住。用户群里早有人骂：「每次拉菜单都像在手术室穿针！」

二、给菜单加呼吸感

第一步直接扒拉CSS文件。找到那个丑了唧的 #leftMenu 选择器，先把每个菜单项的 padding 从5px改成12px。手指头敲上 height:38px 的时候，忽然想起上周点的奶茶杯——握得舒服才能喝得爽！

• 把字体从惨白的 #fff 换成柔和的 #f0f6ff
• 鼠标移上去的背景色，原先是扎眼的亮蓝，现在调成微妙的湖蓝色
• 顺手把图标尺寸从16px放大到20px

改完手贱点了下刷新，菜单突然胖得像充了气。旁边实习生探过头：“哥，这菜单咋突然变油腻了？”

三、滚动条整容手术

盯着那条坑爹的细滚动条，我往 ::-webkit-scrollbar 里塞了三行救命代码：
width:10px; （终于能用肉眼看清楚了）
background:#2c3e50; （跟菜单背景配个对）
border-radius:6px; （比直愣愣的方角顺眼多了）

测试时故意拿触控板猛滑，这回滚轮再没跑丢过。

四、埋个意外彩蛋

突然想到去年做的用户调研，七成人说“根本不知道能点折叠菜单”。干脆把展开图标从 换成 ，还在旁边加了半透明文字提示“点击展开”。结果前端小哥跑来说图标库没这个字符，气得我当场用PS画了个箭头图标贴上去。

五、表格布局害死人

临下班前手欠看了下源码，差点把咖啡喷屏幕上——这破菜单居然是用 <table> 布局的！怪不得每次加新栏目都要折腾列宽。连夜改成div布局，拿flexbox一拉伸，自适应瞬间丝滑了。

第二天故意让产品经理来点菜单，这哥们手滑着居然多点了五次功能入口。我憋着笑问他感受，人家挠头说：“奇怪，今天怎么老想点着玩？”