Vue JS Dropdown Menu Component

Loading…

Vue JS Dropdown Menu Component | GoSnippets

Source Code

1<div id="app">
2  <div class="language" :class="showDrawer ? 'highlight': '' " @click="show">
3    <p class="language-copy">Language</p>
4    <i class="icon fas fa-chevron-down" :style="{transform: showDrawer ? 'rotate(180deg)' : ''}"></i>
5  </div>
6  <transition name="slide">
7    <div class="language-drawer" v-if="showDrawer">
8      <ul class="drawer-list">
9        <li class="drawer-list-item" v-for="entry in langJSON" :key="entry">
10          <div class="drawer-list-name">
11            <input type="checkbox" v-model="entry.checked" :id="entry.language">
12            <label :for="entry.language">{{ entry.language }}</label>
13          </div>
14          <p class="drawer-list-value">{{ entry.value }}</p>
15        </li>
16      </ul>
17    </div>
18  </transition>
19</div>
20 <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script>

Vue JS Dropdown Menu Component

Source Code

More Navbar snippets

Comments(0)