CODEWITHSUNDEEP
javascriptmenuhovernav
Jack Cash
Jack Cash

Reputation: 149

Hover menu behaving eratically

I have built a simple hover menu. Working example here

When the user scroll from the left to the right a little to quicky, or hits the padding and not the grey part the menu slides down and then up and down again.

I want it to make it seamless for the user. So that when they hover over the menu at all times it works.

You can see what I mean in my example if you play around mousing over.

IS there a way to make this work flawlessly and as expected?

$(document).ready(function($) {
    $("#mmenu").hide();
    $("#main-menu").hover(function() {
        $("#mmenu").slideToggle(500);
    });
});
#main-menu{
	background:#fff url(http://www.tzelan.com/wordpress/wp-content/uploads/2015/02/menu-black-bg.png) center center no-repeat;
	background-size: 9px 39px;
	border: 1px solid #b5b5b5;
	border-bottom:none;
	-webkit-border-radius: 5px 0 0 0;
	border-radius: 5px 0 0 0;
	position: absolute;
	left: 50px;
	text-align: center;
	top: 50px;
	vertical-align: middle;
	width: 25px;
	z-index:999;
	cursor:pointer;
	min-height: 100px;
}

#main-menu:after {
	background: url("http://www.tzelan.com/wordpress/wp-content/uploads/2015/01/menu-bottom-arrow.png") no-repeat scroll center bottom;
	bottom: -11px;
	content: "";
	display: block;
	height: 24px;
	left: -1px;
	position: absolute;
	width: 27px;
	z-index: 999;
}

#main-menu #mmenu{
	display: none;
	list-style: outside none none;
	position: relative;
	left: 0px;
	top:-5px;
	text-align: left;
	width: 275px;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 2px;
	font-family:"Apercu Light", Calibri, sans-serif; font-size-adjust:0.508; font-weight:200; font-style:normal;
}

#main-menu #mmenu li{
	height: 25px;
	line-height: 25px;
	padding:7px 0 0;
}

#main-menu #mmenu li a{
	background-color: #948f8f;
	color:#fff;
	text-decoration:none;
	text-align:left;
	padding:0 10px;
	display:block
}

#main-menu #mmenu li a:hover{
	background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
	<nav id="main-menu">

		<ul id="mmenu">
			<li><a href="#">Our Vision</a></li>
			<li><a href="#">Friends & Family</a></li>
			<li><a href="#">Studio Collection</a></li>
			<li><a href="#>Collected Curios</a></li>
			<li><a href="#">Live With Us</a></li>
			<li><a href="#">The Fifth Quarterly Publication</a></li>
		</ul>
	</nav>
</div>

Upvotes: 0

Views: 65

Answers (2)

Jack Cash
Jack Cash

Reputation: 149

I could never get the setTimeout and clearTimeout to work but I did get 99% close using stop

The code I used for those who may be looking is:

$(document).ready(function($) {
    $("#mmenu").hide();
    $("#main-menu").hover(function() {
        $("#mmenu").stop(true).slideToggle(500);
    });
});

The only thing that happens is if the user scrolls quickly over the menu the hover does not finish so the they have to keep their mouse on the menu untill the hover is finished.

If there was a way to force the animation to fully load and then stop then it would be perfect, but I think that is just nitpicking

Upvotes: 0

Matt K
Matt K

Reputation: 4948

The problem is a slideToggle is triggered for EVERY hover event. What you probably want to do is throttle those events every 500ms. You need to think of exactly how you want it to work. What happens when someone moves across it? Do you want them to rest their cursor on the menu for a little bit before it opens? What happens when they remove their cursor? After how long? setTimeout and clearTimeout will be your friends.

PS, how will cell phones use it?

Upvotes: 1

Related Questions