最新写了一个菜单的js,分享下 Charles

该菜单是对元素对象的一个扩展，可以有两种方式，一种为鼠标悬浮的效果，一种为鼠标点击的效果。
根据不同的需求选择不同的方式，比如要实现网站头部导航功能，则可以使用这种默认的方式。
如果需要实现网站左侧导航的话，则关闭鼠标悬浮功能。
同时实现菜单选中时候的状态，可调节部分为当前菜单选中（未选中）时的图标（演示为 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;
             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;
             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
相关阅读:
splinter webdriver API 的基本实现
 201253 线程和进程的区别
 Winform中的默认图片
 [收藏】正确使用SqlConnection对象，兼谈数据库连接池
 手机相关的基础名称
 常见排序
 SIP相关内容
 How to set the WIFI configuration
本地化的设置和读取
 Serialize And Deserialize Binary Tree
原文地址：https://www.cnblogs.com/shenchaoming/p/2874011.html
最新写了一个 菜单 的js,分享下 Charles

最新写了一个菜单的js,分享下 Charles
