最新写了一个 菜单 的js,分享下
该菜单是对元素对象的一个扩展，可以有两种方式，一种为 鼠标悬浮 的效果，一种为鼠标点击的效果。
根据不同的需求选择不同的方式，比如要实现网站头部导航功能，则可以使用这种默认的方式。
如果需要实现网站左侧导航的话，则关闭鼠标悬浮功能。
同时实现菜单选中时候的状态，可调节部分为 当前菜单选中（未选中）时的图标（演示为 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
浙公网安备 33010602011771号