javascript - Vue.js: toggle hamburger menu icons

I have a header with a hamburger menu icon which I want to change to a cross icon when I click on this. How to do this in the Vue template? I created a function in the puted property but I am not sure what I should do.

Here is my menu icon:

<div class="top-icon" :class="toggleTopMenu" @click="showTopMenu = !showTopMenu">
  <div class="main-item menu">
    <span class="line line01"></span>
    <span class="line line02"></span>
    <span class="line line03"></span>
  </div>
</div>

This is my CSS:

.top-icon {
  background: #29afd1;
  display: inline-block;
  border-radius: 500px;
  margin: 10px;
  position: relative;
  padding: 80px;
  cursor: pointer;
}

.main-item {
  width: 150px;
  height: 150px;
  position: relative;
}

.line {
  position: absolute;
  height: 15px;
  width: 100%;
  background: white;
  border-radius: 10px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
}

.line01 {
  top: 19%;
}

.line02 {
  top: 49%;
}

.line03 {
  top: 79%;
}

.menu.close .line01 {
  transform: rotate(45deg);
  top: 49%;
}

.menu.close .line02, .menu.close .line03 {
  transform: rotate(-45deg);
  top: 49%;
}

So far, this is what I have inside script tags:

data() {
  return {
    showTopMenu: false,
  };
},
puted: {
toggleTopMenu() {},

Here is my menu icon:

<div class="top-icon" :class="toggleTopMenu" @click="showTopMenu = !showTopMenu">
  <div class="main-item menu">
    <span class="line line01"></span>
    <span class="line line02"></span>
    <span class="line line03"></span>
  </div>
</div>

This is my CSS:

.top-icon {
  background: #29afd1;
  display: inline-block;
  border-radius: 500px;
  margin: 10px;
  position: relative;
  padding: 80px;
  cursor: pointer;
}

.main-item {
  width: 150px;
  height: 150px;
  position: relative;
}

.line {
  position: absolute;
  height: 15px;
  width: 100%;
  background: white;
  border-radius: 10px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
}

.line01 {
  top: 19%;
}

.line02 {
  top: 49%;
}

.line03 {
  top: 79%;
}

.menu.close .line01 {
  transform: rotate(45deg);
  top: 49%;
}

.menu.close .line02, .menu.close .line03 {
  transform: rotate(-45deg);
  top: 49%;
}

So far, this is what I have inside script tags:

data() {
  return {
    showTopMenu: false,
  };
},
puted: {
toggleTopMenu() {},

Share Improve this question edited Jul 14, 2019 at 3:15 MarredCheese 21k12 gold badges108 silver badges103 bronze badges asked Mar 2, 2018 at 7:52 Olga B 5132 gold badges11 silver badges36 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

Do you mean this kind of implementation? I just added v-if and v-else on your code

Please check the snippet below:

new Vue({
  el: "#app",
  data: {
    showTopMenu: false,
  }
})

.top-icon {
  background: #29afd1;
  display: inline-block;
  border-radius: 500px;
  margin: 10px;
  position: relative;
  padding: 80px;
  cursor: pointer;
}

.main-item {
  width: 150px;
  height: 150px;
  position: relative;
}

.line {
  position: absolute;
  height: 15px;
  width: 100%;
  background: white;
  border-radius: 10px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
}

.line01 {
  top: 19%;
}

.line02 {
  top: 49%;
}

.line03 {
  top: 79%;
}

.menu.close .line01 {
  transform: rotate(45deg);
  top: 49%;
}

.menu.close .line02, .menu.close .line03 {
  transform: rotate(-45deg);
  top: 49%;
}

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <div class="top-icon" class="toggleTopMenu" @click="showTopMenu = !showTopMenu">
    <div class="main-item menu" v-if="!showTopMenu">
      <span class="line line01"></span>
      <span class="line line02"></span>
      <span class="line line03"></span>
    </div>
    <div v-else>
      X
    </div>
  </div>
</div>

I apologize about the UI though. :)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Vue.js: toggle hamburger menu icons - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)