<style type="text/css">
/*头部功能*/
.mheadbox{position:fixed; width:100%;background:#333;color:#fff; padding:5px 8px; overflow:hidden; z-index:1}
.mheadbox img{width:30px}
.mheadbox .lt{float:left}
.mheadbox .rt{float:right}


/*弹出底部功能菜单*/
.opodiv{position:fixed;width:100%;height:100%;background-color:rgba(0,0,0,0.6);z-index:1;top:0px;display:none}
.opodiv .con{position:fixed;bottom:0px;width:100%;background:#fff; padding:20px 10px;}
.kztit{text-align:center; margin-bottom:15px; font-size:16px}
.kzmenu{overflow:hidden}
.kzmenu li{float:left;width:33.3%; padding:5px}
.kzmenu li a{display:block;border:1px solid #eeeeee;height:50px;line-height:50px;overflow:hidden;text-align:center;font-size:14px;border-radius:10px}
</style>
<ul class="mheadbox">
<li class="lt" id="goup"></li>
<li class="rt" onclick="opendiv()"><img src="images/tn.png"></li>
</ul>
<div style="height:40px"></div>


<div id="opodiv" class="opodiv" ontouchstart="closediv()">
<div class="con" ontouchstart="stopEvent()">
<div class="kztit">- 栏目快捷导航 -</div>
<ul class="kzmenu">
<?php 
$navbig = $db->select('news_bigclass','','6','sorting=0,sorting, bigclassid asc');
foreach($navbig as $k=>$v){
?>
<li><a href="<?php echo $v['layout'];?>?bigclassid=<?php echo $v['bigclassid'];?>"><?php echo $v['title'];?></a></li>
<?php }?>
</ul>
</div>
</div>
<script>
//打开遮罩层
function opendiv(){
document.getElementById('opodiv').style.display='block';
document.getElementById('msgcon').focus();
}
function closediv(){
document.getElementById('opodiv').style.display='none';
}


//阻止冒泡的函数
var stopEvent = function(event){
e = event || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
};
</script>