【前言】
简单介绍下如何利用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垂直下拉二级导航菜单 jQuery垂直下拉二级导航菜单 jQuery垂直下拉二级导航菜单 jQuery垂直下拉二级导航菜单
jQuery下拉二级菜单导航带图片 jQuery下拉二级菜单导航带图片 jQuery下拉二级菜单导航带图片 jQuery下拉二级菜单导航带图片
**jQuery绿色二级下拉导航菜单**是一款适用于医院网站的网页导航设计,其特色在于绿色的界面风格,提供了良好的用户体验和视觉效果。这款导航菜单在用户交互时能够实现平滑的滑动效果,使得网站的层级结构更加清晰...
jQuery个性动画二级下拉导航菜单基于jquery1.8.3.min.js制作,鼠标经过显示二级下拉菜单。
在本主题中,我们将深入探讨如何使用jQuery制作垂直二级下拉栏目导航菜单特效。这个特效能够提升用户体验,使得二级菜单在鼠标悬停时优雅地展现,增强了网站的交互性。 首先,我们来看"index.html"文件,这是网页的...
jquery特效二级导航下拉菜单效果源码下载 jquery特效二级导航下拉菜单效果源码下载 jquery特效二级导航下拉菜单效果源码下载
本主题将深入探讨如何使用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垂直二级导航菜单代码
【jQuery蓝色圆角横向二级导航菜单代码】是一个用于创建具有美观设计和交互功能的网站导航栏的实现。这个代码利用了jQuery库的强大功能,结合HTML、CSS和JavaScript,为用户提供了一个直观且易于操作的二级菜单。...
jquery实现二级菜单导航支持超多内容代码
本篇将深入探讨如何利用jQuery来实现精美二级菜单,以提升网页的美观性和用户体验。 首先,理解HTML基础结构是至关重要的。二级菜单通常包含一个主菜单和多个子菜单项。主菜单项通常在鼠标悬停时显示其对应的子菜单...
巧克力jQuery横向二级滑动导航菜单源码,过度平滑,兼容主流浏览器
从国外收费网站翻译过来的一款多种二级下拉菜单导航样式,二级导航菜单支持多种自定义内容,例如:图片列表,登陆注册信息,二级下拉导航条等等
jquery实现二级导航,里面包括html,css和javascript代码,下载下来就可以直接使用。
jquery实现的二级下拉菜单效果