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();});
转载于:https://www.cnblogs.com/sqyambition/p/10779027.html
相关资源：JAVA上百实例源码以及开源项目