Off-screen sliding dropdown list over on-screen menu

HTML & CSS
18

I’ve updated the codepen to get rid of the bug.

I changed the rules here:

ul.sub {
	position:absolute;
	width:50%;
	left:50%;
  margin-left:-999em;/* fallback*/
  margin-left:-100vw;
	top:-100%;
	opacity:0;
	background-color: #f00;
	z-index:-1;
	box-shadow:5px 5px 5px rgba(0,0,0,0.4);
	/* comment the next line out if you want the submenu to disappear quickly */
  transition:opacity 1s ease .1s, top .1s ease .5s, margin 0s  1s;
}
.dropdown:hover .sub {
	top:0;
        margin-left:0;
	opacity:1;
	transition:opacity 1s ease .5s, top .5s ease .5s;
  	z-index:99;
}

I changed a couple of things to keep the animation as I wanted but feel free to tweak as required. I like the menu to fade away when finished rather than just disappear.

The menu is hidden off to the left of the screen and to avoid the menu transitioning left and right I’ve added a 0s transition so that it happens immediately but with a transition delay so that the slide up and down takes place first. It’s a good method for allowing a transition to take place and then applying other rules to make sure the menu is hidden off screen without animating to that off screen point.

I think that squashes all bugs but as they say in computer programs “There is always one more bug…”.

1 Like