leoyi520

移动端导航伸缩功能

CSS：

/*公用的头部*/
.topBox{
width:100%;
height: 40px;
background: #216EEC;
position: relative;
}
.topBox h3{
line-height: 40px;
}
.ico-return{
display: inline-block;
width: 12px;
height: 20px;
margin:10px 0 0 10px;
background: url("../images/b_03.jpg")no-repeat;
float: left;
}
.ico-refresh{
display: inline-block;
width: 20px;
height: 20px;
background: url("../images/w_03.jpg")no-repeat;
position: absolute;
top:10px;
right: 35px;
}
.ico-list{
display: inline-block;
width: 40px;
height: 40px;
background: url("../images/n_03.jpg")no-repeat;
position: absolute;
top:8px;
right: 10px;
}

/*首页导航列表*/
.topNavBox{
width: 100%;
/*height:35px;*/
background: rgba(0,0,0,0.8);
display: none;
}
.topNavBox li {
width:25%;
float: left;
text-align: center;
line-height: 35px;
}
.topNavBox li a{
color:#fff;
font-weight: bold;
font-size: 14px;
}

<script type="text/javascript">
$(function(){
$("#showNav").click(function(){
var is = $("#showNav").attr("is");
// 展示
if(is == 0){
$(".topNavBox").css('display',"block");
$("#showNav").attr("is",'1');
}else{
$(".topNavBox").css('display',"none");
$("#showNav").attr("is",'0');
}
});
});
</script>

<div class="topBox clear">
<h3 class="text-center white">普通旅馆</h3>
<a href="javascript:void(0);" id="showNav" is='0' class="ico-list"></a>
</div>
<div class="topNavBox clear">
<ul>
<li><a href="">酒店服务</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">新闻中心</a></li>
<li><a href="">联系我们</a></li>
</ul>

</div>