首先,本文不采用“带模板的栏目导航标签(showclasstemp)",因为它支持的父参数太少,只有4个(:[!--bclassname--]:父栏目名,[!--bclassurl--]:父栏目链接,[!--bclassid--]:父栏目id)。优先使用“循环栏目导航标签listshowclass”,这是因为它的父参数很多(:[!--bclassname--]:父栏目名,[!--bclassurl--]:父栏目链接,[!--bclassid--]:父栏目id,[!--bclassimg--]:父栏目图片,[!--bintro--]:父栏目简介,[!--bnum--]:父栏目信息数,[!--bno--]:父栏目序号)。 而且我们接下来要制作的就是“中国站长站chinaz.com”的栏目二级导航 第一步,分析篇: “中国站长站chinaz.com”的栏目二级导航的大概html代码如下: <div class="nav"> <div class="navinner"> <ul class="navlist"> <li><a href="/">首页</a></li> <li><a href="/News/Index.html" id="nav_1" onmouseover="showMenu('nav_1','subnav1')">新闻资讯</a> <div class="subnav disable" id="subnav1"> <p class="pointer">.</p> <p><span> <a href="/News/It/Index.html">业界动态</a> | <a href="/News/Invest/Index.html">收购融资</a> | <a href="/News/Portals/Index.html">门户动态</a> | <a href="/News/Search/Index.html">搜索引擎</a> | <a href="/News/Game/Index.html">网络游戏</a> | <a href="/News/Biz/Index.html">电子商务</a> | <a href="/News/Media/Index.html">广告传媒</a> | <a href="/News/Soft/Index.html">厂商开发</a> </span></p> </div> </li> <li><a href="/Webmaster/Index.html" id="nav_2" onmouseover="showMenu('nav_2','subnav2')">站长在线</a> <div class="subnav disable" id="subnav2"> <p class="pointer">.</p> <p><span> <a href="/Webmaster/RecSite/Index.html">好站推荐</a> | <a href="/Webmaster/Gather/Index.html">站长聚会</a> | <a href="/Webmaster/Visit/Index.html">站长访谈</a> | <a href="/Webmaster/Club/Index.html">站长茶馆</a> | <a href="/Webmaster/Topsite/Index.html">网站排行</a> </span></p> </div> </li>…… </ul> </div> </div> 大家可以看出这是一个典型的列表式外加循环子栏目导航,其中父栏目不单有名字链接,还有id和序号,带模板的栏目导航showclasstemp是不能托起这个二级导航动态链接显示重任的,只能使用listshowclass.
第二步.代码篇 1、tab.Js文件的修改:-----------这个是站长站的二级导航JS,直接上他的网站复制下来,具体内容就不列出(就是你二级导航所用到的javascript,复制到这里)
2、打开后台——管理标签模板——选择“1号子栏目导航标签模板”。点击“修改”,在页面模板内容中输入以下内容:(对应父栏目内容) <li><a href="[!--bclassurl--]" id="nav_[!--bno--]" onmouseover="showMenu('nav_[!--bno--]','subnav[!--bno--]')">[!--bclassname--]</a> <div class="subnav disable" id="subnav[!--bno--]"> <p class="pointer">.</p> <p><span> | [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--] </span></p> </div> </li> 在列表内容模板输入:(对应子栏目)<a href="[!--classurl--]">[!--classname--]</a> | 点击“保存模板”
3、打开后台-模板管理-管理模板变量-[!--temp.header--] ,把前面中国站长站的二级导航HTML代码,修改一下: <div class="nav"> <div class="navinner"> <ul class="navlist"> <li><a href="/">首页</a></li> [listshowclass]'0',1,1,0[/listshowclass] </ul> </div> </div> 在此解释一下:这里是让所有的像父栏目按照1号栏目标签的样子,连带子栏目一起显示出来。不带信息数和栏目数
4、到此还不能结束,大家修改完后会发现,在首页正常显示,到了另一个父栏目下却不是显示一排父栏目,而是子栏目的,非正常显示。这是因为我们还未设置下面一项:打开后台——栏目管理——管理栏目——选择每一个父栏目——点击“修改”——选择“生成选项”——选择“列表模式”和“内容页模式”都为动态生成——点击“提交”——刷新首页
|