Tailwind css Animated Nav Menu | Learn Tailwind css | Magic indicator

Tailwind css Animated Nav Menu | Learn Tailwind css | Magic indicator
Code A Program...
Follow us on :
Github : github.com/Sridhar-C-25
Instagram: / codeaprogram
🙏🤝Thanks for watching! Make sure to like + Subscribe For More!
#tailwindcss #navbar #codeaprogram

[@mohamedyoussef8835]

Awesome video +++++++++++++++++++++

[@Deus-lo-Vuilt]

Thanks , more videos Tailwind pls 😎😎

[@CodeAProgram]

Welcome ❤️

[@alkig3398]

tried to make it verticall but sounds there are somthing missed, could you please help
.v-connect {
@apply fixed right-2 bottom-12 h-0 w-14 translate-y-[-40%] rounded-md bg-gray-100 p-3 transition-[height,bottom] delay-[1s,2.5s] duration-500;
}
.v-connect-btn {
@apply absolute left-[50%] top-[50%] flex h-16 w-16 translate-y-[-50%] translate-x-[-50%] cursor-pointer items-center justify-center rounded-full bg-cyan-600 duration-300;
}
.v-connect:has(#vcheck:checked) {
@apply top-[50%] h-96 -translate-y-[50%] transition-[height,bottom] delay-[1s,0s] duration-500;
}
.icon {
@apply delay-[1s] duration-300;
}
#vcheck:checked + .icon {
@apply -rotate-[135deg] delay-[2s];
}
.v-connect-btn:has(#vcheck:checked) {
@apply left-0 delay-[3s];
}
.v-connect-btn:has(#vcheck:checked) {
@apply left-0 bg-rose-600 shadow-lg shadow-rose-600 delay-[3s];
}

[@micheldegroot2803]

Thanks so much for this vid. I replicated this in Vue.js However when I check the checkbox nothing happens, the check appears but not the styling effect as called by the :has(). All of the code is similar to yours in the vid (checked it 10 times) but no effect. Only when I change the :has() into :not() I can see the effect in the browser. Here's my Vue code:










.bottomNav {
@apply fixed right-12 bottom-4 h-14 w-0 translate-x-[50%] duration-700 bg-gray-200 p-3 rounded-2xl transition-[width,right] delay-[0.5s,2s];
}
.control-btn {
@apply absolute left-[50%] top-[3%] translate-x-[-50%] translate-y-[-10%] cursor-pointer h-16 w-16 bg-cyan-600 duration-300 flex items-center justify-center rounded-full;
}
.bottomNav:has(#check:checked) {
@apply right-[50%] translate-x-[50%] w-96 transition-[width,right] delay-[0.5s,0s] duration-500;
}
#check:checked + svg {
@apply rotate-[135deg] delay-[2s];
}
.control-btn:has(#check:checked) {
@apply top-[-50%] delay-[2s] bg-rose-600 shadow-lg shadow-rose-500;
}
ion-icon {
@apply cursor-pointer;
}
ion-icon:hover {
@apply -translate-y-1 scale-110;
}
export default {}

[@CodeAProgram]

Which browser you are using

[@micheldegroot2803]

@@CodeAProgram Thanks for your getting back. :) I checked with Firefox & Chrome. Both browsers respond the same.