首页 > 代码库 > 三级浮动菜单的实现，现为点击下拉效果，可扩展为mouseover等
三级浮动菜单的实现，现为点击下拉效果，可扩展为mouseover等
现在移动端设备横行，客户要求搞个时下比较流行的通过点击展开三级浮动菜单，效果如下：
首先是例排的做法，把菜单用静态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(); });}
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。