discuz主导航栏修改为通栏的方法

2023-9-26 15:10

 导航背景图案及背景色可以在后台设置,现在将导航栏修改为通栏的步骤如下:
一、修改正在使用的模板中的header.htm 文件,一般在模板中的 common 文件夹中,找到后用记事本或DW打开,搜索如下代码:
<div id="hd">
<div class="wp"> //这个CSS就是定义页面宽度的
<div class="hdc cl">
<!--{leval $Smnid = getcurrentnav();}-->
<h2><!--{if !isset ($_G['setting']['navlogos'] [$mnid])}—><a href="{if$_G['setting']['domain']['app']['default']}https://[$_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']  &&
……
……
……
</ul>
<!--{/if}-->
<!--{/1oop}-->
<!--{/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="{lif $_G[’setting' ][’domain’][’app’] [’default’]}https://{$_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']  &&
……
……
……
</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']}-->
<!--{1oop  $_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>

二、增加CSS样式
在你使用的模板中找到CSS 文件,一般也是在 common 文件夹中的,在适当位置加入以下代码:

/* 定义导航条宽度 */
.wpdh { margin: 0 auto; width: 960px; } #wpdh.wpdh { width:auto; }
以上步骤完成后,把修改后文件上传,覆盖原来的两个文件,到后台更新缓存即可看到导航条已经变成了通栏导航了。

Copyright © 2002-2024 Iszw.net All Rights Reserved.      川公网安备 51010702002244号

蜀ICP备2020035322号-1    本站已开启 IPv6 访问

返回顶部