<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery.min.js"></script>
<style>
{literal}
html,body,p,h1,h2,h3,h4,h5,h6,form,input,textarea,select,button,fieldset,legend,img,ul,ol,li,dl,dt,dd,th,td,pre,blockquote{margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{background: #f0f0f0;color:#000;}
body,button,input,select,textarea,h2,h3,h4,h5,h6{font:14px 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', '宋体', \5b8b\4f53, Tahoma, Arial}
img,fieldset{border:0;vertical-align:middle}
input{padding:0;margin:0;outline:none;}
a{text-decoration:none;color:#4c4c4c;}
a:hover{text-decoration:none;}
ul,li,ol{list-style:none}
img{max-width:100%;}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}
.clearfix:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;zoom:1;}
.l{float:left;}.r{float:right;}
/*reset样式重置*/

.menwrap{position:fixed;right:0;bottom:0;width:100%;height:50px;z-index:4;}

.btn-open{float:left;width:50px; background-color:#e6e6e6;border-top:1px solid #b3b3b3;border-right:1px solid #b3b3b3; height:50px;padding-top:5px;}
.wx_input{width:50px;background:#000 url(images/wx_input.png) no-repeat center center; height:40px;background-color:#e6e6e6;}

.btn3{position:relative;z-index:3;bottom:0;border-top:1px solid #b3b3b3;background:#e6e6e6;margin-left:51px;text-align:center;box-sizing:border-box;-webkit-box-sizing:border-box;}
.menu{position:relative;float:left;width:33.333%;height:50px;line-height:50px;background:#e6e6e6;border-right:1px solid #b3b3b3;box-sizing:border-box;-webkit-box-sizing:border-box;}
.menu:last-child{border-right:none;}
.new-sub{position:absolute;bottom:50px;z-index:-1;width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;display:none;}
.new-sub li{wbackground:#e6e6e6;float:none;box-sizing:border-box;-webkit-box-sizing:border-box;border-bottom:1px solid #b3b3b3;border-top:1px solid #f2f2f2;}
.new-sub li a{display:block;height:40px;line-height:40px;text-align:left;background:#e6e6e6;color:#333;border:none;text-align:center;font-size:12px;}
.sanjiao{position:absolute;bottom:5px;right:5px;width:0;height:0;border:5px solid transparent;border-right:5px solid #000;border-bottom:5px solid #000;opacity:.5;}
.bt-name{font-size:16px;color:#000;}
.bt-name a{display:block;font-size:12px;color:#000;}
{/literal}
</style>
</head>
<body>
<div class="menwrap">
	<div class="btn-open"><div class="wx_input"></div></div>
	<div class="btn3 clearfix">
		{foreach from=$menu_list item=list name=foo}
		{if $list.parent_id == 0}
		<div class="menu">
			<div class="bt-name">
			{if $list.type == 'click'}
				<a href="wx_reply.php?act=edit&key={$list.value}" target="_blank">{$list.name}</a>
			{elseif $list.type == 'view'}
				<a href="{$list.value}" target="_blank">{$list.name}</a>
			{else}
				<a href="javascript:;">{$list.name}</a>
			{/if}
			</div>
			{if $list.is_leaf == 0}
			<div class="sanjiao"></div>
			<ul class="new-sub">
				{foreach from=$menu_list item=sub_list}
				{if $sub_list.parent_id == $list.menu_id}
				{if $sub_list.type == 'click'}
					<li><a href="wx_reply.php?act=edit&key={$sub_list.value}" target="_blank">{$sub_list.name}</a></li>
				{elseif $sub_list.type == 'view'}
					<li><a href="{$sub_list.value}" target="_blank">{$sub_list.name}</a></li>
				{else}
					<li><a href="javascript:;">{$sub_list.name}</a></li>
				{/if}				
				{/if}
				{/foreach}
			</ul>
			{/if}
		</div>
		{/if}
		{/foreach}
	</div>
</div>
<script>
{literal}
$(".menu").click(function() {
    if ($(this).hasClass("cura")) {
        $(this).children(".new-sub").hide(); //当前菜单下的二级菜单隐藏
        $(".menu").removeClass("cura"); //同一级的菜单项
    } else {
        $(".menu").removeClass("cura"); //移除所有的样式
        $(this).addClass("cura"); //给当前菜单添加特定样式
        $(".menu").children(".new-sub").hide(); //隐藏所有的二级菜单
        $(this).children(".new-sub").show(); //展示当前的二级菜单
    }
});
{/literal}
</script>
</body>
</html>