帝國CMS5.1首頁二級導航顯示的問題
來源:程序員人生 發布時間:2013-12-05 16:57:59 閱讀次數:3513次
關于帝國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,改了導航后選項卡不正常顯示,現在已經修正了
生活不易,碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈