主导航栏修改为通栏的方法修正版.docx

主导航栏修改为通栏的方法
只要修改模板的header.htm和对应的CSS文件就可以实现，CSS文件每个模板命名不同，所以得自己找一下。
以下为个人摸索出来的经验，适合新手，大神请飘过。
1、首先准备好导航条的背景图片，一般为nv.png，有些模板的图片的名称和后缀可能不一样，你就按照模板的图片的名称和后缀用PS或CDR去做就行了，图片的宽度一般用1px，高度要和模板原来的导航背景图片保持一致。要是你不需要图片也可以，到后台设置颜色就行，后面的步骤有说到的。
2、登录后台，选择“界面”—“风格管理”，找到你在用的模板，点击编辑，如下图：

（1） 需要使用背景图片的
页面往下拉找到“菜单”，修改导航条背景图片名称，一般为：nv.png，有些模板可能会不一样，按实际名称修改即可，属性：repeat-x 0 0
如下图：

完成输入后，页面拉到最后，点击“提交”后就已经设置好，未提交的话设置无效。
（2） 不需要使用背景图片的
页面往下拉找到“菜单”，如（1）的图，图片背景的话就是设置第二、三两个方框，而背景颜色的话只需设置第一个方框，可以在PS/CDR或网络查找你需要的颜色代码（16进制），粘贴到第一个方框，点击“提交”后就可以完成设置了。

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['setting']['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','duration':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['setting']['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','duration':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; }
以上步骤完成后，把修改后文件上传，覆盖原来的两个文件，到后台更新缓存即可看到导航条已经变成了通栏导航了，如下图：

至此已经完成了通栏导航的修改。