[Vue.js] Dropdown Menu

3 years ago

source link: http://siongui.github.io/2017/05/15/vuejs-dropdown-menu/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

[Vue.js] Dropdown Menu

May 15, 2017

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/[email protected]/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: