el-menu 导航栏收起

Question

el-menu 导航栏收起的时候，高度不够，如何让它定位到右侧，而不是定位到上面

Answer 1

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7506390
• 你也可以参考下这篇文章：[element] el-menu 收起展开的子菜单
• 除此之外, 这篇博客: el-menu导航鼠标移入背景色，字体颜色改变，及文字过长，显示省略号，鼠标悬停显示全文中的 二、上代码 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• <template>
    <div class="about">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <location @click.stop="clickIcon" />
            </el-icon>
            <span
              style="display:block;width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"
              :title="'Navigator NavigatorNavigatorNavigator One'"
            >Navigator NavigatorNavigatorNavigator One</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item one</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon>
            <icon-menu />
          </el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon>
            <document />
          </el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon>
            <setting />
          </el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </div>
  </template>
  <script>
  import {
    Location,
    Document,
    Menu as IconMenu,
    Setting,
  } from '@element-plus/icons-vue'
  export default {
    name: 'About',
    components: {
      Location,
      Document,
      Setting,
      IconMenu
    },
    data() {
      return {
  
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        key, keyPath
      },
      handleClose(key, keyPath) {
        key, keyPath
      },
      clickIcon() {
        console.log(123)
      }
    }
  }
  </script>
  <style scoped>
  .about {
    width: 200px;
  }
  /* 改变elementui 侧边栏移入颜色 */
  .about >>> .el-menu-item:hover {
    background: #1c88cf !important;
    color: #fff !important;
  }
  .about >>> .el-submenu__title:hover {
    background: #1c88cf !important;
    color: #fff !important;
  }
  .about >>> .el-menu-item.is-active {
    background: #1c88cf !important;
    color: #fff !important;
  }
  .about >>> .el-submenu__title.is-active {
    background: #1c88cf !important;
    color: #fff !important;
  }
  </style>
  

• 以下回答由chatgpt基于相关博客总结生成:

  在 el-menu 导航栏收起状态时定位到右侧，可以通过修改样式来实现。具体步骤如下：

  1.给 el-menu 组件添加一个 class 名称，便于后续操作，比如 "menu-collapse"。

  <el-menu
    default-active="2"
    class="el-menu-vertical-demo menu-collapse"
    @open="handleOpen"
    @close="handleClose"
  >
  

  2.在样式中添加 "menu-collapse" 的样式，将其定位到右侧，并给其设置合适的宽度。

  .menu-collapse {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
  }
  

  3.在样式中添加对应的 media query，当窗口宽度大于一定值时（如 768px），才显示定位到右侧的 el-menu 组件。

  @media screen and (min-width: 768px) {
    .menu-collapse {
      display: block !important;
    }
  }
  

  完整的样式代码如下：

  <style scoped>
  .about {
    width: 200px;
  }
  
  /* 改变 elementui 侧边栏移入颜色 */
  .about >>> .el-menu-item:hover {
    background: #1c88cf !important;
    color: #fff !important;
  }
  
  .about >>> .el-submenu__title:hover {
    background: #1c88cf !important;
    color: #fff !important;
  }
  
  .about >>> .el-menu-item.is-active {
    background: #1c88cf !important;
    color: #fff !important;
  }
  
  .about >>> .el-submenu__title.is-active {
    background: #1c88cf !important;
    color: #fff !important;
  }
  
  @media screen and (min-width: 768px) {
    .menu-collapse {
      display: block !important;
    }
  }
  
  .menu-collapse {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
  }
  </style>