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();
});
posted on 2019-04-27 15:57  东西南北212  阅读(478)  评论(0编辑  收藏  举报