Hello everyone,
I am attempting to put a delay effect on hiding the drop-down menu when the user’s mouse leaves the drop-down menu on my home page. The following code is inverting the behavior of the menu, as you can tell.
var timer = false;
$("#pMenu div, #bMenu div").hover(function(){
clearTimeout(timer);
$("#pMenu div, #bMenu div").show();
},
function(){
setTimeout(function(){
$("#pMenu div, #bMenu div").hide();
}, 400);
});
Currently it is CSS that is causing your drop down menu to show and hide.
Am I right to believe that you are wanting to make it easier for the menu to remain on the screen while a person moves their mouse around?
Yes, that is the idea.
Here are the styles for the drop-down menu:
@charset "utf-8";
/* Drop Down Menus */
/*******************/
/*PERSONAL NAV MENU*/
/*******************/
#pMenu{
padding:94px 0 0 47px;
background:url(pMenuBG.gif) no-repeat scroll 50% 39px transparent;
height:350px;
z-index:50;
margin:0 auto;
}
#pMenu ul{
margin:0;
padding:0;
}
#pMenu li{
list-style:none;
float:left;
margin-right:10px;
position:relative;
letter-spacing:2px;
}
#pMenu li li{
width:100%;
padding-top:1px;
margin-right:2px;
text-align:left;
list-style:square;
list-style-position:inside;
min-width:140px;
letter-spacing:1px;
}
#pMenu a{text-decoration:none;}
#pMenu li>a{
color: #FFF;
text-shadow:1px 1px 3px #000;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#000000')";
min-width:50px;
padding:3px;
border:5px groove #BB0013;
font-size:16px;
font-weight:bold;
/*begin main gradient*/
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
/*end main gradient*/
}
#pMenu a:hover, #pMenu li:hover a, #pMenu a:active, #pMenu li:active a{
color:#FF0;
/*begin hover gradient top level*/
background: #a0030b; /* Old browsers */
background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
}
#pMenu div{
left:-999em;
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{left:0;}
#health{width:275px;}
#insurance{margin-left:-30px; width:260px;}
#general{margin-left:-78px; width:280px;}
#dating{margin-left:-87px; width:200px;}
#education{margin-left:-108px; width:225px;}
#pLegal{margin-left:-181px; width:225px;}
#pMenu li:hover li a{
color:#039;
text-decoration:underline;
text-shadow:none;
background:none;
filter:none;
border:none;
font-size:12px;
display:inline;
}
#pMenu li:hover li a:hover, #pMenu li:hover li a:focus, #pMenu li:hover li a:active{
text-decoration:none;
color:#069;
}
#pMenu div a:hover, #pMenu div a:focus, #pMenu div a:active{
color:#0F0;
background:none;
filter:none;
border:none;
}
#pMenu h3, #pMenu h2{margin:0;}
#pMenu li li{padding:0 2px 0 0;}
#pMenu h2{
font-style:bold;
text-align:left;
font-size:14px;
padding-left:3px;
}
#pMenu li:hover h2 a{color:#333399; background:none; filter:none; text-decoration:underline;}
#pMenu li:hover h2 a:hover, #pMenu li:hover h2 a:active, #pMenu li:hover h2 a:focus{color:#33C; text-decoration:none;}
#pMenu h3{
text-align:left;
color:#000000;
font-size:13px;
padding-left:20px;
}
#pMenu li:hover h3 a{color:#333399; background:none; text-decoration:underline;}
#pMenu li:hover h3 a:hover, #pMenu li:hover h3 a:active{color:#33C; text-decoration:none;}
#pMenu h3 span{
display:list-item;
list-style-type:disc;
list-style-position:inside;
}
/******************/
/*End Personal Nav*/
/******************/
/**************/
/*BIZ NAV MENU*/
/**************/
#bMenu{
background:url(bMenuBG.gif) no-repeat scroll 50% 82px transparent;
width:560px;
margin:0 auto;
height:78px;
padding-top:100px;
z-index:40;
}
#bMenu li{
list-style:none;
float:left;
position:relative;
margin-right:11px;
letter-spacing:2px;
}
#bMenu ul{margin:0; padding:0;}
#bMenu h2{margin:0;}
#bMenu li li{padding-top:0; padding-bottom:0; margin:0;}
#bMenu a{text-decoration:none;}
#bMenu li>a{
color: #FFF;
/*text shadow*/
text-shadow:1px 1px 3px #000;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);
font-weight:bold;
width:auto;
padding:3px;
border:5px groove #09F;
font-size:16px;
/*main gradient*/
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #5578e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#5578e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#5578e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#5578e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#5578e0 100%); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#5578e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#5578e0',GradientType=0 ); /* IE6-9 */
}
#bMenu li:hover a, #bMenu a:hover, #bMenu li:active a, #bMenu a:active{
color:#FF0;
/*main hover gradient*/
background: #738fdd; /* Old browsers */
background: -moz-linear-gradient(top, #738fdd 0%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#738fdd), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #738fdd 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #738fdd 0%,#1e5799 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #738fdd 0%,#1e5799 100%); /* IE10+ */
background: linear-gradient(top, #738fdd 0%,#1e5799 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#738fdd', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}
#bMenu li li{
width:100%;
padding-top:1px;
padding-bottom:1px;
margin-left:2px;
text-align:left;
list-style:square;
list-style-position:inside;
letter-spacing:1px;
}
#bMenu li:hover div{left:0;}
#bMenu div{
left:-999em;
bottom:25px;
position:absolute;
padding:4px;
border:2px solid #003;
/*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 */
}
#bMenu li:hover li a{
color:#039;
text-decoration:underline;
text-shadow:none;
background:none;
filter:none;
border:none;
font-size:12px;
display:inline;
}
#bMenu li:hover li a:hover, #bMenu li:hover li a:focus, #bMenu li:hover li a:active{
text-decoration:none;
color:#069;
}
#bMenu div a:hover, #bMenu div a:focus, #bMenu div a:active{
color:#0F0;
background:none;
filter:none;
border:none;
}
#bMenu h2{
font-style:bold;
text-align:left;
font-size:14px;
padding-left:3px;
}
#bMenu li:hover h2 a{color:#333399; background:none; filter:none; text-decoration:underline;}
#bMenu li:hover h2 a:hover, #bMenu li:hover h2 a:active, #bMenu li:hover h2 a:focus{color:#33C; text-decoration:none;}
#bMenu h3{
text-align:left;
font-size:13px;
padding:4px 0 0 25px;
color:#000000;
margin:2px 0 2px 0;
}
#bMenu li:hover h3 a{color:#333399; background:none; text-decoration:underline;}
#bMenu li:hover h3 a:hover, #bMenu li:hover h3 a:active, #bMenu li:hover h3 a:focus{color:#33C; text-decoration:none;}
#bMenu h3 span{
display:list-item;
list-style-type:disc;
list-style:disc;
list-style-position:inside;
}
#bizopps{width:260px; z-index:3;}
#bizservices{width:280px; margin-left:-68px; z-index:3;}
#bLegal{width:240px; margin-left:-121px; z-index:3;}
/**************/
/**End Biz Nav*/
/**************/
#wrapper{height:auto; width:auto; background:url("homepagedivider.gif") no-repeat 50% 20px;}
Okay - when CSS is being used for hover techniques, JavaScript cannot override the CSS in that regard.
It looks to be a nice CSS menu that you have there, and I do believe that with some tweaking it can work much better for you.
So I’ll send this thread over to the CSS forum because I believe that some people there may be able to help you better to find a solution for your problem.
You can use CSS3 transitions to delay the drop menu. E.g.:
Won’t work in older browsers, but WTH …
Just for fun, I wanted to try that CSS3 myself. I’ve used it with Paul O’Brien’s dropdown:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Drop down with delay</title>
<style type="text/css">
body {font: 100% Verdana, Arial, Helvetica, sans-serif;}
#nav {margin-bottom: 30px;}
#nav:after {content:""; display:table; clear:both;}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width:149px;
}
#nav li ul {
position: absolute;
top: auto;
left:0;
}
ul#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #ffffcc;
padding: 5px;
border: 1px solid #ccc;
margin-bottom:-1px;
min-height:0;
}
#nav li:hover a,#nav li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
color: #fff;
background-color: red;}
#nav li:hover li a,#nav li.over li a {
color: #777;
background-color: #ffffcc;
}
#nav li ul li a { padding: 2px 5px; }
/* the CSS from greywyvern */
#nav li > ul {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
#nav li:hover > ul {
visibility:visible;
opacity:1;
transition-delay:0s;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
<p>Dropdown example by <a href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm">Paul O'Brien</a>, modified for hover delay based on this <a href="http://www.greywyvern.com/?post=337">greywyvern post</a>.</p>
</body>
</html>
In the case of the original post, it would look something like this:
#pMenu li > div {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
#pMenu li:hover > div {
visibility:visible;
opacity:1;
transition-delay:0s;
}
Hoever, the current JS needs to be removed, which otherwise can be done with CSS (for testing purposes):
#pMenu div {
left: 0 !important; display: block !important;
}
Well, that certainly is an interesting transition property to play with in CSS.
It doesn’t help accomplish my goal of allowing a short time period before the menu fades away, which won’t annoy visitors if their mouse leaves the div area for a quick second, which they’ll immediately lose view of the drop-down options.
When the user’s mouse leaves the div area, the child links are taking on the styles of the main-level links (red blocks with groove borders). I’m confident I can figure that out as it most likely is the target specified for the child links.
Edit: Still trying to obtain the effects… unsuccessfully, with the following styles:
#pMenu li > div{
visibility:hidden;
opacity:0;
transition-delay:3s;
transition:visibility 1s linear 0.5s,opacity 0.5s 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:0s;}
I updated the files on the live site, so you can see the behavior.
Edit: I am still not seeing the time elapse after the mouse leaves the area.