vueを作使用して、左から右に開くサイドバーメニュー

Question

現在vueを使って、左にあるサイドバーメニューのメニューボタンを押すと、右に開くアコーディオンのようなメニューを作成しています。

上から、下に開くメニューはできたのですが、どうしても、右に開くように変更ができません。
これは、cssで変更ができるのでしょうか。

一応vueで作成していますが、jsを書いてもいいのかなと考えています。jqueryは使わない予定です。

もしどなたか左右に開閉できる方法を知っていたら、ご教授いただければと思います。

 <div id="navmenu">
          <h1>{{ text }}</h1>
          <button v-on:click="on = !on" v-if="!on">メニューを表示</button>
          <button v-on:click="fire" v-if="on">メニューを閉じる</button>

          <transition name="show">
              <div class="sidemenu" v-if="on">
                <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Team</a></li>
                  <li><a href="#">Work</a></li>
                  <li><a href="#">Contact</a></li>
                </ul>
              </div>
          </transition>
        </div>

 <script>
        var vm = new Vue({
  el:'#navmenu',
  data: {
    text: 'サイドメニューを表示する',
    on:false
  },
  methods:{
    fire:function(){
      this.on = !this.on;
    }
  }
})</script>

Answer 1

ざっくりですけど、v-onでクラス名の操作をすればよいかと思います。
ボタンを押したときにfalseからtrueになり、trueの時にactiveというクラス名をnavに付与、もう一度おしたときにfalseでクラス名を取る。あとはCSSのtransformで動きをつけるなどですね。

例として、

<header id="navmenu">
    <h1>{{ text }}</h1>
    <nav
      :class="{ active: on }"
      class="sidemenu" aria-label="メニュー"
    >
      <button @click="on = !on">
        <span v-if="on === false">メニューを表示</span>
        <span v-else>メニューを閉じる</span>
      </button>
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
    </nav>
</header>

<script>
var vm = new Vue({
  el:'#navmenu',
  data: {
    text: 'サイドメニューを表示する',
    on: false
  }
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.sidemenu li {
  list-style: none;
}
.sidemenu a {
  width: 100%;
  height: 40px;
  color: #000;
}
.sidemenu ul {
  transform: translateX(-100%);
  transition: 0.2s all;
}
.sidemenu.active ul{
  transform: translateX(0)
}
</style>

Comments

[退会済みユーザー]

分かりやすい答えありがとうございました！
できました:)

[sauzar18]

それはよかったです。