...

Елементарно падащо меню в Vue

използвайки tailwind
преди 7 месеца

Елементарно падащо меню в 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>