Transition not working Tailwindcss
//Hamburger Button
<div className='md:hidden text-3xl items-center' onClick={()=>{setMenu(true);}}>
<RxHamburgerMenu/>
</div>
//Menue
<div className={
//close button
<AiOutlineClose className='float-right text-right text-lg' onClick={()=>setMenu(false)} />
//navlinks
<div className='mt-6'>
<ul className='text-center space-y-4 relative'>
<li>
<a onClick={()=>setMenu(false)} href="#home">Home</a>
</li>
<li>
<a onClick={()=>setMenu(false)} href="#program">Program</a>
</li>
<li>
</ul>
</div>
</div>
<div className='md:hidden text-3xl items-center' onClick={()=>{setMenu(true);}}>
<RxHamburgerMenu/>
</div>
//Menue
<div className={
${menu ? "top-0":"hidden"} -top-[490px] transition-all duration-300 absolute w-full py-4 px-8 bg-secondary//close button
<AiOutlineClose className='float-right text-right text-lg' onClick={()=>setMenu(false)} />
//navlinks
<div className='mt-6'>
<ul className='text-center space-y-4 relative'>
<li>
<a onClick={()=>setMenu(false)} href="#home">Home</a>
</li>
<li>
<a onClick={()=>setMenu(false)} href="#program">Program</a>
</li>
<li>
</ul>
</div>
</div>
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
