如何制作导航菜单

作者:鱼跃CMS 发布时间:2019年04月27日 访问量:260

导航菜单是一个网站重要的组成部分,基本每个网站都会有导航菜单,这一篇我们来介绍一下如何制作导航菜单。

在鱼跃CMS中,导航菜单我们可以用标签“caidan.caidan1”来输出,这里的标签用的是拼音,中间的点表示标签是由两部分组成的,点的左边是菜单这个大类,点的右边是菜单大类里面的第一个菜单小类,这第一个菜单小类就是网站的导航菜单。我们先来看一个导航菜单输出的实例,这个实例是系统自带主题的导航菜单的代码,代码如下:

{volist name="caidan.caidan1" 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}" target="{$vo.target}">{$vo.icon}{$vo.label}</a>
</li>
{else /}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="{$vo.href}" target="{$vo.target}" id="navbarDropdown" data-toggle="dropdown">
{$vo.icon}{$vo.label}
</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}" target="{$voc.target}">{$voc.icon}{$voc.label}</a>
{/volist}
</div>
</li>
{/empty}
{/volist}

上面这段代码就是导航菜单的输出代码,其中的HTML代码请根据您的实际情况修改,这里只是标签用法的示例。我们下面来解说一下:

我们可以看到,在这个导航菜单输出代码的最外层是volist的循环标签,这个循环标签是对“caidan.caidan1”标签进行循环输出,我们这里定义的菜单项的id为“vo”,那么循环体内部就可以用vo来输出每一个项的值。在循环体内部有一个“empty”标签用来判断是否存在子菜单,如果子菜单为空的话直接输出当前菜单项即可,如果当前菜单项下面有子菜单的话,那么再一次用volist循环输出子菜单。上面代码中“{volist name="vo.child" id="voc"}”就是用来循环输出子菜单的,这里子菜单用“vo.child”来表示,由于外层循环已经使用了id是“vo”,我们把子菜单循环的id设置为“voc”,这个内部的循环体里面就可以用“{$voc.标签名}”这样的形式来调用了。

鱼跃CMS是可以设置多个菜单分类的,除了导航菜单外,您还可以根据实际情况添加其他的菜单分类,新增的菜单分类调用方法都一样,只要把“caidan.caidan1”中最后的“1”替换成“2”、“3”„„,比方说,您增加了另一个菜单分类,那么,您可以使用“caidan.caidan2”的方法来调用。

至此我们对导航菜单的制作方法已经介绍完毕。

25
登录后才能评论,请先登录
鱼跃CMS
网址:http://www.yuyue-cms.com
邮箱:804644245@qq.com
联系我们
QQ:804644245
QQ群:835350102 鱼跃CMS
Copyright © 2019 鱼跃CMS - 留言
二维码
意见反馈
鱼跃CMS