文理人BBS自用仿绿色果粒模板导航栏修改方法[Discuz!X2.0]

2013-5-19 01:25| 发布者: 眼镜蛇| 查看: 2882| 评论: 21|原作者: 眼镜蛇

摘要: 鉴于很多站长要求我分享现在网站使用的导航栏，其实只是再当初的“仿果粒橙DX2.0”模板上稍作修改，现将修改方法总结如下：...

鉴于很多站长要求我分享现在网站使用的导航栏，其实只是再当初的“仿果粒橙DX2.0”模板上稍作修改，现将修改方法总结如下：

1.解压下载得到的nv_upload.rar文件，将对应的upload中的文件上传到网站目录；（下载地址：http://www.discuz.net/thread-2238172-1-1.html）
2.打开./template/lcl_guoli_dx2.0/common/header.htm，
查找：

<div id="nv">
<a href="javascript:;" id="qmenu" onmouseover="showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});">{lang my_nav}</a>
<ul>
<li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li>
</ul>
</div>

复制代码

替换为：

<div id="nv_left">
<div id="nv_right">
<div id="nv">
<a href="javascript:;" id="qmenu" onmouseover="showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});">{lang my_nav}</a>
<ul>
<li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li>
</ul>
</div>
</div>
</div>

复制代码

3.打开./template/lcl_guoli_dx2.0/common/extend_common.css，
查找：

/* 重定义全站导航 --> nv */
#nv {
height: 36px;
}
#nv li.a {
background: url("lcl/guoli/nv_a.png") no-repeat right -36px;
line-height: 36px;
margin-left: 2px;
margin-right: 2px;
}
#nv li {
float: left;
height: 36px;
line-height: 36px;
font-weight: 700;
font-size: 14px;
}
#nv li a {
padding-top: 0px;
padding-right: 15px;
padding-bottom: 0px;
padding-left: 15px;
height: 36px;
margin-left: 1px;
margin-right: 1px;
}
#nv li.a a {
color: #360;
}
#nv li a:hover {
background: url({IMGDIR}/nv_a.png) no-repeat right -36px;
color: #360;
}

复制代码

替换为：

/* 重定义全站导航 --> nv */
#nv { height: 45px; }
#nv_left { background: url("lcl/guoli/nv_left.gif") no-repeat 0 0; height: 45px; padding-left: 4px; }
#nv_right { background: url("lcl/guoli/nv_right.gif") no-repeat right top; padding-right: 4px; }
#nv li { background: url("lcl/guoli/nv_line.gif") no-repeat 100% 30%; height: 43px; line-height: 40px; }
.ie_all #nv li { line-height: 40px; }
#nv li a { height: 43px; }
#nv li.a a { background: url("lcl/guoli/nv_aright.gif") no-repeat 0 0; }
#nv li a:hover { background: url("lcl/guoli/nv_aright.gif") no-repeat 0 0; color: #360; text-decoration: none; }
.ie6 #nv li a:hover { background:none; }
#nv li:hover { background: url("lcl/guoli/nv_a.gif") no-repeat 100% 0; }

复制代码

4.进入网站后台，进入风格编辑界面：

菜单背景颜色 {MENUBGCOLOR},{MENUBGCODE}:第一行留空，第二行设为nv_bg.jpg，第三行设为repeat-x 0 0；
菜单高亮背景 {MENUHOVERBGCOLOR},{MENUHOVERBGCODE}:第一行留空，第二行设为nv_a.gif，第三行设为no-repeat 100% 0；
菜单高亮文字颜色 {MENUHOVERTEXT}:#360;

更新缓存即可。

-------------------------------------

【操作中可能会出错的地方】
1.查找和替换代码的时候操作不当，或者复制粘贴后格式（换行）有错乱
--->自行稍作排版就可以了，比如“/* 重定义全站导航 --> nv */”这个是注释，如果中间换行可能影响代码作用，请检查确认它是单独的一行，或者可以将本行删去。

2.不要忘了后台对风格选项需要编辑的几个参数设置
--->步骤4中仅橙色的内容为需要填的参数，注意不要填写多余的符号，诸如“、”或者“；”，否则会导致代码解析错误，样式控制不生效。