jquery实现鼠标经过显示下划线的渐变下拉菜单效

本文将向您展示如何使用jQuery实现一个炫酷的下拉菜单效果，当您将鼠标悬停在菜单上时，下划线会跟随鼠标移动，并呈现出迷人的渐变效果。我们还会利用SuperSlide.2.1.js插件来实现滑动切换效果，让您的网站导航更加流畅和便捷。

让我们来看一下具体的实现步骤。我们创建一个带有黑红渐变色的网站下滑导航菜单。这个菜单非常灵敏，当您将鼠标悬停在主菜单上时，下滑线会自动跟随鼠标移动。如果您的菜单有两级子菜单，那么同样的下滑菜单和渐变效果也会出现在子菜单上。

要实现这个效果，我们需要借助jQuery这个强大的JavaScript库。通过jQuery的选择器和事件处理功能，我们可以轻松地控制菜单的显示和隐藏，以及鼠标移动时的交互效果。我们还需要使用一个自定义的封装插件——SuperSlide.2.1.js。这个插件可以帮助我们实现滑动切换效果，让菜单的展开和收起更加流畅。

在代码实现方面，我们首先需要引入jQuery库和SuperSlide插件。然后，我们可以使用CSS来设置菜单的样式和渐变效果。接下来，通过jQuery的选择器和事件处理功能，我们可以编写JavaScript代码来控制菜单的显示和隐藏，以及鼠标移动时的交互效果。具体来说，我们可以使用mouseenter和mouseleave事件来处理鼠标悬停时的状态变化，并使用animate函数来实现渐变效果。我们还可以利用SuperSlide插件提供的API来实现滑动切换效果。

运行效果展示如下：

您可以通过以下在线演示地址查看演示效果：

以下是该示例的具体代码：

```html

.h10 { height: 10px; } / 高度样式 /

.h15 { height: 15px; } / 高度样式 /

header { width: 1000px; margin: 0 auto; / 页面的头部样式 / }

.navBar { width: 1000px; margin: 0 auto; height: 50px; line-height: 50px; background: 000; color: fff; / 导航栏样式 / }

.nav { position: relative; width: 980px; margin: 0 auto; font-family: "Microsoft YaHei", SimSun, SimHei; font-size: 16px; / 主导航样式 / }

.nav a { color: fff; } / 链接颜色 /

.nav h3 { font-size: 100%; font-weight: normal; / 三级标题样式 / }

.nav .m { float: left; position: relative; z-index: 1; / 主菜单项样式 / }

.nav .s { float: left; width: 3px; text-align: center; color: D4D4D4; font-size: 14px; / 分隔线样式 / }

.nav h3 a { display: block; width: 120px; / 主菜单项链接样式 / }

.nav .sub { display: none; position: absolute; left: -3px; top: 50px; z-index: 1; width: 120px; border: 1px solid E6E4E3; / 子菜单样式 / }

.nav .sub li { text-align: center; padding: 0 8px; margin-bottom: -1px; / 子菜单列表项样式 / }

.nav .sub li a { display: block; border-bottom: 1px solid E6E4E3; padding: 8px 0; height: 32px; line-height: 32px; color: FE7700; / 子菜单链接样式 / }

.nav .block { height: 8px; width: 120px; background: FE7700; position: absolute; left: 251px;/ 背景块样式 / }