需求背景

移动端时,将指定的菜单类显示到底部

基本思路

  1. 获取顶部菜单栏dom对象,创建底部菜单栏dom对象
  2. 将顶部菜单数据整理到底部菜单栏dom中,并根据 菜单名 删除不需要显示的菜单项
  3. 给底部菜单添加子菜单
  4. 调整其它效果,控制底部菜单的子菜单显示

 

$(function(){
	var listDom = $('#category-container .category')		//	取得菜单栏dom对象
	var menuDiv = $('<div class="menu-bar"></div>')			// 底部菜单最外层div
    var menuBar = $('<ul class="menu-bar-list"></ul>')		// 底部菜单ul标签
	var mask = $('<div class="child-menu-mask"></div>')
    
	var reMenu = new Array("设置")		//不需要在底部显示的菜单项 根据菜单名字删除
	
	menuDiv.append(menuBar)  
    $('body').append(menuDiv)  
	$('body').append(mask)

	// 给底部菜单添加数据
	var menuList = ''; //菜单列表
    listDom.each(function(){
		if(reMenu.indexOf($(this).children('a').find('span').eq(0).text())<0){		//判断去除不需要显示的菜单项
			var li = '<li class="list-li">'+
                    '<div class="child-btn">'+
                        '<a href="'+ $(this).children('a').attr('href') +'">'+
                            '<span class="text">'+
                                 $(this).children('a').find('span').eq(0).text()+
                            '</span>'+
                            '<span class="tips">'+
                                 $(this).children('a').find('span').eq(1).text()+
                            '</span>'+
                        '</a>'+
                    '</div>'+
                    '<ul class="child-menu child-menu-hide"></ul>'+
                '</li>'
			menuList += li
		}
    })
	var listLi = $(menuList)		//将整合的菜单列表转换为jquery dom对象
	menuBar.append(listLi)
	
    // 给底部菜单添加子菜单
    listDom.each(function(i){
        var _this = this
        $(_this).find('.menu-container .menu').each(function(){
            var li ='<li>'+
                        '<a href="'+ $(this).children('a').attr('href') +'">'+
                            '<span class="text">'+
                                $(this).children('a').find('span').eq(0).text()+
                            '</span>'+
                            '<span class="tips">'+
                                $(this).children('a').find('span').eq(1).text()+
                            '</span>'+
                        '</a>'+
                    '</li>'
            listLi.eq(i).children('.child-menu').append(li)
            listLi.eq(i).addClass('sign')
        })
    })
    // 去除多余的dom tips
    $('.menu-bar .menu-bar-list .list-li a span.tips').each(function(){
        if($(this).text() === ''){
            $(this).css('display','none')
        }
    })
    // 打开子菜单的遮罩层
    mask.click(function(){
        listLi.children('.child-menu').fadeOut()
        $(this).hide()
    })
    // 控制底部菜单的子菜单显示
    listLi.click(function(){
        var childMenuClass = $(this).children('.child-menu').css('display')
        if(childMenuClass === 'block'){
            listLi.children('.child-menu').fadeOut()
            mask.hide()
        }else{
            listLi.children('.child-menu').fadeOut()
            $(this).children('.child-menu').fadeIn()
            mask.show()
        }
    })
})


<style>
	/*** CSS样式 **/


 /*宽度超过1024px 底部菜单隐藏*/
 @media screen and (min-width: 500px) {
    .menu-bar {
        display:none;
    } 
    
}
ul,li{padding:0;margin:0;list-style:none;}
 /*底部菜单*/
 .menu-bar{
     position:fixed;
     z-index:999;
     bottom:0;
     left:0;
     width:100%;
     background:#f8f8f8;
     border-top:1px solid #e2e2e2;
 }
 .menu-bar .menu-bar-list{
     display:flex;
     justify-content:center;
     align-items:center;
     width:100%;
 }
 /*菜单选项*/
 .menu-bar .menu-bar-list .list-li{
     padding:7px 0;
     text-align:center;
     width:25%;
     position:relative;
 }
 .menu-bar .menu-bar-list .list-li .child-btn{
     height:30px;
     line-height:30px;
     border-left:1px solid #e2e2e2;
 }
 .menu-bar .menu-bar-list .list-li:first-child .child-btn{
     border-left:none;
 }
 /*按钮有子菜单时显示右下角三角形*/
 .menu-bar .menu-bar-list .list-li.sign:after{
     content:'';
     position:absolute;
     bottom:5px;
     right:5px;
     width:0;
     height:0;
     border-top-color:rgba(0,0,0,0);
     border-bottom-color:#ccc;
     border-left-color:rgba(0,0,0,0);
     border-right-color:#ccc;
     border-style:solid;
     border-width:5px;
 }
 .menu-bar .menu-bar-list .list-li:first-child:after{
     display:none;
 }
 /*子菜单*/
 .menu-bar .menu-bar-list .list-li .child-menu{
     width:100%;
     position:absolute;
     left:0;
     top:0;
     background:#f8f8f8;
     border-radius:2px;
     -moz-transform: translateY(-100%);
     -webkit-transform: translateY(-100%);
     -ms-transform: translateY(-100%);
     transform: translateY(-100%);
     -moz-box-shadow:0px 0px 5px #333333; 
     -webkit-box-shadow:0px 0px 5px #333333; 
     -ms-box-shadow:0px 0px 5px #333333;
     box-shadow:0px 0px 5px #333333;
 }
 .menu-bar .menu-bar-list .list-li:last-child .child-menu{
     left:-2px;
 }
 .menu-bar .menu-bar-list .list-li .child-menu li{
     height:40px;
     line-height:40px;
     text-align:center;
     border-top:1px solid #e2e2e2;
 }
 .menu-bar .menu-bar-list .list-li .child-btn a .text,
 .menu-bar .menu-bar-list .list-li .child-menu li a .text{
     color:#000;
 }
 .menu-bar .menu-bar-list .list-li .child-menu li:first-child{
     border-top:none;
 }
 /*小圆点定位参考*/
 .menu-bar .menu-bar-list li{
     position:relative;
 }
 /*小圆点*/
 .menu-bar .menu-bar-list .list-li a span.tips{
     position:absolute;
     top:3px;
     right:3px;
     width:20px;
     height:14px;
     line-height:14px;
     text-align:center;
     background:red;
     color:#fff;
     border-radius:10px;
     font-size:12px;
 }
 /*子菜单默认隐藏*/
 .child-menu-hide{
     display:none;
 }
 /*子菜单遮罩层*/
 .child-menu-mask{
     display:none;
     position:fixed;
     z-index:9;
     left:0;
     top:0;
     width:100%;
     height:100%;
     opacity:0;
 }

@media screen and (max-width: 800px){
span.row_action_inner a {
    color: white;
    float: right;
    padding: 5px 10px;
    
}

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front {
    /*height: 90% !important;*/
    /*top: 3% !important;*/
    z-index:1000;
}
table{
    border-collapse:unset;
}
</style>

相关的文章