仿QQ菜单HTML,JS代码

最新推荐文章于 2021-06-05 08:44:39 发布

cncco

最新推荐文章于 2021-06-05 08:44:39 发布

阅读量1.4k

点赞数

分类专栏： HTML JS 文章标签： html qq menu 数据库 url border

JS 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

HTML

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body {
font-size:12px;
color:#333;
}
img {
border:0px;
}
a {
display:block;
padding:3px 0px 3px 20px;
border-top:1px #eee solid;
text-decoration:none;
line-height:18px;
color:#333;
}
a:hover {
background:#CDDEEE;
text-decoration:underline;
}
h3 {
margin:0px;
padding:0px;
padding-left:8px;
background:#646464;
color:#fff;
font-size:12px;
line-height:28px;
}
h4 {
margin:0px;
padding:0px;
padding-left:36px;
border-top:#fff 1px solid;
border-bottom:#CCC 1px solid;
font-weight:normal;
font-size:12px;
line-height:24px;
cursor:pointer;
background:url(demo/11/arrow_close.gif) #EEEEEE no-repeat 4px 3px;
}
ul {
margin:0px;
padding:0px;
border-bottom:1px #eee solid;
list-style:none;
}
ul li {
margin:0px;
}
#admin_menu {
width:140px;
border:1px #eee solid;
border-bottom:0px;
}
</style>
<script language="javascript">
var super_menu_arr = ["网站系统设置","新闻管理系统","商品管理系统","留言管理系统","用户管理系统","文件管理系统","模版管理系统","网站统计系统","数据库管理"];
var base_menu_arr = new Array(9);
base_menu_arr[0] = ["","网站信息配置","","网站广告管理","","网站投票管理","","友情链接管理","","网站日志管理","","敏感字过滤管理","","限制IP管理","","网站公告管理","","插件管理"];
base_menu_arr[1] = ["","添加文章","","文章管理","","专题文章管理","","文章评论管理","","栏目管理","","专题栏目管理","","回收站管理"];
base_menu_arr[2] = ["","添加新商品","","商品管理","","商品报价快速修改","","商品分类设置","","订单管理"];
base_menu_arr[3] = ["","网站留言管理","","留言类别管理"];
base_menu_arr[4] = ["","会员管理","","会员组管理","","短消息管理","","邮件列表管理","","管理员管理"];
base_menu_arr[5] = ["","头像图片管理","","心情图片管理","","上传图片管理","","上传文件管理"];
base_menu_arr[6] = ["","模版管理","","标签管理"];
base_menu_arr[7] = ["","获取代码","","网站统计分析","","网站统计配置"];
base_menu_arr[8] = ["","备份数据库","","恢复数据库","","压缩数据库","","系统初始化"];
function show_admin_menu(){
var admin_menu_html = "<h3>管理菜单</h3>";
for(var i=0;i<super_menu_arr.length;i++){
    if(i==1){
      admin_menu_html += "<h4 id=\"super_menu_"+i+"\" οnclick=\"show_base_menu('base_menu_"+i+"',this)\" style=\"background:url(demo/11/arrow_open.gif) #EEEEEE no-repeat 4px 3px;\">"+super_menu_arr[i]+"</h4>";
      admin_menu_html += "<ul id=\"base_menu_"+i+"\">";
    }else{
      admin_menu_html += "<h4 id=\"super_menu_"+i+"\" οnclick=\"show_base_menu('base_menu_"+i+"',this)\">"+super_menu_arr[i]+"</h4>";
      admin_menu_html += "<ul id=\"base_menu_"+i+"\" style=\"display:none;\">";
    }
    for(var k=0;k<base_menu_arr[i].length/2;k++){
      admin_menu_html += "<li><a href=\""+base_menu_arr[i][2*k]+"\"> - "+base_menu_arr[i][2*k+1]+"</a></li>";
    }
    admin_menu_html += "</ul>";
}
return admin_menu_html;
}
function show_base_menu(base_menu_id,obj){
var this_type = document.getElementById(base_menu_id).style.display;
for(var i=0;i<super_menu_arr.length;i++){
    eval("document.getElementById(\"base_menu_"+i+"\").style.display = \"none\";");
    eval("document.getElementById(\"super_menu_"+i+"\").style.background = \"url(demo/11/arrow_close.gif) #EEEEEE no-repeat 4px 3px\";");
}
if(this_type == "none"){
    document.getElementById(base_menu_id).style.display = "";
    obj.style.background = "url(demo/11/arrow_open.gif) #EEEEEE no-repeat 4px 3px";
}
}
</script>
</head>
<body>
<div id="admin_menu"></div>
</body>
</html>
<script language="javascript">
document.getElementById("admin_menu").innerHTML = show_admin_menu();
</script>