[分享]空间模板之菜单栏修改！顶帝国cms - 安全、强大、稳定、灵活

帝国论坛 → 帝国网站管理系统交流区 → 帝国CMS使用交流 → [分享]空间模板之菜单栏修改！顶

【本版专题贴子】

1/2 1 2 ›› ›|

xiaoai520ni
用户头衔：举人

精华贴   ：0
发贴数   ：318
经验值   ：957
注册时间：2009-03-31

信息

搜索

好友

发送悄悄话

【精益求精－帝国网站管理系统7.5正式版开源发布】 [第 1 楼]

[分享]空间模板之菜单栏修改！顶

大家好
这个是我第一次分享
是一个关于控制面板左侧导航栏帝国所说的功能菜单
是我从网上特效资源
改版而来的
大家可以试一试
看以下代码
<!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>
[!--temp.xiaochu--]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>控制面板[!--temp.biaoti--]</title>
<link href="[!--news.url--]skin/default/css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script type="text/javascript" src="[!--news.url--]e/data/js/ajax.js"></script>
<SCRIPT language=JavaScript type=text/javascript>
function switchShow(id){
var tObj = document.getElementById("div_"+id);
var iObj = document.getElementById("a_"+id);
if(tObj) tObj.style.display=(tObj.style.display=='none')?"block":"none";
if(iObj&&tObj)iObj.className=(tObj.style.display=='none')?"act":"";
//alert(tObj.style.display);
}
function set(obj){
document.getElementById(obj).style.display='block';
document.getElementById(obj+'1').style.display='none';
}
function cancel(obj){
document.getElementById(obj).style.display='none';
document.getElementById(obj+'1').style.display='block';
}
</SCRIPT>
</head>
<body class="listpage">
[!--temp.dtheader--]
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<td class="list_content"><table style="margin-top:8px; text-align:left;" width="100%" border="0" cellspacing="0" cellpadding="0" class="position">
<tr>
<td>现在的位置：[!--newsnav--]
</td>
</tr>
</table>
   <table width="960" border="0" cellspacing="0" cellpadding="0" class="box">
      <tr>
      <td width="177" valign="top"><div class="Al">
         <div class="Al_1">控制面板</div>
         <div class="Al_2">
<span><img src="http://pop.itkeji.net/images/base/toolbar_icon_post.gif" width="16" height="16" /><A style="PADDING-RIGHT: 30px; BACKGROUND-IMAGE: url(http://www.itkeji.net/img/news_fabu.gif)" href="[!--news.url--]e/DoInfo/">发布文章</A></span><br>
<span><img src="http://bbs.itkeji.net/images/default/tradesmall.gif" width="16" height="16" /><A href="http://shop.itkeji.net" target="_parent" style="PADDING-RIGHT: 30px; BACKGROUND-IMAGE: url(http://www.itkeji.net/img/news_fabu.gif)">我要购物</A></span>
<span><img src="http://bbs.itkeji.net/images/default/digest_3.gif" width="16" height="13" /><A id=a_1 onclick="javascript:switchShow('1')" href="javascript:void(0);" target=_self>帐号状态</A></span>
<div id=div_1 style="DISPLAY: block"><A href="[!--news.url--]e/member/my/">前台状态</A><BR>
   <A href="http://bbs.itkeji.net/space.php?uid=<?=$user[userid]?>" target="_blank">论坛状态</A>  </div>

         </div>
      </div></td>
      <td width="783" valign="top">[!--empirenews.template--]</td>
      </tr>
   </table></td>
</tr>
</table>
[!--temp.footer--]
</body>
</html>
需要重复的就是绿色与红色部分
一般是红色部分
这样的菜单更有利于充分利用空间
你可以直接改动结合你的论坛等资料

就来说说怎么改动JS对应的ID吧
相信老鸟们一看就知道怎么改

对于新手我就在说一下
鄙视懒惰的人

<span><img src="http://bbs.itkeji.net/images/default/digest_3.gif" width="16" height="13" /><A id=a_1 onclick="javascript:switchShow('1')" href="javascript:void(0);" target=_self>帐号状态</A></span>
<div id=div_1 style="DISPLAY: block"><A href="[!--news.url--]e/member/my/">前台状态</A><BR>
<A href="http://bbs.itkeji.net/space.php?uid=<?=$user[userid]?>" target="_blank">论坛状态</A> </div>

其实很简单的
红色的IMG就不用多说了！这个不会改就没得话说了啊

接下来就是红色部分
在超链接标签中的ID的编码是与实现效果中的编码相对应的
比如连接中的 id="a_1"
那么行为动作对应的也要是编码1
效果中对应的也是1

在增加第二项的时候
复制整段代码
然后
那个ID编号改为不一样的就是了
其他的一定要改哦
呵呵呵
简单吧
有时间大家以后多多关照本站
IT科技网
IT科技论坛
效果图附上

上传以下图片：