程序员人生 网站导航

帝国CMS5.1首页二级导航显示的问题

栏目:DedeCMS时间:2013-12-05 16:57:59
关于帝国CMS5.1版本首页二级导航显示的完美解决方案
看到论坛上很多朋友再问5.1版本怎么能像5.0那样显示二级导航菜单,我也是初次使用帝国也遇到了相同的问题,看了论坛上各位仁兄的解决方法,小某不才总结了一下写出来奉献给大家:
一、需要改的地方有3处
1.位于web/skin/default/js/下的tabs.js把里面的内容改为
function tabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};

function etabit(btn8){
var idname = new String(btn8.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn8.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn8_"+i).className = "";
};
document.getElementById(tabName+"_div_"+id).style.display = "block";
btn8.className = "curr";
};

2.打开后台-模板管理-管理模板变量-[!--temp.header--] 在末尾</table>标记前加入以下代码:
<tr>
<td class=nav_sub><!-- 子栏目导航 -->
<div id=tabnav_div_0></div>
<div id=tabnav_div_1 style="DISPLAY: none">[showclasstemp]2,1,0,0[/showclasstemp]</div>
<div id=tabnav_div_2 style="DISPLAY: none">[showclasstemp]65,1,0,0[/showclasstemp]</div>
<div id=tabnav_div_3 style="DISPLAY: none">[showclasstemp]60,1,0,0[/showclasstemp]</div>
<div id=tabnav_div_4 style="DISPLAY: none">[showclasstemp]4,1,0,0[/showclasstemp]</div>
<div id=tabnav_div_5 style="DISPLAY: none">[showclasstemp]8,1,0,0[/showclasstemp]</div>
<div id=tabnav_div_6 style="DISPLAY: none">[showclasstemp]3,1,0,0[/showclasstemp]</div>
<div id=tabnav_div_7 style="DISPLAY: none">| <a href="http://bbs.51caiju.com/index.php?gid=1">生财有道</a> | <a href="http://bbs.51caiju.com/index.php?gid=11">授人以渔</a> | <a href="http://bbs.51caiju.com/index.php?gid=7">郎咸平专区</a> | </div>
</td></tr>

3.打开后台修改首页模板选项-找到代码"tab1_btn"改为“tab1_btn8”(在tab选项卡的下面共有4处)也就是对应tabs.js里的btn8

注意:[showclasstemp]2,1,0,0[/showclasstemp]标签的内容根据你的网站情况填写,由于我的网站最后一个栏目是外部链接所以我填的实际地址,栏目可以随意删除/修改,但必须保证
id="tabnav_btn_0" - …… - id="tabnav_btn_9"

id="tabnav_div_0" - …… - id="tabnav_div_9"
能一一对应。(当然,也不一定就刚好是9,更多更少都行)
在浏览器里打开首页点击查看源文件看以看到id="tabnav_btn_0" - …… - id="tabnav_btn_9"在-[!--temp.header--] 里修改id="tabnav_div_0" - …… - id="tabnav_div_9"使之对应即可。

修改对象:/skin/default/css/style.css。查找以下代码修改为合适的左边距。最后别忘了刷新一下首页就能看见漂亮的二级导航菜单

--------------------------------------------------------------------------------
/* 子栏目导航菜单距离调整 */
#tabnav_div_1 {
}
#tabnav_div_2 {
padding-left: 100px;
}
#tabnav_div_3 {
padding-left: 200px;
}
#tabnav_div_4 {
padding-left: 300px;
}
#tabnav_div_5 {
padding-left: 400px;
}
#tabnav_div_6 {
padding-left: 500px;
}
#tabnav_div_7 {
padding-left: 600px;
}
#tabnav_div_8 {
padding-right: 40px;
text-align: right;
}
大家如有调不出来的可以帖出首页源文件我会帮大家调整。最后AD一下我的站,希望大家有空能来坐坐,财聚网--新财富思想聚集门户

注意:发现了一个小BUG已经改了加上了步骤3,原因是上面的导航和下面的选项卡共用btn这个ID,改了导航后选项卡不正常显示,现在已经修正了
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐