[转载]jQuery插件SmoothNavigationalMenu导航菜单实现Javascript下拉多级菜单功能

上期在[jQuery插件accordion折叠菜单实现Javascript展开收缩菜单功能]一文中使用jQuery插件accordion实现折叠菜单效果，这里介绍另外一个jQuery插件SmoothNavigationalMenu平滑导航菜单实现javascript下拉菜单特效，你不需要编写JS代码，只需要将库文件包含进网页，就可实现javascript下拉菜单效果，同时可实现多级菜单，定义多层子菜单功能，效果图如下：

使用说明
需要使用jQuery库文件(目前版本1.3)和jQuery Smooth Navigational Menu库文件(目前版本1.0)

素材准备
1，可自定义CSS样式，控制jQuery插件Smooth Navigational Menu下拉多级菜单样式，如biuuu.css文件
2，需要导航小图片，提示下级菜单，如下图：
向下小图标
向右小图标

实例代码
一，包含文件部分

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="ddsmoothmenu.js"></script>

二，HTML部分(部分）

1. <div id="biuuu" class="ddsmoothmenu">
2. <ul>
3. <li><a href="http://www.biuuu.com">菜单一</a></li>
4. <li><a href="#">菜单二</a>
5. <ul>
6. <li><a href="#">必优菜单 1.1</a></li>
7. <li><a href="#">必优菜单 1.2</a></li>
8. <li><a href="#">必优菜单 1.3</a></li>
9. <li><a href="#">必优菜单 1.4</a></li>
10. <li><a href="#">必优菜单 1.2</a></li>
11. <li><a href="#">必优菜单 1.3</a></li>
12. <li><a href="#">必优菜单 1.4</a></li>
13. </ul>
14. </li>
15. </ul>
16. </div>

三，Javascript部分(jQuery插件SmoothNavigationalMenu平滑导航菜单配置)
不需要编写JS代码，如果要修改菜单DIV的ID，可直接在SmoothNavigationalMenu平滑导航菜单JS库文件中修改,代码如下：

1. ddsmoothmenu.init({
2. mainmenuid: "biuuu",
3. customtheme: ["#1c5a80", "#18374a"],
4. contentsource: "markup"
5. })

可自定义配置jQuery插件SmoothNavigationalMenu的初始化设置，如上。
mainmenuid表示需要实现菜单效果的DIV层ID，如：biuuu
customtheme表示用户自定义菜单颜色，分别是菜单默认颜色和鼠标悬停颜色
contentsource表示内容源

同时，可修改向下和向右提示小图标

1. arrowimages: {down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']},

可修改其CSS样式，图片，大小设置，其它大家可查看一下jQuery Smooth Navigational Menu的JS文件，比较简单

实例可知使用jQuery插件SmoothNavigationalMenu平滑导航菜单实现javascript下拉多级菜单功能只需要设置菜单样式，提示小图标，就可马上实现功能强大的javascript下拉多级菜单特效，同时可自定义定制效果，非常方便，值得推荐。

点我下载jQuery插件SmoothNavigationalMenu平滑导航菜单实现javascript下拉多级菜单功能 DEMO
直接查看jQuery插件SmoothNavigationalMenu DEOM

原创文章如转载，请注明：转载自 必优博客 http://www.biuuu.com/

本文链接地址：http://www.biuuu.com/p517.html

转载于:https://www.cnblogs.com/zsea/archive/2009/10/25/1589485.html