简单的动态下拉菜单

说明:在我们设置的导航栏中,如果导航菜单中包括下拉菜单,则当我们移动鼠标到导航菜单选项时,就会显示下拉菜单的信息,反之,当我们的鼠标移动到导航选项外时,下拉菜单就会隐藏。
1、 把下拉菜单列表包含在导航菜单项中,我们可以给导航菜单设置自己想要的一些样式。
在这里插入图片描述
2、 在这里我引用了一个jQuery插件,主要是要运用到它。下拉菜单在我们默认的隐藏下,通过jQuery的事件方法下获取导航菜单项并进行遍历。在遍历是我们先判断每个导航菜单是否包含下拉子菜单,如果包含则为该菜单项定义一个背景颜色,作为提示。同时再为菜单项绑定两个事件处理函数。当移过时,则定义包含的下拉菜单列表显示;移出时,则定义所包含的下拉菜单列表隐藏。
应用到的插件:
在这里插入图片描述
JS代码:
在这里插入图片描述
移过菜单项时的效果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值