文：毛毛，首发自:maomao.ink，转载请保留此行。

刚刚把大小屏适配功能给还原了，现在继续在还原的基础上进行小屏幕菜单栏展开优化。

可不能瞎改，不然又得改坏。

一、调整菜单栏宽度

介于我的菜单标题最多就两个字，所以宽度可以设置窄一点，美观一些。于是我在/css/style.css里面修改了样式。

原始样式在大屏上展开宽度为170px，小屏上展开宽度为130px。我将它调整为大屏115px，小屏105px。

调整也很简单，搜索style.css里面所有的170px替换为115px，所有的130px替换为105px。

之所以不用整数，是因为115和105这两个数字目前style里面没做其他用途，如果日后需要修改，继续搜索替换就行了。

二、优化小屏菜单栏展开时页面不压缩。

先看看效果图：

左边是优化前，右边是优化后。

虽然从图片上来看，左边的图似乎更美观一点，但操作体验却不竟如此。

左图的菜单栏在展开的同时，内容也在跟着变化，以适应菜单栏展开之后剩下的宽度。

而右图的菜单栏展开时，内容没有变化，纯粹是菜单栏的开和关，我认为这样的体验更舒畅一些。

下面来看看我修改的代码：

修改style.css里的代码如下：

/* 修改前 */
    #wrapper.holding-right #body{
      -webkit-transform: translate(105px,0);
      -ms-transform: translate(105px,0);
      transform: translate(105px,0);
      margin-left: -105px;
      padding-left: 105px;
      position:fixed;
    }

/* 修改后 */
    #wrapper.holding-right #body{
      -webkit-transform: translate(0px,0);
      -ms-transform: translate(0px,0);
      transform: translate(0px,0);
      margin-left: -0px;
      padding-left: 0px;
      position:fixed;
    }

可以看出，我是在修改了菜单栏宽度的基础上，再将body需要移动的偏移量改成了0。

这样body部分就不会再有适配动画，也就实现了我要的效果。

如果你也想这样的效果，不妨试试吧，祝你成功！！！

我是谁？

• 90后程序媛，写代码，也写软文
• 喜欢阅读，喜欢聆听，喜欢分享
• 热爱挑战各种稀奇古怪的事物（比如这个博客）
• 我是毛毛，感恩遇见你！