 <style type="text/css">
ul, li { list-style:none; margin:0; padding:0 }

.top_bar {display: none;position: fixed; z-index: 900; bottom: 0; left: 0; right: 0; margin: auto; font-family: Helvetica, Tahoma, Arial, Microsoft YaHei, sans-serif; }
@media (max-width: 500px) {
.top_bar {display:inline; position: fixed; z-index: 900; bottom: 0; left: 0; right: 0; margin: auto; font-family: Helvetica, Tahoma, Arial, Microsoft YaHei, sans-serif; }	
	}
.top_menu { display:-webkit-box; display: block; width: 100%; height: 52px; display: -webkit-box; display: box; margin:0; padding-top: 5px; -webkit-box-orient: horizontal; background: <?php echo $bgcolor; ?>; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3) inset;border-top: 1px solid <?php echo $bordercss; ?>; }

.top_bar .top_menu>li { -webkit-box-flex:1; -webkit-background-size:1px 100%, 1px 100%; background-size:1px 100%, 1px 100%; background-position: 1px center, 2px center; background-repeat: no-repeat; position:relative; text-align:center; }

.top_menu li:first-child { background:none; }

.top_bar .top_menu>li>a { height:52px; display:block; text-align:center; color:<?php echo $titlecss; ?>; text-decoration:none; }

.top_bar .top_menu>li>a label { overflow:hidden; margin: 0 0 0 0; font-size: 12px; display: block !important; line-height: 20px; text-align: center; font-weight: normal;}

.top_bar .top_menu>li>a img { padding: 3px 0 0 0; height: 24px; width: 24px; color: #fff; line-height: 52px; vertical-align:middle; }

.top_bar li:first-child a { display: block; }

.menu_font { text-align:left; position:absolute; right:10px; z-index:500; background: -webkit-gradient(linear, 0 0, 0 100%, from(#697077), to(#3F434E), color-stop(60%, #464A53)); border-radius: 5px; width: 120px; margin-top: 10px; padding: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }

.menu_font.hidden { display:none; }

.menu_font { top:inherit !important; bottom:60px; }

.menu_font li a { height:40px; margin-right: 1px; display:block; text-align:center; color:#FFF; text-decoration:none; text-shadow: 0 1px rgba(0, 0, 0, 0.3); -webkit-box-flex:1; }

.menu_font li a { text-align: left !important; }

.top_menu li:last-of-type a { background: none; }

.menu_font:after { top: inherit!important; bottom: -6px; border-color: #3F434E rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-width: 6px 6px 0; position: absolute; content: ""; display: inline-block; width: 0; height: 0; border-style: solid; left: 80%; }

.menu_font li { border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.2); }

.menu_font li:first-of-type { border-top: 0; }

.menu_font li:last-of-type { border-bottom: 0; }

.menu_font li a { height: 40px; line-height: 40px !important; position: relative; color: #fff; display: block; width: 100%; text-indent: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.menu_font li a img { width: 20px; height:20px; display: inline-block; margin-top:-2px; color: #fff; line-height: 40px; vertical-align:middle; }

.menu_font>li>a label { padding:3px 0 0 3px; font-size:14px; overflow:hidden; margin: 0; }

#menu_list0 { right:0; left:10px; }

#menu_list0:after { left: 20%; }

#sharemcover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; z-index: 20000; }

#sharemcover img { position: fixed; right: 18px; top: 5px; width: 260px; height: 180px; z-index: 20001; border:0; }

.menu_font li a:hover, .menu_font li a:active { background-color:#333; }

.menu_font li:first-of-type a { border-radius:5px 5px 0 0; }

.menu_font li:last-of-type a { border-radius:0 0 5px 5px; }

#plug-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index:800; }

#cate18 .device {bottom: 49px;}

#cate18 #indicator {bottom: 240px;}

#cate19 .device {bottom: 49px;}

#cate19 #indicator {bottom: 330px;}

#cate19 .pagination {bottom: 60px;}

</style>

<div class="top_bar" style="-webkit-transform:translate3d(0,0,0)">
    <nav>
    <ul id="top_menu" class="top_menu">
    <?php foreach ($services as $service) { ?>
    <li> <a href="<?php echo $service['link']; ?>"><i class="<?php echo $service['icon']; ?>"></i><label><?php echo $service['title']; ?></label></a></li>
    <?php } ?>
    <?php if ($words): ?>
    <li> <a href="tel:<?php echo $telephone; ?>"><i class="fa fa-phone-square"></i><label><?php echo $words; ?></label></a></li>
    <?php endif ?>
    <?php if ($blog): ?>
    <li> <a href="index.php?route=blog/all"><i class="fa fa-eye"></i><label><?php echo $blog; ?></label></a></li>
    <?php endif ?>
    </ul>
    </nav>
</div>
<script>

function displayit(n){

	for(i=0;i<4;i++){

		if(i==n){

			var id='menu_list'+n;

			if(document.getElementById(id).style.display=='none'){

				document.getElementById(id).style.display='';

				document.getElementById("plug-wrap").style.display='';

			}else{

				document.getElementById(id).style.display='none';

				document.getElementById("plug-wrap").style.display='none';

			}

		}else{

			if($('#menu_list'+i)){

				$('#menu_list'+i).css('display','none');

			}

		}

	}

}

function closeall(){

	var count = document.getElementById("top_menu").getElementsByTagName("ul").length;

	for(i=0;i<count;i++){

		document.getElementById("top_menu").getElementsByTagName("ul").item(i).style.display='none';

	}

	document.getElementById("plug-wrap").style.display='none';

}



document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {

	WeixinJSBridge.call('hideToolbar');

});

</script>