我正在使用Jason Weaver出色的flexnav菜单。我对原始代码所做的更改是使它成为标头中的粘性菜单。平板电脑和电话设备上的菜单运行正常。它在宽度超过800像素的桌面上的下拉菜单正在闪烁,并且没有从其预期的ul或li项目中下拉。我首先设置的prototype正常工作,但是此代码没有固定菜单的规定。 production页的菜单已修复,这是我遇到的问题。
以下是两个页面之间的区别:
原型代码:
.flexnav {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
transition: none;
-webkit-transform-style: preserve-3d;
overflow: hidden;
margin: 0 auto;
width: 100%;
max-height: 0;
}
生产差异代码:
position: fixed;
原型代码:
.flexnav.flexnav-show {
max-height: 2000px;
opacity: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
生产差异代码:
margin-top: 55px;
z-index: 5;
原型代码:
.menu-button {
position: relative;
display: block;
padding: 1em;
background: #ff8400;
color: #222222;
cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
生产差异代码:
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 99;
添加了仅针对生产代码的媒体查询:
@media all and (min-device-width: 481px) {
.flexnav-show {
margin-top: 0px !important; } }
谢谢
-索耶尔
最佳答案
从here:
通过以下方式将flexnav插件与hoverIntent插件一起使用:
$(".flexnav").flexNav({
'animationSpeed' : 'fast',
'calcItemWidths': true , // dynamically calcs top level nav item widths
'hoverIntent': true, // true for use with hoverIntent plugin
'hoverIntentTimeout': 150 // hoverIntent default timeout
});
而且您必须下载hoverIntent插件才能使用它,因为flexnav插件中不包含它。
关于jquery - flexnav菜单闪烁问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25857180/