element-ui的NavMenu置于顶部(mode="horizontal")时,让菜单可以滚动(overflow-x:auto)(主要用于移动端的菜单显示)...

说实话，写样式看似简单，其实有时候也会遇到很多坑。留下一笔，供参考（有点啰嗦，可以直接拖到最后看最后两行）。

这次是做一个PC端和移动端同时适用的项目，菜单的展示就成了一个问题。

　　于是我判断了用户设备（具体见本人的另一篇随笔：https://www.cnblogs.com/nuonuo-D/p/10516626.html），设了一个变量isMobi（移动端值为true,PC端值为false），菜单我用的是element-ui 的NavMenu，拟在pc端展示在页面左侧，移动端展示在页面顶部。也就是说，思路是这样：

　　　　isMobi?mode='horizontal':mode='vertical' （即移动端：NavMenu的模式为horizontal，pc端模式为vertical）

　　　　此外再调整相应的css

　　好了废话不多说，随着项目的迭代，菜单从原先的三个变成了六七个，移动端一屏已经无法显示。于是我就想着让它出滚动条。

　　本来以为单纯加个overflow-x:auto就能解决了，结果发现并不能。

　　经过几次尝试，得到的解决方法：

　　代码(快捷阅读：看红色文字即可)：

 

　　样式(快捷阅读：看红色文字即可)：

 总结：代码放了很多，因为本人说事情可能下意识的想全面点（代码可以直接复制看效果），所以不够精简，关键点只有几个：

　　1.el-menu的父容器加上属性：overflow-x: auto;

　　2.el-menu设好宽度，这个宽度的大小约为所有二级菜单宽度之和

 

转载于:https://www.cnblogs.com/nuonuo-D/p/10900904.html