leoyi520

移动端导航条-搜索框和筛选

HTML:

<div class="topBox clear">
<a href="javascript:window.history.back(-1);" class="ico-return"></a>
<!-- 搜索框 -->
<div class="searchBox">
<span class="searchIco"></span>
<input type="text" name="key" placeholder="搜索新品热卖推荐">
<span class="searchPhone"></span>
</div>
<a href="javascript:void(0);" id="showNav" is='0' class="fr white shaixuan">筛选</a>
</div>
<div class="choiceFood clear">
<ul>
<li><a href="#">综合 ∨</a></li>
<li><a href="#">销量 ∨</a></li>
<li><a href="#">价格 ∨</a></li>
<li><a href="#">评论 ∨</a></li>
</ul>
</div>

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

/*公用的头部*/

.topBox{
width:100%;
height: 40px;
background: #ED4D4D;
position: relative;
}
.topBox h3{
line-height: 40px;
}
.ico-return{
display: inline-block;
width: 12px;
height: 20px;
margin:10px 0 0 10px;
background: url("../images/return.png")no-repeat;
float: left;
}
.ico-list{
display: inline-block;
width: 40px;
height: 40px;
background: url("../images/i_03.jpg")no-repeat;
position: absolute;
top:8px;
right: 10px;
}

/*搜索框*/

.searchBox{
width: 220px;
margin:5px;
float: left;
height: 30px;
line-height: 30px;
background: rgba(200,200,200,0.8);
margin-left: 50px;
border-radius: 5px;
}
.searchBox .searchIco{
display: inline-block;
width: 20px;
height: 20px;
float: left;
margin-top: 5px;
margin-left: 3px;
background: url("../images/l_03.png")no-repeat;
}
.searchBox input{
height: 25px;
line-height: 25px;
font-weight: bold;
color:#000;
outline: none;
border:none;
float: left;
width: 165px;
margin-top: 3px;
background: none;
margin-left: 5px;
}
.searchPhone{
display: inline-block;
width: 20px;
height: 20px;
float: left;
margin-top: 5px;
background: url("../images/l_05.png")no-repeat;
margin-left: 3px;
}
.shaixuan{
font-size: 16px;
font-weight: bold;
margin:10px;
}
.shaixuan:hover{
color:#fff;
text-decoration: none;
}
.choiceFood{
width: 100%;
background: rgba(100,100,100,0.8);
}
.choiceFood li {
width:25%;
float: left;
padding-left: 15px;
line-height: 35px;
border-right: 1px solid #fff;
}
.choiceFood li:nth-child(4){
border-right: none;
}
.choiceFood li a{
color:#fff;
font-weight: bold;
font-size: 14px;
}