实现水平样式的菜单（Horizontal Menu），类似的效果是Three20框架的menubar。菜单位于导航条下方，或者屏幕最下方，有许多按钮在菜单上面。这样的菜单可以在很多新闻类app中出现。适用于有许多分类的内容，用户点击某个菜单按钮，出现某个分类内容。整个效果虽然和Three20框架的menubar差不多，但是实现十分简单，只有不到150行的代码。 [Code4App.com]
-
说实话，写样式看似简单，其实有时候也会遇到很多坑。留下一笔，供参考（有点啰嗦，可以直接拖到最后看最后两行）。 这次是做一个PC端和移动端同时适用的项目，菜单的展示就成了一个问题。 于是我判断了用户设备（具体见本人的另一篇随笔：https://www.cnblogs.com/nuonuo-D/p/10516626.html），设了一个变量isMobi（移动端值为true,PC端值为false），
-
.el-menu { background-color: rgba(165, 42, 42, 0); } .el-menu.el-menu--horizontal { border: none; } /* hover颜色改变 */ >>> .el-menu--horizontal > .el-submenu .el-submenu__title:hover { background:
-
<el-menu class="el-menu-vertical-demo menu-left" :unique-opened="true" v-for="(muen,key) in menuList" :key="muen.menuId" :collapse="showColl
-
** element UI 对导航el-menu 样式的修改 ** 对样式进行修改时 .el-menu--horizontal > .el-submenu .el-submenu__title, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title, .el-submenu__title i { color: #fff;
-
背景颜色 /deep/.el-menu .el-menu-item:hover{ outline: 0 !important; color: #2E95FB !important; background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important; } /deep/.el-menu .el-men
-
找了很久原因覆盖掉样式均不行，原因是漏了重要的一句text-decoration: none; .el-menu--horizontal > .el-menu-item { border-bottom: none; text-decoration: none; }