69.js--點擊事件等比例彈出層div

 

 

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();});