Tailwindcss - Animate only one menu item

Hello,

I have a menu for which I want this behavior.

When the mouse passes over a menu item, I want that only this menu item height grows without disturbing the position of the other menu items, I mean the other menu items don't have to move or grow.

Example : h-14 py-3 hover:h-16 hover:py-4

For now, when the mouse passes over a menu item, the menu item height grows and it moves the other menu items too.

<ul class="flex justify-center items-center gap-4">
	<li class="relative">
    	<a class="absolute transition-all block top-0 h-14 rounded-b-lg whitespace-nowrap hover:h-16 {{ $active ? 'bg-primary text-white' : 'text-secondary hover:bg-lightgray hover:text-black' }} px-5 pt-3 pb-4 text-lg hover:py-4" href="...">
        	Menu A
    	</a>
	</li>
	<li class="relative">
    	<a class="absolute transition-all block top-0 h-14 rounded-b-lg whitespace-nowrap hover:h-16 {{ $active ? 'bg-primary text-white' : 'text-secondary hover:bg-lightgray hover:text-black' }} px-5 pt-3 pb-4 text-lg hover:py-4" href="...">
        	Menu B
    	</a>
	</li>
	<li class="relative">
    	<a class="absolute transition-all block top-0 h-14 rounded-b-lg whitespace-nowrap hover:h-16 {{ $active ? 'bg-primary text-white' : 'text-secondary hover:bg-lightgray hover:text-black' }} px-5 pt-3 pb-4 text-lg hover:py-4" href="...">
        	Menu C
    	</a>
	</li>
</ul>

Can you help me to solve this problem ?

Thanks a lot.

vincent15000

3 years ago

Best Answer

Level 63

I just found this solution.

<li class="top-0 h-14">
    <a class="block transition-all rounded-b-lg whitespace-nowrap hover:h-16 hover:py-4 {{ $active ? 'bg-primary text-white' : 'text-secondary hover:bg-lightgray hover:text-black' }} px-5 pt-3 pb-4 text-lg" href="{{ route($route) }}">
        {{ $slot }}
    </a>
</li>

Is there another way to do the same behavior ?

Please or to participate in this conversation.