[帮助主题] 主栏目菜单模版制作

在刚才的首页模版中增加主栏目菜单的背景区域,并插入“横式主栏目菜单”标签{#modMainMenu#},效果如下:


打开横式主栏目菜单插件模版tpl_menu.htm ,改成如下图所示的式样:

以上栏目菜单的html代码如下:

<!-start->
<table border=0 cellspacing=0 cellpadding=0 height=24>
<!-start->

<!-rowstart->
<tr>
<!-rowstart->

<!-menunow->
<td width="88" align='center' background="images/menunow.gif" >
<a href="{#menuurl#}" class=menunow target="{#target#}">{#menu#}</a>
</td>
<!-menunow->

<!-menudivide->
<td width=5></td>
<!-menudivide->

<!-blankdivide->
<td width=5 ></td>
<!-blankdivide->

<!-menu->
<td width="88" align='center' background="images/menu.gif" >
<!-text->
<a href="{#menuurl#}" class=menu target="{#target#}">{#menu#}</a>
<!-text->
</td>
<!-menu->

<!-rowend->
</tr>
<!-rowend->

<!-end->
</table>
<!-end->

在以上代码中,包含了简单的模版语法,语法标签成对出现,用途如下:

<!-start->:模版开始
<!-rowstart->:模版行开始
<!-rowend->:模版行结束,当达到每行显示条数时,模版行代码自动循环一次,实现换行
<!-menunow->:当前栏目菜单按钮
<!-menu->:非当前栏目菜单按钮
<!-menudivide->:菜单按钮件中间分隔带
<!-blankdivide->:菜单按钮件中间空白带,当菜单换行时,两行数量不一样时用来补缺
<!-end->:模版结束


在本例中,当前栏目菜单和非当前栏目菜单分别采用不同的背景图片,以达到效果。

只要符合这个规律,发挥想象力,完全可以制作各种各样的栏目菜单。


[本例效果预览]