三级浮动菜单的实现

现在移动端设备横行，客户要求搞个时下比较流行的通过点击展开三级浮动菜单，效果如下：

首先是例排的做法，把菜单用静态html布局拼出来

<ul id="mcoMenuRoot">
    <li id="lv1ItemMenu" class="lv1Item" status="off">
        <div class="lv1RichItemContainer">一级菜单一</div>
        <ul class="lv2RichContainer">
            <li class="lv2FirstRichItem lv2RichItem">
                <div class="lv2RichItemContainer" url="xx.html"><span class="lv2RichItem-text">二级菜单一</span><span class="lv2RichItem-btn">+</span></div>
                <ul class="lv3Container">
                    <li class="lv3FirstItemNoSub lv3ItemNoSub" url="xx.html">三级菜单1</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单2</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单3</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单4</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单5</li>
                    <li class="lv3LastItemNoSub lv3ItemNoSub" url="xx.html">三级菜单6</li>
                </ul>
            </li>
            <li class="lv2RichItem">
                <div class="lv2RichItemContainer" url="xx.html"><span class="lv2RichItem-text">二级菜单二</span><span class="lv2RichItem-btn">+</span></div>
                <ul class="lv3Container">
                    <li class="lv3FirstItemNoSub lv3ItemNoSub" url="xx.html">三级菜单1</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单2</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单3</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单4</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单5</li>
                    <li class="lv3LastItemNoSub lv3ItemNoSub" url="xx.html">三级菜单6</li>
                </ul>
            </li>
            <li class="lv2RichItem">
                <div class="lv2RichItemContainer" url="xx.html"><span class="lv2RichItem-text">二级菜单三</span><span class="lv2RichItem-btn">+</span></div>
                <ul class="lv3Container">
                    <li class="lv3FirstItemNoSub lv3ItemNoSub" url="xx.html">三级菜单1</li>
                    <li class="lv3LastItemNoSub lv3ItemNoSub" url="xx.html">三级菜单2</li>
                </ul>
            </li>
            <li class="lv2RichItem">
                <div class="lv2RichItemContainer" url="xx.html"><span class="lv2RichItem-text">二级菜单四</span><span class="lv2RichItem-btn">+</span></div>
                <ul class="lv3Container">
                    <li class="lv3FirstItemNoSub lv3ItemNoSub" url="xx.html">三级菜单1</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单2</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单3</li>
                    <li class="lv3ItemNoSub" url="xx.html" target="_blank">三级菜单4</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单5</li>
                    <li class="lv3LastItemNoSub lv3ItemNoSub" url="xx.html">三级菜单6</li>
                </ul>
            </li>
            <li class="lv2RichItem">
                <div class="lv2RichItemContainer" url="xx.html"><span class="lv2RichItem-text">二级菜单五</span><span class="lv2RichItem-btn">+</span></div>
                <ul class="lv3Container">
                    <li class="lv3FirstItemNoSub lv3ItemNoSub" url="xx.html">三级菜单1</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单2</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单3</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单4</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单5</li>
                    <li class="lv3LastItemNoSub lv3ItemNoSub" url="xx.html">三级菜单6</li>
                </ul>
            </li>
            <li class="lv2RichItem lv2LastRichItem">
                <div class="lv2RichItemContainer" url="xx.html"><span class="lv2RichItem-text">二级菜单六</span><span class="lv2RichItem-btn">+</span></div>
                <ul>
                    <li class="lv3FirstItemNoSub lv3ItemNoSub" url="xx.html">三级菜单1</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单2</li>
                    <li class="lv3ItemNoSub" url="xx.html">三级菜单3</li>
                    <li class="lv3LastItemNoSub lv3ItemNoSub" url="xx.html">三级菜单4</li>
                </ul>
            </li>
        </ul>
    </li>
    <li id="lv1ItemLocations" class="lv1Item  " url="xx.html"><span class="lv1Item-text">一级菜单二</span></li>
    <li id="lv1ItemContact" class="lv1Item  " url="xx.html"><span class="lv1Item-text">一级菜单三</span></li>
    <li id="lv1ItemSearch" class="lv1Item " status="off">
        <div id="SearchContainer"></div>
    </li>
</ul>

设置菜单的样式

.lv1Item
{
    padding: 0;
    margin: 0;
    float: left;
    height: 47px;
    font-weight: bold;
    padding-top: 0px;
}

.lv2RichContainer
{
    width: 400px;
    background-color: #4064b0;
    color: white;
    display: none;
}

.lv2RichItemContainer
{
    height: 50px;
}

.lv3ItemNoSub
{
    height: 40px;
    border-bottom: 1px solid #4064b0;
    padding-left: 35px;
    line-height: 40px;
    font-size: 16px;
    font-weight: normal;
}

.lv3Container
{
    background-color: #3c5aa0;
}

.lv2RichItem
{
    border-bottom: 1px dotted white;
}

.lv2LastRichItem
{
    border-bottom: none;
}

.lv2RichItem-text
{
    float: left;
    padding-left: 15px;
    line-height: 50px;
    font-size: 18px;
    font-weight: normal;
    color: #FFFFFF;
}

.lv2RichItem-btn
{
    float: right;
    padding: 0px 15px;
    line-height: 49px;
    width: 20px;
    font-size: 26px;
    background-color: #3c5aa0;
    font-weight: normal;
    text-align: center;
}

.lv3Container
{
    display: none;
}

.lv3Container-open
{
    display: block;
}

#lv1ItemMenu
{
    width: 102px;
    background-image: url("/SiteCollectionImages/mobile/nav_memu2.jpg");
    background-position: 0 0;
    color: #1a2f5a;
    padding-left: 0px;
    color: #9c8700;
}

#lv1ItemLocations
{
    background-image: url("/SiteCollectionImages/mobile/new_nav2_over.jpg");
    width: 113px;
    padding-left: 0px;
}

#lv1ItemContact
{
    background-image: url("/SiteCollectionImages/mobile/new_nav3_over.jpg");
    width: 100px;
    padding-left: 0px;
}

#lv1ItemSearch
{
    background-image: url("/SiteCollectionImages/mobile/new_nav4_over.jpg");
    width: 85px;
}

    #lv1ItemSearch.highlighted
    {
        background-image: url("/SiteCollectionImages/mobile/new_nav4_over2.jpg");
        width: 85px;
    }

#SearchContainer
{
    top: 47px;
}

.lv1RichItemContainer
{
    padding-left: 22px;
    text-align: center;
    line-height: 47px;
}

.lv1ItemMenu_open
{
    background-image: url("/SiteCollectionImages/mobile/nav_memu1.jpg")!important;
    color: #7799cc!important;
}

.lv1Item-text
{
    padding-left: 27px;
    line-height: 47px;
}

初始化菜单及绑定菜单功能(对JQuery进行扩展)

/**
 * @Creater: Nelson
 * @floatMenu Click to trigger the float Menu
 * @How to use it    
      $("#jsTopNavigation").floatMenu();
     $("#jsTopNavigation").bindMenuLinks();
 */
    $.fn.extend({
        floatMenu: function () {
            var This = $(this);
            This.find("#lv1ItemMenu").click(function () {
                This.find("#SearchContainer").hide();
                This.find("#lv1ItemSearch").attr('status', 'off');            
                $(this).find(".lv2RichContainer").toggle();
                if ($(this).attr('status') == 'on') {
                    $(this).removeClass("lv1ItemMenu_open");
                    $(this).attr('status', 'off');
                }
                else {
                    $(this).addClass("lv1ItemMenu_open");
                    $(this).attr('status', 'on');
                }
            });
            This.find(".lv2RichItem-btn").on('click',function (event) {
                event.stopPropagation();
                This.find(".lv3Container").removeClass("lv3Container-open");
                if ($(this).text() == "-") {
                    This.find(".lv2RichItem-btn").text("+");
                }
                else {
                    This.find(".lv2RichItem-btn").text("+");
                    $(this).text("-");
                    $(this).parent().next().addClass("lv3Container-open").css("opacity", 0).animate({ "opacity": 1 }, 200)
                }
            });
            This.find("#lv1ItemSearch").on('click',function (event) {
                event.stopPropagation();
                This.find(".lv2RichContainer").hide(); 
                This.find("#lv1ItemMenu").removeClass("lv1ItemMenu_open");
                This.find("#lv1ItemMenu").attr('status', 'off');               
                if ($(this).attr('status') == 'on') {
                    //Container should hide
                    $(this).children('div').hide();
                    $(this).attr('status', 'off').removeClass('highlighted');
                } else {
                    //Container should show
                    $(this).children('div').show();
                    $('#screenCover').hide();
                    $(this).attr('status', 'on').addClass('highlighted');
                }

            });
            This.find("#SearchContainer").on('click', function (event) {
                event.stopPropagation();
            });        
         },
        bindMenuLinks: function () {
            var This = $(this);
            This.find('li').each(function () {
                var self = $(this);
                var url = self.attr('url');
                var target = self.attr('target');
                if (url != undefined  && url != '') {
                    self.on('click', function (event) {
                        event.stopPropagation();
                        if (target == undefined || target == '') {
                            location.href = url;
                        }
                        else {
                            window.open(url, target);
                        }
                    });
                }            });
            This.find(".lv2RichItemContainer").each(function () {
                var self = $(this);
                var url = self.attr('url');
                var target = self.attr('target');
                if (url != undefined  && url != '') {
                    self.on('click', function (event) {
                        event.stopPropagation();
                        if (target == undefined || target == '') {
                            location.href = url;
                        }
                        else {
                            window.open(url, target);
                        }
                    });
                }                
            });
        }

    })

把html文件load进来开始调用进行初始化菜单，

function initNavigation() {
        $("#jsTopNavigation").load("/Documents/newTopNav/corp_topnav.html", function () {
            $("#jsTopNavigation").floatMenu();
            $("#jsTopNavigation").bindMenuLinks();
        });
}