首页 > 其他 > 详细

三级浮动菜单的实现，现为点击下拉效果，可扩展为mouseover等

时间：2014-08-11 11:39:22      阅读：291      评论：0      收藏：0      [点我收藏+]

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

bubuko.com,布布扣

首先是例排的做法，把菜单用静态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();
        });
}

三级浮动菜单的实现，现为点击下拉效果，可扩展为mouseover等,布布扣,bubuko.com

三级浮动菜单的实现，现为点击下拉效果，可扩展为mouseover等

原文：http://www.cnblogs.com/fastmover/p/3904132.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！