Jquery 实现简单的菜单导航

作者:朋克周 | 创建时间: 2023-06-13
下拉菜单导航是一个网站的简易网站地图,起着引导访客的作用,用Jquery实现简单的菜单,实现的原理:鼠标是否通过顶层菜单,如果动作发生,则触发下层菜单的显示,如果鼠标从顶部移出,底部菜单收回。...
Jquery 实现简单的菜单导航

操作方法

利用Jquery的ready函数实现整个页面的加载完成后执行动作。$(function(){});是$(document).ready(function(){});的简写

在function内部实现鼠标进入事件,以及所有下拉效果的实现。

停止播放所有的特效动画,隐藏子菜单(图为js代码)

获取子集菜单,重新设置菜单位置(图为html代码)

停掉子集菜单动作并触发下拉(图为css代码)

主菜单的鼠标移出动作,让子菜单收起

快来看看菜单效果图吧

温馨提示

在获取当前焦点的子集菜单时的获取方式
触发子集菜单收起是的动作
点击展开全文

更多推荐