69.js--点击事件等比例弹出层div-CSDN博客

html:
<!--弹出层导航栏-->
   <div class="public-nav-content">
     <ul>
         <li><a href=""><i></i><b>方案设计</b></a></li>
         <li><a href=""><i></i><b>为我报价</b></a></li>
         <li><a href=""><i></i><b>我要验房</b></a></li>
         <li><a href=""><i></i><b>老房装修</b></a></li>
         <li><a href=""><i></i><b>精装房改造</b></a></li>
     </ul>

</div>
css:

/*弹出层导航栏*/

.public-nav-content{
    width: 0;/
    height:0;/
    padding-top: 1rem;
    background: url("../image/icon/icon-nav.png") no-repeat;
    background-size: 100% 100%;
    position: fixed;
    right:0;
    top:0;
    z-index:9999998;
}
.public-nav-content img{
    width:100%;/
    height: 100%;/
}
.public-nav-content ul{
    margin:0 0.29rem;
    border-bottom:0.01rem solid #D9D9D9;
    display:  none;/
}
.public-nav-content ul li{
    text-align: center;
    display: inline-block;
    float:left;
    margin-top: 0.3rem;/
    margin-right:0.15rem;/
}

js:

$(".public-nav-content").click(function(event) {
    $(".public-nav-content").animate({
        height:'0%',
        width:'0%'
    });
    $(".public-nav-content ul").hide();
    $(".icon-lists").hide();
    $(".icon-list").css("display","inline-block");
    event.stopPropagation();
});
$(".icon-list").click(function(){
    $(this).hide();
    $(".icon-lists").css("display","inline-block");
    $(".public-nav-content").show();
    $(".public-nav-content ul").show();
    $(".public-nav-content").animate({
        height:'100%',
        width:'100%',
    });
    $('.public-nav-content ul').animate({
        width: '98%',
        height:'15%',
    })
    $(".public-nav-content ul li").animate({
        width: '15%',
    })
});
$(".icon-lists").click(function(){
    $(this).hide();
    $(".icon-list").css("display","inline-block");
    $(".public-nav-content").animate({
        height:'0%',
        width:'0%'
    });
    $(".public-nav-content ul").hide();
});