剑鱼论坛主题(模板)制作之导航菜单

 剑鱼论坛 发表于 2019年12月21日 剑鱼主题教程  172
剑鱼论坛
LV 6 高中
最后在线:5小时前
加入时间:339天前
主帖:89  跟帖:53

我们在教程《剑鱼论坛如何设置导航菜单》中介绍过怎么设置导航菜单,这一篇我们将来学习实现导航菜单的主题(模板)代码。

我们先来看一下默认主题里面的导航菜单源码:

{volist name="caidan" id="vo"}
{empty name="vo.child"}
<li class="nav-item{if condition="$vo.active eq 1"} active{/if}">
<a class="nav-link" href="{$vo.href}">{$vo.icon}{$vo.name}</a>
</li>
{else /}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="{$vo.href}" id="navbarDropdown" data-toggle="dropdown">
{$vo.icon}{$vo.name}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{volist name="vo.child" id="voc"}
<a class="dropdown-item{if condition="$voc.active eq 1"} active{/if}" href="{$voc.href}">{$voc.icon}{$voc.name}</a>
{/volist}
</div>
</li>
{/empty}
{/volist}

以上代码就是摘自默认主题的导航菜单源码,我们来解释一下这个代码。

这个代码用到了一个名为“caidan”的标签,并且这个标签是一个循环输出标签,我们用标签语法“volist”来循环输出。在循环体内部,我们首先用了“empty”语法来判断是否存在子菜单,如果没有子菜单的话,那么直接用HTML代码的“li”标签来输出菜单项;如果有子菜单的情况,那么先输出这个菜单项,然后再使用一个“volist”语法来循环输出其子菜单,子菜单的标签是“vo.child”,这里要注意的是,由于子菜单的循环是在最外面的大循环内部,所以子菜单循环的id需要跟外部循环不一样,我们这里用了“voc”来标记,循环体内部就可以使用“voc.标签名”的方式来进行输出。

每个输出项的标签意思如下:

{$vo.href}:表示菜单项的地址;

{$vo.icon}:表示菜单项的图标;

{$vo.name}:表示菜单项的名称。

另外还有一个条件判断语句“$vo.active eq 1”用来判断是否当前活动菜单项,如果是活动菜单项的话,那么添加“active”样式高亮显示。

由于默认主题是使用前端框架bootstrap4写的,所以这里的样式代码是bootstrap4的,如果您使用的是其他前端框架或者完全自己写样式的话,那么只需要把里面的HTML代码和对应的样式改成您自己使用的就可以了,剑鱼的标签结构您完全可以照搬,所以实现起来也是不难的。

好了,剑鱼论坛的导航菜单制作已经介绍完了。

论坛主帖
162
论坛跟帖
142
在线访客
3
今日主帖
0
今日跟帖
0
今日注册
0
50
http://jianyuluntan.com/gentie.html
http://jianyuluntan.com/postzan.html
http://jianyuluntan.com/postcai.html
http://jianyuluntan.com/postshoucang.html
http://jianyuluntan.com/gentiezan.html
http://jianyuluntan.com/gentiecai.html
http://jianyuluntan.com/huifu.html
http://jianyuluntan.com/xiugai.html
http://jianyuluntan.com/shanchugentie.html
1
XzA=
1
© 2019 - 2020 剑鱼论坛 版权所有
Powered by JianYuLunTan
剑鱼论坛 976666861
http://jianyuluntan.com/feedback.html
http://jianyuluntan.com/qiandao.html
http://jianyuluntan.com/denglu.html
0
http://jianyuluntan.com/adenglu.html
0
剑鱼论坛