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

这里介绍另外一个jQuery插件SmoothNavigationalMenu平滑导 航菜单实现javascript下拉菜单特效，你不需要编写JS代码，只需要将库文件包含进网页，就可实现javascript下拉菜单效果，同时可实现 多级菜单，定义多层子菜单功能，效果图如下：
jquery-smooth-navigational-menu

使用说明
需要使用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>

jquery-smooth-navigational-menu-2
三，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-smooth-navigational-menu-1

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

共有0个回答