Question

我正在创建导航菜单。但它仍然有点儿。我被困在如何完全微调它。以下是您可能有解决问题的答案。

菜单（关于我|投资组合|博客|联系我）很容易被触发，我的意思是即使是非常快速的传递悬停也可以触发它们。我怎样才能阻止触发器（鼠标中心）几毫秒（比如200毫秒），这样无用的未使用的快速通过悬停就不会触发菜单工作，我的意思是，用户真的必须悬停在菜单至少200毫秒或如果它不到200毫秒菜单不会被触发？怎么样？
子菜单（投资组合一|投资组合二）有时，当他们的父母徘徊时，其中一人已经离开，而另一人仍然停留在那里，一阵颤抖。我想这是因为失败的易触发菜单portolfio也会影响其孩子;因此我需要对菜单进行保留，这样它的孩子们就会不知所措地褪色并且浑浑噩噩地消失。

非常感谢！

以下是小提琴链接：https://jsfiddle.net/Herza/ut5nLdpa/

以下是代码组合：

-------------- 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 > a {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 > a > p {display: block; width: 100%; height: 62px; margin: 0; padding: 0; background-color: green;}
nav#menu > ul > li > a > 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 > a {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 > a {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();
        })      
    })
})

Answer 1

我知道你已经找到了一个使用hoverintent插件的解决方案，这很好，但是请允许我分享使用完全没有javascript 的解决方案，只需几个css转换。这有很多优点：

无需为javascript
会优雅地降级，即使没有javascript的用户也会看到相同的菜单
css过渡更好地优化，这将提供更流畅的动画
您可以坚持translate opacity和transform，这不需要重新绘制。再次，更好的表现。这也可以在jQuery中完成，但不能添加另一个允许您为<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>属性设置动画的插件。

不用多说，cheap properties。我知道它不是一个精确的复制品，你将不得不摆弄一些数字，但认为它是一个概念证明。实际的代码非常简单：

<强> HTML：

/* general */
nav a {
    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 > a {
    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 > a {
    white-space: nowrap;
    background: blue;
    transform: translate(100%, 0);
    opacity: 0;
    transition: transform .4s .3s, opacity .4s .3s;
}
nav > ul > li:hover > ul > li > a {
    transform: translate(0, 0);
    opacity: 1;
}

/* repeat this for each sub item you add, increasing the child 
   number (2) and adding .2s to the delay. Can be easily automated 
   with a css preprocessor like sass or less
*/
nav > ul > li > ul > li:nth-child(2) > a {
    transition-delay: .5s;
}

<强> CSS：

<html ng-app="main.app">

<head>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script>
  angular.module('main.app', [])
  .controller('HelloController', function () {
    var self = this;

    this.greeting = { text: "Hello" };
})

</script>
</head>

 <body ng-controller="HelloController as HelloCtrl">
   <p>{{HelloCtrl.greeting.text}}, World</p>
 </body>

</html>

正如我所说，代码非常简单，但您可以随意询问是否要我解释任何内容。

阻止jquery事件处理程序几毫秒

1 个答案: