三级浮动菜单的实现
现在移动端设备横行，客户要求搞个时下比较流行的通过点击展开三级浮动菜单，效果如下：
首先是例排的做法，把菜单用静态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(); }); }
