html - Prevent multiple submenu's from being visible at the same time (due to transition delay) when only one is being hovered -
updated code example here.
it's hard summarise in title, made codepen show what's happening:
http://codepen.io/erikdevos/pen/ejmmpy
/* menu container styling */ #nav { background: #f5f5f5; width:500px; display:flex; } /* style unondered lists */ ul { text-decoration: underline; list-style-type: none; background: #cecece; } /* give submenu different background */ ul li ul { background: #e3e3e3; } /* add pointer menu */ ul:hover { cursor: pointer; } /* make menu items visible when menu hovered */ ul:hover > li { visibility: visible; transition-delay: 0s; } /* make menu items , add transition delay */ ul > li { visibility: hidden; transition-delay: .5s; } ul li:hover li { visibility: visible; transition-delay: 0s; } ul li:hover ul{ visibility: visible; transition-delay: 0s; } the menu html looks this
<div id="nav"> <ul>menu <li>item 1</li> <li>item 1</li> <li>submenu 1 <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </li> <li>submenu 2 <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </li> <li>submenu 3 <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </li> </ul> </div> i made menu submenu's, , added transition delay visibility: "visible" & "hidden" css properties on hover / leaving hover prevent menu disappearing when move out of menu.
but results in there being multiple submenu's open @ same time when hover multiple items fast. (you can see in pen)
i somehow need cut animation/transition of submenu short when submenu item being displayed!
there isn't can in css area, have feeling javascript or jquery can somehow monitor property , element , set transition delay of element 0 when element b being hovered. viable solution, or there function this?
add ul li:hover li transition-delay: 5s , not appear while other li transition-delay: 4s not hide
or use this
$('ul').find('li').each({$('this').css('visibility','hidden')}); 
Comments
Post a Comment