我是 jQuery 新手,我正在尝试解决导航问题。我构建了一个包含许多嵌套列表的垂直菜单。这纯粹是 CSS,但我的客户要求当您不再将鼠标悬停在当前打开的子菜单上时,它会保持打开状态一秒钟左右。
这是我正在处理的网站:http://dev.musgraveagencies.com/
这是他们当前拥有的网站,以及他们希望菜单如何延迟:http://www.musgraveagencies.com/
我相信我可以使用 jQuery 来实现此目的,但我希望网站在未启用 Javascript 的情况下按原样工作。
编辑:感谢大家的帮助!下面是最终代码。
我的 HTML:
<body class="nojs">
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Development Projects</a>
<ul>
<li><a href="#">Design Build</a>
<ul>
<li><a href="#">Interior Design</a>
<ul>
<li><a href="#">Project Example</a></li>
</ul>
</li>
<li><a href="#">Project Example 1</a></li>
<li><a href="#">Project Example 2</a></li>
<li><a href="#">Project Example 3</a></li>
</ul>
</li>
<li><a href="#">Industrial</a>
<ul>
<li><a href="#">Project Example 1</a></li>
<li><a href="#">Project Example 2</a></li>
<li><a href="#">Project Example 3</a></li>
<li><a href="#">Project Example 4</a></li>
</ul>
</li>
<li><a href="#">Residential</a></li>
<li><a href="#">Neighbourhood</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
我的CSS:
#nav {
width: 156px;
font: 9pt 'TeXGyreScholaRegular', Arial, sans-serif;
text-align: left;
}
#nav ul a {
color: #fff;
display: block;
overflow: auto;
line-height: 19pt;
text-indent: 2px;
}
#nav ul a:hover {
color: #fff;
text-decoration: none;
}
#nav ul li:hover {
background: #484848;
}
#nav ul {
width: 156px;
}
#nav ul li {
list-style: none;
background: #000;
position: relative;
z-index: 100;
}
#nav ul li ul {
position: absolute;
width: 156px;
top: 0;
left: 156px;
}
body.nojs #nav ul li ul {
display: none;
}
body.nojs #nav ul li:hover > ul {
display: block;
}
我的 jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#nav ul li ul').hide();
$('body').removeClass('nojs');
var config = {
sensitivity: 2,
interval: 200,
timeout: 700,
};
var animating = false;
$('#nav ul li').hoverIntent(
function () {
animating = true;
$('> ul', this).fadeIn(100, function() {
animating = false;
});
},
function () {
animating = true;
$('> ul', this).delay(400).fadeOut(200, function() {
animating = false;
});
});
});
</script>
最佳答案
代码的问题是,您使用 jQuery 触发过渡(淡入淡出),但立即使用 CSS 隐藏该元素。所以这会立即发生。
您可以使用transition-delay
或animation-delay
CSS3 的属性,但 IE 不支持这些属性。所有其他版本都支持它们,但大多数版本都不支持。
transition-delay: 2s;
-moz-transition-delay: 2s; /* Firefox 4 */
-webkit-transition-delay: 2s; /* Safari and Chrome */
-o-transition-delay: 2s; /* Opera */
因此,我认为您应该将大部分 CSS(悬停伪类)迁移到 javascript/jQuery 并使用 setTimeout()
延迟隐藏/显示方法或 jQuery 的 delay()
方法。
更新:
因为您担心用户的浏览器中是否未启用 javascript;如果没有 javascript 和 CSS 延迟相关属性,我认为不可能延迟 HTML 元素外观的更改。
所以你能做的是;
- 创建仅 CSS 版本的菜单(如果需要延迟,请使用过渡延迟和/或动画延迟 CSS3 属性)。如果浏览器不支持这些属性,唯一的缺点是您不会得到“延迟”,但您的菜单仍然可以工作。
- 创建 JavaScript 版本的菜单(使用 setTimeout 等方法进行延迟)。
- 使用
<noscript>
非 JavaScript 内容和纯 CSS 菜单的标签,并将它们放置在其中。
这样您就能让两个用户都满意。
关于jquery - 带有嵌套列表的 CSS 垂直菜单,在 MouseOut 上需要 jQuery 延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14368051/