discuz主导航栏修改为通栏的方法
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
主导航栏修改为通栏的方法
只要修改模板的header.htm和对应的CSS文件就可以实现,CSS文件每个模板命名不同,所有得自己找一下。
以下为个人摸索出来的经验,适合新手,大神请飘过。
1、首先准备好导航条的背景图片,一般为nv.png,有些模板的图片的名称和后缀可能不一样,你就按照模板的图片的名称和后缀用PS 或CDR去做就行了,图片的宽度一般用1px,高度要和模板原来的导航背景图片保持一致。
要是你不需要图片也可以,到后台设置颜色就行,后面的步骤有说到的。
2、登录后台,选择“界面”—“风格管理”,找到你在用的模板,点击编辑,如下图:
然后找到菜单,修改导航条背景图片名称,一般为:nv.png,有些模板可能会不一样,按实际名称修改即可,属性:repeat-x 0 0
如下图
3、后台已经设置好,现在就要修改你正在使用的模板中的header.htm 文件,一般在模板中的common文件夹中,找到后用记事本或DW打开,在118行左右找到以下代码:
<div id="hd">
<div class="wp"> //这个CSS就是定义页面宽度的
<div class="hdc cl">
<!--{eval $mnid = getcurrentnav();}-->
<h2><!--
{if !isset($_G['setting']['navlogos'][$mnid])}--><a href="{if
$_G['setting']['domain']['app']['default']}http://{$_G['set ting']['domain']['app']['default']}/{else}./{/if}"
title="$_G['setting']['bbname']">{$_G['style']['boardlogo'] }</a><!--{else}-->$_G['setting']['navlogos'][$mnid]<!--
{/if}--></h2>
<!--{template common/header_userstatus}--> </div>
<div id="nv">
<a href="javascript:;" id="qmenu" onMouseOver="delayShow(this, function () {showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','du ration':2});showForummenu($_G[fid]);})">{lang my_nav}</a>
<ul>
<!--{loop $_G['setting']['navs'] $nav}-->
<!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li><!--{/if}-->
<!--{/loop}-->
</ul>
<!--{hook/global_nav_extra}-->
</div>
<!--
{if !empty($_G['setting']['plugins']['jsmenu'])}-->
<ul class="p_pop h_pop" id="plugin_menu" style="display: none">
<!--{loop $_G['setting']['plugins']['jsmenu'] $module}-->
<!--{if !$module['adminid'] || ($module['adminid'] && $_G['adminid'] > 0 && $module['adminid'] >= $_G['adminid'])}-->
<li>$module[url]</li>
<!--{/if}-->
<!--{/loop}-->
</ul>
<!--{/if}-->
$_G[setting][menunavs]
<div id="mu" class="cl">
<!--{if $_G['setting']['subnavs']}-->
<!--{loop $_G[setting][subnavs] $navid $subnav}-->
<!--{if $_G['setting']['navsubhover'] || $mnid == $navid}-->
<ul class="cl {if $mnid == $navid}current{/if}" id="snav_$navid" style="display:{if $mnid != $navid}none{/if}">
$subnav
</ul>
<!--{/if}-->
<!--{/loop}-->
<!--{/if}-->
</div>
<!--二级导航模块开始-->
<!--{subtemplate common/header_subnav}-->
<!--二级导航模块结束-->
<!--{ad/subnavbanner/a_mu}-->
</div>
</div>
需要在上面的代码加入三个DIV,并需要增加CSS样式。
修改为:
<div id="hd">
<div> //此处删除class="wp"
<div class="wp"> //此处加入第一个DIV,样式为class="wp"
<div class="hdc cl">
<!--{eval $mnid = getcurrentnav();}-->
<h2><!--
{if !isset($_G['setting']['navlogos'][$mnid])}--><a href="{if
$_G['setting']['domain']['app']['default']}http://{$_G['set ting']['domain']['app']['default']}/{else}./{/if}"
title="$_G['setting']['bbname']">{$_G['style']['boardlogo'] }</a><!--{else}-->$_G['setting']['navlogos'][$mnid]<!--
{/if}--></h2>
<!--{template common/header_userstatus}--> </div>
</div>//此处为第一个DIV结束
<div id="nv">
<div class="wpdh">//此处加入第二个DIV,样式为class="wpdh"
<a href="javascript:;" id="qmenu" onMouseOver="delayShow(this, function () {showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','du ration':2});showForummenu($_G[fid]);})">{lang my_nav}</a>
<ul>
<!--{loop $_G['setting']['navs'] $nav}-->
<!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li><!--{/if}-->
<!--{/loop}-->
</ul>
<!--{hook/global_nav_extra}-->
</div> //此处为第二个DIV结束
</div>
<div class="wpdh"> //此处加入第三个DIV,样式为class="wpdh"
<!--
{if !empty($_G['setting']['plugins']['jsmenu'])}-->
<ul class="p_pop h_pop" id="plugin_menu" style="display: none">
<!--{loop $_G['setting']['plugins']['jsmenu'] $module}-->
<!--{if !$module['adminid'] || ($module['adminid'] && $_G['adminid'] > 0 && $module['adminid'] >= $_G['adminid'])}-->
<li>$module[url]</li>
<!--{/if}-->
<!--{/loop}-->
</ul>
<!--{/if}-->
$_G[setting][menunavs]
<div id="mu" class="cl">
<!--{if $_G['setting']['subnavs']}-->
<!--{loop $_G[setting][subnavs] $navid $subnav}-->
<!--{if $_G['setting']['navsubhover'] || $mnid == $navid}-->
<ul class="cl {if $mnid == $navid}current{/if}" id="snav_$navid" style="display:{if $mnid != $navid}none{/if}">
$subnav
</ul>
<!--{/if}-->
<!--{/loop}-->
<!--{/if}-->
</div>
<!--二级导航模块开始-->
<!--{subtemplate common/header_subnav}-->
<!--二级导航模块结束-->
<!--{ad/subnavbanner/a_mu}-->
</div> //此处为第三个DIV结束
</div>
</div>
4、增加CSS样式
在你使用的模板中找到CSS文件,一般也是在common文件夹中的,在适当位置加入以下代码:
/* 定义导航条宽度 */
.wpdh { margin: 0 auto; width: 960px; } #wpdh .wpdh { width: auto; }
以上步骤完成后,把修改后文件上传,覆盖原来的两个文件,到后台更新缓存即可看到导航条已经变成了通栏导航了,如下图:
至此已经完成了通栏导航的修改。