【前言】
简单介绍下如何利用jQuery实现二级导航
本文主要通过两种方案实现
注意：hover = mouseenter + mouseleave
补充：（mouseover：当鼠标指针位于元素上方时，会发生 mouseover 事件。 mouseenter:当鼠标指针穿过元素时，会发生 mouseenter 事件。
从这里的一个小插曲上，我们应该可以看出，mouseenter是穿过，所以只能触发一次改事件，而mouseover是位于上方，可以想下，如果给div设定了一个mouseover事件，其子孙后代都可以响应改事件，so...一旦鼠标从父级进入自己也会触发这个效果，当从子集回到父级也会触发这种效果。所以，你可以这么理解：mouseenter事件只作用于目标元素，而mouseover作用于目标元素及其后代元素。）
【主体】
（1）利用jQuery的hover()方法
优点：可以实现过渡效果，并结合css3的动画，达到绚丽的效果
缺点：jQuery兼容局限性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width: 80%;
height: 40px;
line-height: 40px;
margin: auto;
}
.nav>li{
float: left;
min-width: 150px;
position: relative;
padding-bottom: 10px;
}
.nav>li>a{
display: block;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
text-align: center;
color: white;
}
.nav>li>ul{
position: absolute;
top: 50px;
background: rgba(0,0,0,0.2);
min-width: 150%;
left: -25%;
height: auto;
display: none;
}
.nav>li>ul>li>a{
text-align: center;
display: block;
width: 100%;
height: 100%;
color: white;
}
.nav>li>a:hover{
background: rgba(0,0,0,0.4);
}
/*.nav>li:hover ul{*/
/*display: block;*/
/*height: 200px;*/
/*}*/
.nav>li>ul>li>a:hover{
background: rgba(0,0,0,0.4);
}
</style>
<link rel="stylesheet" type="text/css" href="img/animate.css">
</head>
<body>
<!-- CSS实现的缺点很明显：二级导航无法实现过渡效果，高度变化由0变auto的过程和display由none变block一样，无法实现过渡。
注意：高度变化若想出现过渡效果，需要由0变到指定高度，如0-200px等才可以。 -->
<ul class="nav">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">简介</a>
<ul>
<li><a href="#">创建时间</a></li>
<li><a href="#">上市时间</a></li>
<li><a href="#">风投时间</a></li>
</ul>
</li>
<li>
<a href="#">应聘</a>
<ul>
<li><a href="#">技术岗</a></li>
<li><a href="#">管理岗</a></li>
<li><a href="#">人资岗</a></li>
</ul>
</li>
<li>
<a href="#">产品</a>
<ul>
<li><a href="#">产品名称</a></li>
<li><a href="#">产品来源</a></li>
<li><a href="#">产品功效</a></li>
<li><a href="#">市场效益</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".nav").children('li').hover(function() {
/* Stuff to do when the mouse enters the element */
$(this).children('ul').stop().addClass('animated rollIn').slideDown(400);
}, function() {
/* Stuff to do when the mouse leaves the element */
$(this).children('ul').stop().addClass('rollOut').slideUp(400,function(){
$(this).removeClass('animated rollIn rollOut')
});
});
})
</script>
</body>
</html>
（2）jQuery的鼠标移入移出事件，mouseenter和mouseleave事件，这里之所以不用mouseover和mouseout是因为该事件会产生冒泡，出现二级导航闪动的BUG
$(function(){
$(".nav").children('li').mouseenter(function(event) {
/* Act on the event */
$(this).children('ul').stop().addClass('animated rollIn').slideDown(400);
});
$(".nav").children('li').mouseleave(function(event) {
/* Act on the event */
$(this).children('ul').stop().addClass('rollOut').slideUp(400,function(){
$(this).removeClass('animated rollIn rollOut')
});
});
})
.
相关推荐
在网页设计中，导航菜单是用户与网站交互的重要部分，尤其在内容丰富的网站中，二级导航可以帮助用户更方便地找到所需信息。本教程将详细讲解如何利用jQuery来实现二级导航的切换效果，使得页面交互更加直观和友好。...
总的来说，"jQuery个性动画二级下拉导航菜单"是一个集功能性和美观性于一体的网页设计解决方案。它展示了jQuery如何与HTML和CSS协同工作，创建出动态且互动的用户界面，同时为开发者提供了可扩展和定制的基础框架。...
这个二级导航方案采用了媒体查询等响应式设计技巧，使得导航栏能够根据用户的设备类型自动调整布局和样式，以达到最佳的视觉效果和可用性。 此解决方案的一大亮点在于二级导航菜单支持多种自定义内容。这包括但不...
**jQuery绿色二级下拉导航菜单**是一款适用于医院网站的网页导航设计，其特色在于绿色的界面风格，提供了良好的用户体验和视觉效果。这款导航菜单在用户交互时能够实现平滑的滑动效果，使得网站的层级结构更加清晰...
jQuery作为一款强大的JavaScript库，提供了丰富的功能来简化DOM操作，实现动态效果，包括制作垂直下拉二级导航菜单。下面我们将详细探讨如何使用jQuery实现这种功能。 首先，我们需要理解基本的HTML结构。一个简单...
在这个项目中，jQuery被用来实现导航菜单的动态效果。通过使用jQuery，开发者可以编写简洁、高性能的代码，同时避免了跨浏览器的兼容性问题。 导航菜单的设计通常分为一级菜单和二级菜单。一级菜单通常显示主要的...
在本主题中，我们将深入探讨如何使用jQuery制作垂直二级下拉栏目导航菜单特效。这个特效能够提升用户体验，使得二级菜单在鼠标悬停时优雅地展现，增强了网站的交互性。 首先，我们来看"index.html"文件，这是网页的...
本主题将深入探讨如何使用jQuery来实现二级菜单，这是一种常见的网页交互效果，能帮助用户更高效地探索网站内容。 jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理以及动画效果。在实现二...
本项目利用jQuery库实现了具有二级菜单功能的导航条，结合CSS进行美化和增强浏览器兼容性，特别适配了IE7以上以及Chrome浏览器。 1. **jQuery基础** jQuery是一款轻量级、高性能的JavaScript库，简化了DOM操作、...
浅谈jQuery的应用.pdf 对于入门jquery很有帮助
本篇文章将深入探讨如何使用jQuery来实现一个功能完善的二级导航菜单。 首先，我们需要理解jQuery的基础。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。对于...
在这个黑色横向二级导航特效中，jQuery起到了关键作用，通过其强大的功能实现了平滑的过渡效果和动态的展开与收起功能。 实现这个特效，首先需要在HTML中构建基础结构，包括一级导航和二级导航的链接。这些链接通常...
`jQuery`作为一款强大的JavaScript库，提供了丰富的功能来实现动态效果，包括下拉二级菜单。在这个案例中，我们将深入探讨如何使用jQuery创建一个带有图片的下拉二级菜单导航。 首先，我们需要理解基本的HTML结构。...
总的来说，这个jQuery特效二级导航下拉菜单源码提供了一种简单而实用的方法，帮助开发者为他们的网站增添交互性。通过学习和应用这个源码，你可以提升网站的导航体验，使用户更加便捷地探索网站内容。同时，这也是一...
本文将深入探讨jQuery实现的后台左侧三级导航菜单的原理和应用。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果以及Ajax交互等任务。在构建后台导航菜单时，jQuery提供了丰富...
【jQuery蓝色圆角横向二级导航菜单代码】是一个用于创建具有美观设计和交互功能的网站导航栏的实现。这个代码利用了jQuery库的强大功能，结合HTML、CSS和JavaScript，为用户提供了一个直观且易于操作的二级菜单。...
《jQuery蓝色二级导航菜单》 在网页设计中，一个优秀的导航菜单可以极大提升用户体验，而jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现交互式的菜单效果。本项目"jQuery蓝色二级导航菜单"就是一个实例...
本篇将深入探讨如何利用jQuery来实现精美二级菜单，以提升网页的美观性和用户体验。 首先，理解HTML基础结构是至关重要的。二级菜单通常包含一个主菜单和多个子菜单项。主菜单项通常在鼠标悬停时显示其对应的子菜单...
在网页设计中，导航菜单是用户与网站交互的重要部分，尤其是一级和二级下拉菜单，它们能够有效地组织大量链接，使用户能快速找到所需信息。`jQuery` 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理...
本篇文章将深入探讨如何使用jQuery实现一个垂直二级导航菜单。 首先，让我们了解jQuery的基本概念。jQuery是由John Resig于2006年创建的，它的目标是简化JavaScript的DOM操作、事件处理和动画。jQuery的核心特性...