
Елементарно падащо меню в Vue:
<template>
<div class="relative inline-block w-full text-right pr-6">
<button @click="toggleDD()" class="drop-button text-white focus:outline-none">
Меню
</button>
<div :class="['dropdownlist absolute bg-gray-900 text-white right-0 mt-3 p-3 overflow-auto z-30',
menuDD ? 'slideInDown' : 'invisible fadeOutUp']">
<a href="/link1" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block">
Link1
</a>
<a href="/link2" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block">
Link2
</a>
<div class="border border-gray-800"></div>
<a href="/link3" class="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block">
Link3
</a>
</div>
</div>
</template>
<script>
export default {
data(){
return{
menuDD: false,
}
},
methods: {
this.menuDD = !this.menuDD;
}
}
</script>