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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2010
    Posts
    198
    Thanks
    78
    Thanked 5 Times in 5 Posts

    hoverIntent delay subnav hover out

    Hi guys,

    I need some help I made a menu with css and added some jquery to delay the menu hovers.
    It works but when I hover off the dropdown menus the are immediately hidden again, how can I delay this?

    I'm using this jquery plugin:
    http://cherne.net/brian/resources/jq...verIntent.html

    And this is my code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" dir="ltr" lang="en-gb">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    	<meta http-equiv="content-language" content="en-gb" />
    	<script language="javascript" type="text/javascript" src="/js/jquery-1.7.min.js"></script>
    	<script type="text/javascript" src="/js/hoverIntent.minified.js"></script>
    <script type="text/javascript">	
    $(document).ready(function()
    {
    	$('#navagation-top').removeClass('css-hoverState');
    
    	var config = {
    		sensitivity: 3,
    		interval:  200, 
    		over: doOpen, 
    		timeout: 100,
    		out: doClose 
    	};
    	
    	function doOpen() {
    		$(this).addClass('css-hoverState');
    	}
    	function doClose() {
    		$(this).removeClass('css-hoverState');
    	}
    	$('#navagation-top').hoverIntent(config);
    }); 
    </script>
    <style type="text/css">
    a:link, a:visited, a { color: #000; text-decoration: none;}
    
    /* begin navagation */
    #navagation-top  {
    	display: inline-block;
    	height: 22px;
    	margin:  0px;
    	padding: 0px;
    	list-style-type: none;
    	background: #d8d8da;
    	border: 1px solid #000;
    	border-right: none !important;
    }
    #navagation-top ul,
    #navagation-top li {
    	float: left;
    	font-size: 10px;
    	font-family: verdana;
    	padding: 0;
    	margin:  0;
    	list-style-type: none;
    }
    #navagation-top li {
    	position: relative;
    }
    #navagation-top li:hover {
    	background: #3f49a1;
    }
    #navagation-top a,
    #navagation-top a:link,
    #navagation-top a:visited {
    	border-top: 1px solid #ffffff;
    	color: #000000;
    	text-decoration: none;
    }
    #navagation-top a:hover,
    #navagation-top a:active,
    #navagation-top li:hover > a {
    	border-top: 1px solid #7b82bf;
    	color: #ffffff;
    	text-decoration: underline;
    }
    #navagation-top li a {
    	display: block;
    	padding: 5px 15px;
    	border-right: 1px solid #000;
    }
    #navagation-top li .subnav {
    	position: absolute;
    	top:  22px;
    	left: -3px;
    	float: left;
    	padding: 5px 0px 0px 0px;
    	background: #3f49a1;
    	border: 1px solid #000;
    	border-top: none !important;
    }
    #navagation-top li .reverse {
    	position: absolute;
    	top:  22px;
    	left: auto !important;
    	right: -3px !important;
    }
    #navagation-top li .subnav li,
    #navagation-top li .subnav li a {
    	min-width: 120px;
    	float: left;
    	clear: both;
    	display: block;
    	background: #d8d8da;
    	border-right: none !important;
    }
    #navagation-top li .subnav {
    	display: none;
    }
    #navagation-top li .subnav a,
    #navagation-top li .subnav a:link,
    #navagation-top li .subnav a:visited {
    	border: none;
    	border-bottom: 1px solid #ffffff;
    }
    #navagation-top li .subnav a:hover,
    #navagation-top li .subnav a:active {
    	color: #000000;
    	border: none;
    	border-bottom: 1px solid #ffffff;
    }
    #navagation-top.css-hoverState li:hover .subnav {
    	color: #000000;
    	display: block;
    }
    </style>
    </head>
    <body>
    <ul id="navagation-top" class="css-hoverState">
    	<li>
    		<a rel="nofollow" href="#">cat</a>
    		<ul class="subnav">
    			<li><a rel="nofollow" href="#">sub</a></li>
    			<li><a rel="nofollow" href="#">sub</a></li>
    			<li><a rel="nofollow" href="#">sub</a></li>
    			<li><a rel="nofollow" href="#">sub</a></li>
    			<li><a rel="nofollow" href="#">sub</a></li>
    		</ul>
    	</li>
    	<li>
    		<a rel="nofollow" href="#">cat</a>
    		<ul class="subnav">
    			<li><a rel="nofollow" href="#">sub</a></li>
    			<li><a rel="nofollow" href="#">sub</a></li>
    			<li><a rel="nofollow" href="#">sub</a></li>
    			<li><a rel="nofollow" href="#">sub</a></li>
    		</ul>
    	</li>
    	<li>
    		<a rel="nofollow" href="#">cat</a>
    		<ul class="subnav reverse">
    			<li><a rel="nofollow" href="#">sub</a></li>
    			<li><a rel="nofollow" href="#">sub</a></li>
    		</ul>
    	</li>
    </ul>
    </body>
    </html>
    Thanks for any help.

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    This is because of this selector:
    Code:
    #navagation-top.css-hoverState li:hover .subnav {
    When you take away the mouse pointer, the :hover pseudo-class is no more applicable, and the submenus hide immediately in spite of the ".css-hoverState" class presence.

    Try to modify your code in the following way:

    Javascript initialization:
    Code:
    $('#navagation-top > li').hoverIntent(config);
    CSS selector:
    Code:
    #navagation-top .css-hoverState .subnav {
    (note the space before the .css-hoverState part of the selector)

    The effect is particularly noticeable if you increase the timeout.
    I am still learning English


  •  

    Posting Permissions

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