如何做element-ui顶栏导航和侧栏导航同时在一起？

Question

我想把顶栏导航和侧栏导航同时做的，如果单击顶栏导航一的时候，就找到侧栏导航一，这是相对应的菜单。如何应该怎么做的？

我想要这种效果，参考以下gif动画：

element-ui demo: jsfiddle：

Answer 1

能用JSFiddle写一个demo，首先给你点个赞！方便看到问题而且方便回答。
直接在你那个demo上更改了部分代码，你点击查看便可看到效果：https://jsfiddle.net/aL83ucmw/6/

Answer 2

<div id="app">
  <el-col :span="24" class="header">
    <el-col :span="10" class="logo">
      <br>
    </el-col>
    <el-col :span="10">
      <div class="tools">
        <i class="fa fa-align-justify"></i>
      </div>
    </el-col>
    <el-menu :default-active="currentTopMenu" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">顶栏导航一</el-menu-item>
      <el-menu-item index="2">顶栏导航二</el-menu-item>
      <el-menu-item index="3">顶栏导航三</el-menu-item>
    </el-menu>
    <div class="line"></div>
  </el-col>

  <el-col :span="10">
    <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">

      <el-submenu index="1" v-show="currentTopMenu == 1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>侧栏导航一</span>
        </template>


        <el-menu-item index="1-1">选项1</el-menu-item>


      </el-submenu>
      <el-menu-item index="2" v-show="currentTopMenu == 2">
        <i class="el-icon-menu"></i>
        <span slot="title">侧栏导航二</span>
      </el-menu-item>
      <el-menu-item index="3" v-show="currentTopMenu == 3">
        <i class="el-icon-setting"></i>
        <span slot="title">侧栏导航三</span>
      </el-menu-item>
    </el-menu>
  </el-col>

</div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      currentTopMenu: '1'
    }
  },
  methods: {
    handleSelect(index) {
      this.currentTopMenu = index;
    }
  }
})