文:毛毛,首发自: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部分就不会再有适配动画,也就实现了我要的效果。
如果你也想这样的效果,不妨试试吧,祝你成功!!!
我是谁?