html - Hold back jquery event-handler for few miliseconds -
i creating navigation menu. it's still sorta buggy. stuck how fine-tune it. here problems may have answers solve them.
the menu (about me | portfolio | blog | contact me) triggered, mean quick passing-by hover can trigger them. how can hold trigger (the mouseenter) few milliseconds (say 200ms) futile unpurposed quick passing-by hover won't trigger menu work, mean, user has hover on menu @ least 200ms or if it's less 200ms menu won't triggered? how?
the submenu (portfolio 1 | portfolio two) sometimes, when parent's hovered, 1 of them leaves while other 1 still stays, shudderedly. guess it's because failed easily-triggered menu portolfio hover affects children; hence need hold-back of menu children won't fade in , fade out recklessly , clutteredly.
great thanks!
here fiddle link: https://jsfiddle.net/herza/ut5nldpa/
here code mix:
--------------html--------------------
<nav id="menu"> <ul> <li> <a href="#"> <p>about me</p> <div></div> </a> </li><!-- --><li id="portfolio" > <a> <p>portfolio</p> <div></div> </a> <ul> <li id="one-port"> <a href="#">portfolio one</a> </li> <li id="two-port"> <a href="#" >portfolio two</a> </li> </ul> </li><!-- --><li> <a href="#" > <p>blog</p> <div></div> </a> </li><!-- --><li> <a href="#" > <p>contact me</p> <div></div> </a> </li> <ul> </nav> ---------------css-----------------
nav#menu .current {background-color: black; color: white;} nav#menu > ul {margin: 0; padding: 0;} nav#menu > ul > li {display: inline-block; list-style: none; position: relative;} nav#menu > ul > li > {text-decoration: none; display: block; padding: 0; height: 62px; width: 130px; text-align: center; font-family: "roboto-light"; line-height: 55px; color: black; font-size: 16px; cursor: pointer; overflow: hidden;} nav#menu > ul > li > > p {display: block; width: 100%; height: 62px; margin: 0; padding: 0; background-color: green;} nav#menu > ul > li > > div {display: block; width: 100%; height: 62px; margin: 0; padding: 0; background-color: black; background-image: url(https://lh3.googleusercontent.com/3mjfqfk6qv2x2rzhfdgrugeelc7r4khigzliqmqkzqqrmdm13zor2zptbf3vmyagahrza4gt3zcb4vu=w1342-h479); background-size: auto; background-repeat: no-repeat; background-position: center center;} nav#menu > ul > li > ul {position: absolute; left: 0px; padding: 0px; margin: 0px; width: 200px; height: 0px; background-color: white; display: block; } nav#menu > ul > li > ul > li {list-style: none} nav#menu > ul > li > ul > li > {display: block; padding: 15px 10px 15px 35px; background-color: white; color: black; text-decoration: none; font-family: "roboto-light"; font-size: 16px; background-color: blue;} nav#menu > ul > li > ul > li { position: absolute; width: 100%; border: 0; left: 100px; display: none;} nav#menu > ul > li > ul > li#one-port {top: 0px; z-index: 36;} nav#menu > ul > li > ul > li#two-port {top: 49px; z-index: 35;} nav#menu > ul > li > ul > li#one-port > {border-bottom: 1px solid black;} -------------------- jquery --------------------------------
$(document).ready(function(){ $("nav > ul > li").mouseenter(function(){ $(this).children("a").children("p").animate({margin: "-62 0 0 0"},300); }) $("nav > ul > li").mouseleave(function(){ $(this).children("a").children("p").animate({margin: "0 0 0 0"},300); }) $("nav > ul > li#portfolio").mouseenter(function(){ $(this).children("ul").contents().clearqueue(); $(this).children("ul").children("li#one-port").delay(0).queue(function(){ $(this).animate({left: "0"},{queue: false, duration: 400}) $(this).fadein({queue: false, duration: 400}); $(this).dequeue(); }) $(this).children("ul").children("li#two-port").delay(250).queue(function(){ $(this).animate({left: "0"},{queue: false, duration: 400}) $(this).fadein({queue: false, duration: 400}); $(this).dequeue(); }) }) $("nav > ul > li#portfolio").mouseleave(function(){ $(this).children("ul").contents().clearqueue(); $(this).children("ul").children("li#one-port").delay(0).queue(function(){ $(this).animate({left: "100"},{queue: false, duration: 400}) $(this).fadeout({queue: false}); $(this).dequeue(); }) $(this).children("ul").children("li#two-port").delay(250).queue(function(){ $(this).animate({left: "100"},{queue: false, duration: 400}) $(this).fadeout({queue: false}); $(this).dequeue(); }) }) })
i know found solution hoverintent plugin, fine, allow me share solution uses no javascript @ all, few css transitions. has quite few advantages:
- no need load kb's javascript
- will degrade gracefully, users without javascript see same menu
- css transitions better optimized, give smoother animation
- you can stick cheap properties
translate,opacity, not require repaint. again, better performance. can done in jquery well, not without adding yet plugin allows animatetransformproperties.
without further ado, this came with. know not exact replica, have fiddle numbers bit, consider proof of concept. actual code surprisingly simple:
html:
<nav> <ul> <li><a href="#">about me</a></li> <li><a href="#">portfolio</a> <ul> <li><a href="#">web design</a></li> <li><a href="#">digital illustration</a></li> </ul> </li> <li><a href="#">blog</a></li> <li><a href="#">contact me</a></li> </ul> </nav> css:
/* general */ nav { text-align: center; display: block; color: black; text-decoration: none; padding: 18px; } nav ul { list-style: none; } /* main menu */ nav > ul > li { display: inline-block; vertical-align: middle; position: relative; } nav > ul > li > { background: green; overflow: hidden; position: relative; } nav > ul > li > a:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: black; transform: translate(0, 100%); transition: transform .4s .2s; } nav > ul > li:hover > a:after { transform: translate(0,0); } /* sub menu */ nav > ul > li > ul { position: absolute; top: 100%; } nav > ul > li > ul > li > { white-space: nowrap; background: blue; transform: translate(100%, 0); opacity: 0; transition: transform .4s .3s, opacity .4s .3s; } nav > ul > li:hover > ul > li > { transform: translate(0, 0); opacity: 1; } /* repeat each sub item add, increasing child number (2) , adding .2s delay. can automated css preprocessor sass or less */ nav > ul > li > ul > li:nth-child(2) > { transition-delay: .5s; } as said, code quite straight forward, feel free ask if want me explain anything.
Comments
Post a Comment