element导航栏navmenu样式修改

最新推荐文章于 2024-04-27 13:24:18 发布

MeredithForever

最新推荐文章于 2024-04-27 13:24:18 发布

阅读量759

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_52725484/article/details/127532130

版权

效果图

样式修改包括子菜单、以及替换icon、选中样式改变字体颜色以及一级菜单高亮保持不变等、但是还未实现子菜单根据一级菜单宽度改变自身宽度、目前采用固定宽度的方式实现

结构部分：

  <div id="nav"  :style="headStyle" v-cloak>
        <div class="nav wrapper">
      <div class="logo" :style="{backgroundImage:'url('+logoStyle+')'}"></div>
      <div class="nav-content">
          <el-menu  background="transparent"  :router="true" :default-active="activeIndex"  class="el-menu-demo" mode="horizontal" :unique-opened="true"
          @open="open">
          <el-menu-item index="1"><a href="javascript:void(0);" class="font">首页</a></el-menu-item>
          <el-submenu index="2" >
            <template slot="title" ><a href="javascript:void(0);" class="font">产品&解决方案</a></template>
            <el-menu-item index="2-1"><a class="item" href="javascript:void(0);">选项1</a></el-menu-item>
            <el-menu-item index="2-2"><a class="item" href="javascript:void(0);">选项2</a></el-menu-item>
            <el-menu-item index="2-3"><a class="item" href="javascript:void(0);">选项3</a></el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><a href="javascript:void(0);" class="font">关于</a></template>
            <el-menu-item index="3-1"><a class="item" href="javascript:void(0);">公司新闻</a></el-menu-item>
            <el-menu-item index="3-2"><a class="item" href="javascript:void(0);">客户动态</a></el-menu-item>
            <el-menu-item index="3-3"><a class="item" href="javascript:void(0);">行业资讯</a></el-menu-item>
          </el-submenu>
          <el-submenu index="4" >
            <template slot="title"><a href="javascript:void(0);" class="font">投资者关系</a></template>
            <el-menu-item index="4-1"><a class="item" href="javascript:void(0);">选项1</a></el-menu-item>
            <el-menu-item index="4-2"><a class="item" href="javascript:void(0);">选项2</a></el-menu-item>
            <el-menu-item index="4-3"><a class="item" href="javascript:void(0);">选项3</a></el-menu-item>
          </el-submenu>
          <el-submenu index="5" >
            <template slot="title"><a href="javascript:void(0);" class="font">联系我们</a></template>
            <el-menu-item index="5-1"><a class="item" href="javascript:void(0);">选项1</a></el-menu-item>
            <el-menu-item index="5-2"><a class="item" href="javascript:void(0);">选项2</a></el-menu-item>
            <el-menu-item index="5-3"><a class="item" href="javascript:void(0);">选项3</a></el-menu-item>
          </el-submenu>
          <el-menu-item index="6"><a class="font" href="javascript:void(0);">生态合作</a></el-menu-item>
        </el-menu>
      </div>
    </div>
  </div>