說實話，寫樣式看似簡單，其實有時候也會遇到很多坑。留下一筆，供參考（有點啰嗦，可以直接拖到最后看最后兩行）。

這次是做一個PC端和移動端同時適用的項目，菜單的展示就成了一個問題。

　　于是我判斷了用戶設(shè)備（具體見本人的另一篇隨筆：https://www.cnblogs.com/nuonuo-D/p/10516626.html），設(shè)了一個變量isMobi（移動端值為true,PC端值為false），菜單我用的是element-ui 的NavMenu，擬在pc端展示在頁面左側(cè)，移動端展示在頁面頂部。也就是說，思路是這樣：

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

　　　　此外再調(diào)整相應的css

　　好了廢話不多說，隨著項目的迭代，菜單從原先的三個變成了六七個，移動端一屏已經(jīng)無法顯示。于是我就想著讓它出滾動條。

　　本來以為單純加個overflow-x:auto就能解決了，結(jié)果發(fā)現(xiàn)并不能。

　　經(jīng)過幾次嘗試，得到的解決方法：

　　代碼(快捷閱讀：看紅色文字即可)：

<template><div class="sidebar-top"><el-menu:mode="mode":collapse-transition="false":default-active="onRoutes"v-bind:router="true"background-color="#3b3b3b"text-color="#fff":unique-opened="true"menu-trigger="click"active-text-color="#20a0ff"><template><el-menu-item index="/index"><span slot="title">首頁</span></el-menu-item></template><template><el-submenu index="1"><template slot="title"><span>一級菜單1</span></template><el-menu-item index="/url1" >二級菜單1</el-menu-item></el-submenu></template><template><el-submenu index="2"><template slot="title"><span >一級菜單2</span></template><el-submenu index="2-1" :popper-append-to-body="true" ><span slot="title">帶三級菜單的二級菜單</span><el-menu-item index="/url">三級菜單1</el-menu-item><el-menu-item index="/url">三級菜單2</el-menu-item></el-submenu></el-submenu></template><template><el-submenu index="3"><template slot="title"><span>一級菜單3</span></template><el-menu-item index="/url1" >二級菜單1</el-menu-item><el-menu-item index="/url2" >二級菜單2</el-menu-item></el-submenu></template><template><el-submenu index="4"><template slot="title"><span>一級菜單4</span></template><el-menu-item index="/url1" >二級菜單1</el-menu-item></el-submenu></template><template><el-submenu index="5"><template slot="title"><span>一級菜單5</span></template><el-menu-item index="/url1" >二級菜單1</el-menu-item></el-submenu></template><template><el-menu-item index="/url1"><span slot="title">一級菜單6</span></el-menu-item></template></el-menu></div> </template> <!--注：設(shè)置:popper-append-to-body="true" 可以防止三級菜單跑到屏幕外面去-->

?

　　樣式(快捷閱讀：看紅色文字即可)：

<style>.sidebar-top{background-color: #3b3b3b;height: 55px; overflow-x: auto;}.sidebar-top > ul {/*width: 840px;*//*帶icon的*/width: 530px;/*不帶icon的*/}.sidebar-top .el-menu--horizontal>.el-menu-item {height: 55px;line-height: 55px;}.sidebar-top .el-menu--horizontal>.el-submenu .el-submenu__title {height: 55px;line-height: 55px;}.sidebar-top .el-submenu .el-menu-item {min-width: 160px;}.sidebar-top .el-menu--collapse .el-menu .el-submenu,.el-menu--popup {min-width: 100px;}.el-submenu__icon-arrow {margin-top: -4px;}.el-submenu .el-menu-item {min-width: 80px;}.iconfont{font-size: 20px;}</style>

?總結(jié)：代碼放了很多，因為本人說事情可能下意識的想全面點（代碼可以直接復制看效果），所以不夠精簡，關(guān)鍵點只有幾個：

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

　　2.el-menu設(shè)好寬度，這個寬度的大小約為所有二級菜單寬度之和

?

轉(zhuǎn)載于:https://www.cnblogs.com/nuonuo-D/p/10900904.html

總結(jié)

以上是生活随笔為你收集整理的element-ui的NavMenu置于顶部(mode=horizontal)时,让菜单可以滚动(overflow-x:auto)(主要用于移动端的菜单显示)...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。