Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Mar 2010
    Posts
    198
    Thanks
    78
    Thanked 5 Times in 5 Posts

    hoverIntent delay hover out

    Hi guys
    I made dropdown menu with css and I would like to apply Jquery hoverIntent to make sure it delays the hover states.
    So far on mouse over the delay works but the mouse out is not applying.

    Thanks for any help.

    Here is my code:
    Code:
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN''http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
    <html xmlns='http://www.w3.org/1999/xhtml' dir='ltr' lang='en-gb' xml:lang='en-gb'>
    <head>
    	<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
    
    
    <!-- INCLUDED JQUERY HERE WITH HOVERINTENT PLUGIN -->
    	
    	
    	<script type='text/javascript'>
    	
    	
    	
    	
    	$(document).ready(function() {
    
    	
    	$("#nav #menu").hoverIntent({
    		interval: 600, 
    		over: drops_show, 
    		timeout: 800, 
    		out: drops_hide
    	});
    	$("#nav #menu").addClass('with-js');
    
    
    	
    	
    	
    	
    });
    function drops_show(){ $(this).addClass('show'); $(this).removeClass('with-js'); }
    function drops_hide(){ $(this).removeClass('show'); $(this).addClass('with-js'); }
    </script>
    	
    	
    </head>
    <body>
    				<div id="nav">
    	<div id="menu">
    		<ul>
    			<li class="level1 active"><a href='index.php'><b>Home</b></a></li>
    			<li class="level1 "><a class="sub" href='system.php'><b>Game Systems</b>
    				<!--[if gte IE 7]><!--></a><!--<![endif]-->
    				<!--[if lte IE 6]><table class="ie6"><tr><td><![endif]-->
    				<div class="holder">
    					<div class="leftSide">
    						<div class="rightSide">
    							<table cellspacing='10'>
    								<tr>
    									<td>
    										<dl>
    											<dt><a href='#url'>Game &amp; watch</a></dt>
    											<dd><a href="#url">link</a></dd>
    											<dt><a href='#url'>NES</a></dt>
    											<dd><a href="#url">link</a></dd>
    										</dl>
    									</td>
    									<td>
    										<dl>
    											<dt><a href='#url'>Game Boy</a></dt>
    											<dd><a href='#url'>Game list</a></dd>
    											<dt><a href='#url'>Super NES</a></dt>
    											<dd><a href='#url'>Game list</a></dd>
    											<dt><a href='#url'>Virtual Boy</a></dt>
    											<dd><a href='#url'>Game list</a></dd>
    											<dd><a href="#url">link</a></dd>
    											<dd><a href="#url">link</a></dd>
    										</dl>
    									</td>
    									<td>
    										<dl>
    
    
    											<dt>something</dt>
    											<dd><a href="#url">link</a></dd>
    											<dd><a href="#url">link</a></dd>
    											<dd><a href="#url">link</a></dd>
    											<dd><a href="#url">link</a></dd>
    											<dd><a href="#url">link</a></dd>
    										</dl>
    									</td>
    								</tr>
    							</table>
    						</div>
    					</div>
    				</div>
    				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    				</li>
    				<li><a class="sub" href="#url"><b>Special Offers</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    				<!--[if lte IE 6]><table class="ie6"><tr><td><![endif]-->
    				<div class="holder">
    					<div class="leftSide">
    						<div class="rightSide">
    						<table><tr>
    							<td>
    								<dl>
    									<dt>cat</dt>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dt>cat</dt>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    								</dl>
    							</td>
    							<td>
    								<dl>
    									<dt>cat</dt>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    								</dl>
    							</td>
    						</tr></table>
    						</div>
    					</div>
    				</div>
    				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    				</li>
    				
    				<li><a href="#url"><b>Contact Us</b></a></li>
    				
    				
    						<li class=""><a href='#url'><b>Register!</b></a></li>
    					
    						<li class=""><a href='#url'><b>Memberlist</b></a></li>
    				
    				
    				
    				<li><a href="#url"><b>Where to find us</b></a></li>
    				<li><a href='#url'><b>Faq</b></a></li>
    				<li class="right"><a class="sub" href="#url"><b>Accessories</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    				<!--[if lte IE 6]><table class="ie6"><tr><td><![endif]-->
    				<div class="holder">
    					<div class="leftSide">
    						<div class="rightSide">
    						<table><tr>
    							<td>
    								<dl>
    									<dt>cat</dt>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dt>cat</dt>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    								</dl>
    							</td>
    							<td>
    								<dl>
    									<dt>cat</dt>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dt>cat</dt>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dt>cat</dt>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    									<dd><a href="#url">link</a></dd>
    								</dl>
    							</td>
    							
    							<td>
    								<dl>
    									<dt>cat</dt>
    									<dd><a href="#url">link</a></dd>
    									<dt>cat</dt>
    									<dd><a href="#url">link</a></dd>
    								</dl>
    							</td>
    						</tr></table>
    						</div>
    					</div>
    				</div>
    				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    				</li>
    			</ul>
    		</div>
    
    	</div>
    			</div>
    	
    	
    
    
    </body>
    </html>

    My Css:

    Code:
    #nav {
    	height: 28px;
    	padding-left: 20px;
    	font-family: arial, sans-serif;
    	border: 1px solid red;
    }
    
    #menu.with-js .holder {
    	display: none !important;
    }
    
    #menu ul {
    	list-style-type: none;
    }
    
    #menu ul li {
    	float: left;
    	margin: 0px 5px;
    	background-color: #222222;
    	
    }
    
    #menu ul li.active {
    	background-color: #aaaaaa;
    }
    
    #menu ul li a {
    	display: block;
    	float: left;
    	padding: 0px 15px 0px 0px;
    	text-decoration: none;
    	color: #fff;
    	font-weight: bold;
    	font-size: 11px; 
    }
    
    #menu ul li a b {
    	display: block;
    	padding: 0px 0px 0px 15px;
    	text-decoration: none;
    	font-weight: bold;
    	line-height: 26px;
    	padding-bottom: 2px;
    	cursor: pointer;
    }
    
    #menu ul li .holder {
    	display: none;
    }
    
    #menu ul li div .leftSide {
    	float: left;
    	background-color: #dddddd;
    	border: 1px solid #000000;
    	-moz-border-radius-topleft	 : 5px;
    	-moz-border-radius-bottomleft: 5px;
    	border-top-left-radius	 : 5px;
    	border-bottom-left-radius: 5px;
    	-webkit-border-top-left-radius: 5px;
    	-webkit-border-bottom-left-radius: 5px;	
    	-khtml-border-top-left-radius: 5px;
    	-khtml-border-bottom-left-radius: 5px;
    }
    
    #menu ul li:hover .holder {
    	position: absolute;
    	top : 28px;
    	left: -5px;
    	margin : 0;
    	padding: 0;
    	display: block;
    }
    
    #menu ul li div .rightSide {
    	margin-left: 10px;
    	background-color: #aaaaaa;
    	border-left: 1px solid #000000;
    }
    
    #menu ul li:hover {
    	position: relative;
    }
    
    #menu ul li a:hover {
    	color: #910;
    	white-space: nowrap;
    	position: relative;
    	background-color: #aaaaaa;
    }
    
    #menu ul li a.sub:hover b {
    	color: #910;
    }
    
    #menu ul li:hover > a {
    	color: #910;
    	background-color: #aaaaaa;
    }
    
    #menu ul li:hover a.sub {
    	color: #910;
    	white-space: nowrap;
    	position: relative;
    }
    #menu ul li:hover a.sub > b {
    	color: #910;
    }
    
    #menu ul li.right a:hover div.holder {
    	left: auto;
    	right: 3px;
    	top: 28px;
    }
    
    #menu ul li.right:hover div.holder {
    	left: auto;
    	right: -1px;
    	top: 28px;
    }
    
    #menu ul dl {
    	width: auto;
    	margin: 5px 0px 10px 0px;
    	padding: 0px 5px;
    	list-style-type: none;
    }
    
    #menu ul dl dt {
    	padding: 0px 10px;
    	margin: 0;
    	line-height: 20px;
    	background: red;
    	border: 1px solid #000000;
    	color: #fff;
    	white-space: nowrap;
    	min-width: 100px;
    	display: inline-block;
    }
    
    #menu ul dl dt a:link,
    #menu ul dl dt a:visited {
    }
    
    #menu ul dl dt a:hover,
    #menu ul dl dt a:active {
    	text-decoration: underline;
    }
    
    #menu ul dd a {
    	display: block;
    	height: 20px;
    	line-height: 20px;
    	color:#421;
    	text-align: left;
    	margin: 0;
    	padding:0 10px;
    	font-weight: normal;
    	white-space: nowrap;
    	float: none;
    }
    
    #menu ul dd a:hover {
    	color: #c60;
    }

    edit:
    I think the problem is my css.
    When I add the following css:
    Code:
    #menu ul li:hover .holder,
    #menu.show .holder  {
    	display: block;
    }
    the on mouse out delay works however all menus will show up.
    Does anyone know how to solve this?
    Last edited by conware; 05-27-2011 at 12:48 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •