#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    6

    Question Adding Timer/Transition Delay to the Drop-Down Menu


    Hello everyone,

    I am trying to get the drop-down effect on my home page to have a time delay when the user's mouse leaves the drop-down menu, so that the menu doesn't instantly disappear and make the user start over so much. Here are the styles:

    dropdownmenus.css
    Code:
    #pMenu li > div{
    	visibility:hidden;
    	opacity:0;
    	transition-delay:0s;
    	transition:visibility 0s linear 1s,opacity 1s linear;
    	position:absolute;
    	margin-top:8px;
    	border:2px solid #003;
    	padding:4px;
    	z-index:2;
    		
    	/*second gradient*/
    	background: #9ebcbf; /* Old browsers */
    	background: -moz-linear-gradient(top, #9ebcbf 0%, #7c889b 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ebcbf), color-stop(100%,#7c889b)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* IE10+ */
    	background: linear-gradient(to bottom, #9ebcbf 0%,#7c889b 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ebcbf', endColorstr='#7c889b',GradientType=0 ); /* IE6-9 */
    }
    
    #pMenu li:hover div{visibility:visible; opacity:1; transition-delay:1s;}
    What am I missing here?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    17
    Rep Power
    0
    google "delay in css3" (this does not work with IE9 and under, I think)
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    6
    Hi Brandan,

    I think I ended up giving up on this as I eventually found the correct configuration for the transition-delay, but that delay caused an overlap of the divs when you scroll the main-level list-items, making even a bigger problem. I don't think there is a better way to target this to only have the transition-delay when the user's mouse leaves the #pMenu area altogether, so I just decided to leave the transition-delay at 0s.

    Code:
    #pMenu li > div{
    	visibility:hidden;
    	opacity:0;
    	transition:visibility 0s linear .3s,opacity .3s linear;
    	transition-delay:0s;
    	position:absolute;
    	margin-top:8px;
    	border:2px solid #003;
    	padding:4px;
    	z-index:2;
    		
    	/*second gradient*/
    	background: #9ebcbf; /* Old browsers */
    	background: -moz-linear-gradient(top, #9ebcbf 0%, #7c889b 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ebcbf), color-stop(100%,#7c889b)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* IE10+ */
    	background: linear-gradient(to bottom, #9ebcbf 0%,#7c889b 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ebcbf', endColorstr='#7c889b',GradientType=0 ); /* IE6-9 */
    }
    
    #pMenu li:hover div{visibility:visible; opacity:1; transition-delay:0s;}
    Thanks, though.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    17
    Rep Power
    0
    did you try a delay like 100 ms/0.1 seconds or something like that
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    I'm not aware of a CSS-only solution for this. I'd suggest you use some JavaScript to do that. I recommend you take a look at Superfish menus.

    Comments on this post

    • etidd agrees
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo