[Vue.js] Dropdown Menu

Dropdown menu implementation via Vue.js and CSS. The dropdown menu here is similar to Bootstrap dropdown. Click the following button to see the demo.

The following is the source code for above demo.

HTML:

<div id="vueapp">

<div class="dropdown">
  <button class="dropdown-toggle" v-on:click="isShowDrop1 = !isShowDrop1">
    Dropdown
  </button>
  <ul class="dropdown-menu" v-show="isShowDrop1">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
    <li><a>Item 3</a></li>
  </ui>
</div>

</div>

<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>

Wrap your dropdown toggle and dropdown menu in div.dropdown. You can use anchor element for dropdown toggle instead of button element.

We use the variable isShowDrop1 to control the visibility of dropdown menu. The demo code here is very easy to understand.

JavaScript:

'use strict';

var app = new Vue({
  el: '#vueapp',
  data: {
    isShowDrop1: false
  }
});

Set isShowDrop1 to false in the initialization phase to hide the dropdown menu in the beginning.

CSS:

.dropdown {
  position: relative;
}

.dropdown-toggle {
  background-color: white;
}

.dropdown-menu {
  position: absolute;
  border-radius: 5px;
  border-top-color: #C9D7F1;
  border-right-color: #36C;
  border-bottom-color: #36C;
  border-left-color: #A2BAE7;
  border-style: solid;
  border-width: 1px;
  z-index: 22;
  padding: 0;
  background-color: white;
  overflow: hidden;
  font-size: small;
  font-family: Arial;
  line-height: 2em;
  word-spacing: 0;
  margin-top: 2px;
}

.dropdown-menu a {
  font-size: 1.25em;
  color: #00C;
  padding: .25em 2em .25em 1em;
  text-decoration: none;
  background: white;
  display: block;
  cursor: pointer;
}

.dropdown-menu a:hover {
  background: #00C;
  color: white;
}

Use position: relative; in parent .dropdown class and position: absolute; in child .dropdown-menu class to align the dropdown menu under the dropdown toogle.

Other rules is only for making the dropdown look beautiful.

Tested on:

Chromium Version 58.0.3029.96 Built on Ubuntu , running on Ubuntu 17.04 (64-bit)
Vue.js 2.3.3

References:

[1]	[Vue.js] Modal (Popup)

[2]	[AngularJS] Dropdown Menu Using Directive