该菜单是对元素对象的一个扩展，可以有两种方式，一种为 鼠标悬浮 的效果，一种为鼠标点击的效果。
根据不同的需求选择不同的方式，比如要实现网站头部导航功能，则可以使用这种默认的方式。
如果需要实现网站左侧导航的话，则关闭鼠标悬浮功能。
同时实现菜单选中时候的状态，可调节部分为 当前菜单选中（未选中）时的图标（演示为 On... 和 Off... ）
以及选中（未选中）的菜单的 背景颜色 或者 背景图片
支持无限级联。
Demo：
View Code
<html>
<head>
<script src="JS/jquery-1.4.1.min.js"></script>
<script src="JS/InfiniteMenu.js"></script>
<script>
$(function () {
$(".nav").menuNaviInit({
//-------------------菜单初始化--------------------//
MenuClass: "nav",
MenuOnBg: new Array("#01f", "#a5f", "#08f", "#0af"), //菜单激活状态下各级频道（子菜单）的background属性值.
MenuOnTextColor: new Array("#fff", "#fff", "#fff", "#fff"), //菜单激活状态下各级频道（子菜单）文字的颜色值.
MenuOffBg: new Array("#fff", "#fff", "#fff", "#fff"), //菜单未激活状态下各级频道（子菜单）的background属性值.
MenuOffTextColor: new Array("#000", "#000", "#000", "#000"), //菜单未激活状态下各级频道（子菜单）文字的颜色值.
MenuOnRtag: new Array("image", "1", "2", "3", "4"), //代表各级菜单激活状态下文字右侧的图片/文字...，如不需要可以将type置""
MenuOffRtag: new Array("image", "01", "02", "03", "04"), //代表各级菜单激活状态下文字右侧的图片/文字...，如不需要可以将type置""
HoverOn: true, //开启鼠标悬浮 //默认
ClickOn: true //开启鼠标点击 //默认
});
$(".goHome").click(function () {
window.open("http://www.foouu.com");
});
});
var t;
function download(durl) {
window.open("http://www.foouu.com");
setTimeout(function () {
$("#downmenu").attr("href", durl);
window.location.href = durl;
clearTimeout(t);
}, 1000);
}
</script>
<style>
.menu ul li
{
float: left;
width: 150px;
}
.menu ul ul
{
display: none;
}
.nav a
{
text-decoration: none;
color: #000;
}
</style>
</head>
<body style="margin: 0 auto; padding: 0 auto;">
<p>
<span onclick="$('#tip').toggle();" style="font-weight: bold; font-size: 16px; color: #f00;
width: 100%;">点击查看/隐藏 初始化代码</span>
<br />
<textarea id="tip" rows="14" cols="100" style="display: none; background: #aaa;">
$(function () {
$(".nav").menuNaviInit({
//-------------------菜单初始化--------------------//
MenuClass: "nav",
//菜单激活状态下各级频道（子菜单）的background属性值.
MenuOnBg: new Array("#01f", "#a5f", "#08f", "#0af"),
//菜单激活状态下各级频道（子菜单）文字的颜色值.
MenuOnTextColor: new Array("#fff", "#fff", "#fff", "#fff"),
//菜单未激活状态下各级频道（子菜单）的background属性值.
MenuOffBg: new Array("#fff", "#fff", "#fff", "#fff"),
//菜单未激活状态下各级频道（子菜单）文字的颜色值.
MenuOffTextColor: new Array("#000", "#000", "#000", "#000"),
//代表各级菜单激活状态下文字右侧的图片/文字...，如不需要可以将type置""
MenuOnRtag: new Array("image", "1", "2", "3", "4"),
//代表各级菜单激活状态下文字右侧的图片/文字...，如不需要可以将type置""
MenuOffRtag: new Array("image", "01", "02", "03", "04"),
HoverOn: true, //开启鼠标悬浮 //默认
ClickOn: true //开启鼠标点击 //默认
});
});
</textarea>
</p>
<p>
针对不同的需求，选择不同的导航，如 开启鼠标点击事件，可作为 <span style="color: Red;">左侧树形菜单</span> 。开启 鼠标悬浮事件，可作为
<span style="color: Red;">网站导航</span>。
</p>
<input id="all" type="button" onclick="$.fn.SetFunction(true,true);" value="开启所有功能(默认)" /><input
id="offhover" onclick="$.fn.SetFunction(false,true);" type="button" value="关闭鼠标悬浮（开启鼠标点击）功能" /><input
id="offclick" onclick="$.fn.SetFunction(true,false);" type="button" value="关闭鼠标点击（开启鼠标悬浮）功能" />
<a class="goHome" href="javascript:return false;">累了？咱去轻松一下吧...</a>
<p>
下载地址：<a id="downmenu" href="javascript:;" onclick="download('http://www.foouu.com/Demo/infiniteMenuJs/js/InfiniteMenu.rar');">无限级联导航菜单</a></p>
<input id="status" type="hidden" value="-1" />
<div class="menu nav">
<ul>
<li><a href="#a">About us</a>
<ul>
<li><a href="#aa">2级菜单</a> </li>
<li><a href="#ab">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a> </li>
<li><a href="#aba">3级菜单</a></li>
<li><a href="#abb">3级菜单</a></li>
<li><a href="#abc">3级菜单</a></li>
<li><a href="#abd">3级菜单</a></li>
</ul>
</li>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
</ul>
</li>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a>
<ul>
<li><a href="#">4级菜单</a></li>
<li><a href="#aba">4级菜单</a></li>
<li><a href="#abb">4级菜单</a></li>
<li><a href="#abc">4级菜单</a></li>
<li><a href="#abd">4级菜单</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
</ul>
</li>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
</ul>
</li>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
</ul>
</li>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
</ul>
</li>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Materials Baled</a></li>
<li><a href="#">Support</a> </li>
<li><a href="#">News</a> </li>
<li><a href="#">Download</a> </li>
<li><a href="#">Contact us</a> </li>
<li><a href="#">Home</a> </li>
</ul>
</div>
<div class="menu nav" style="margin-top: 250px;">
<ul>
<li><a href="#a">About us</a>
<ul>
<li><a href="#aa">2级菜单</a> </li>
<li><a href="#ab">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a> </li>
<li><a href="#aba">3级菜单</a></li>
<li><a href="#abb">3级菜单</a></li>
<li><a href="#abc">3级菜单</a></li>
<li><a href="#abd">3级菜单</a></li>
</ul>
</li>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
</ul>
</li>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a>
<ul>
<li><a href="#">4级菜单</a></li>
<li><a href="#aba">4级菜单</a></li>
<li><a href="#abb">4级菜单</a></li>
<li><a href="#abc">4级菜单</a></li>
<li><a href="#abd">4级菜单</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
</ul>
</li>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
</ul>
</li>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
</ul>
</li>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
</ul>
</li>
<li><a href="#">2级菜单</a>
<ul>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
<li><a href="#">3级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Materials Baled</a></li>
<li><a href="#">Support</a> </li>
<li><a href="#">News</a> </li>
<li><a href="#">Download</a> </li>
<li><a href="#">Contact us</a> </li>
<li><a href="#">Home</a> </li>
</ul>
</div>
</body>
</html>
演示地址：http://www.foouu.com/demo/infiniteMenuJs/menu.html
相关推荐
这是一个jqurey编写的功能：Jquery扁平化多级菜单分享
分享一枚js下拉列表菜单 请指教。
js 实现 树型目录菜单! 值得下载看看!资源免费,大家分享!!
5种js+css菜单 是从一个外国网站上copy来的 和大家分享一下哈 呵呵
基于js+css3制作的一款非常有创意的全屏折角导航菜单和右下角悬浮分享按钮特效，点击汉堡菜单全屏折角显示导航栏。
js 实现 滚动导航菜单! 值得下载看看!资源免费,大家分享!!
js 实现 隐藏式菜单! 值得下载看看!资源免费,大家分享!!
本文实例为大家分享了js实现select二级联动下拉菜单，供大家参考，具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()...
js 实现 左键弹出式菜单! 值得下载看看!资源免费,大家分享!!
这个是带有复选框的JS树状菜单， 免费给大家分享下
js 实现 为链接提供下拉菜单! 值得下载看看!资源免费,大家分享!!
js下拉菜单，做web很多时候都需要用到这样的菜单，这是偶尔在晚上看到的，好东西要大家分享所以放在这里共大家下载使用，分不是很高。 希望对你有用。
一般许多程序中要求做一些搜索，选择等操作，用右键菜单比较方便，而浏览器的右键菜单不能满足需求，所以这有js禁用系统右键菜单，自定义右键菜单代码分享，
本文实例讲述了js实现可折叠...这是一款可折叠展开的菜单，手风琴菜单，运用CSS与JavaScript技术实现的合拢与伸展的网页菜单，代码简洁，来自老外的代码作品，希望大家喜欢。 运行效果截图如下： 在线演示地址如下： ...
js 二级联动菜单 路过的高手指点，低手分享js 二级联动菜单 路过的高手指点，低手分享
微信相关的 js 操作：分享、网络、菜单
JS树型菜单的控件,挺好用的.现在分享给大家
网站导航菜单 CSS +JS 完成效果 包含多个例子 也是下载的，所有免费分享
php+js三级联级菜单，一般js三级菜单不容易改，本效果可以随意改一级二级三级名字，用着还行，特此分享一下。
这次我们要分享的也是一款JavaScript右键菜单插件，它的外观是基于Bootstrap的，因此UI比之前那款要漂亮许多，另外这款右键菜单插件也支持自定义区域菜单显示功能，你可以在初始化的时候指定需要弹出菜单的网页区域...