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

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-05-17
  • 2022-12-23
  • 2021-06-06
  • 2021-12-22
  • 2022-02-25
  • 2021-06-01
猜你喜欢
  • 2021-12-12
  • 2021-09-17
  • 2021-10-01
  • 2021-11-02
  • 2021-05-18
相关资源
相似解决方案