当前位置:首页>文章资讯PbootCMS教程> pbootcms模板制作教程五:多级导航菜单

pbootcms模板制作教程五:多级导航菜单

从本篇教程开始,将会以网站中常用的一些组件为例,来帮助大家了解和熟悉PbootCMS的标签。

因为习惯从上往下写页面代码,所以就从网页头部的导航菜单开始。

 

本篇教程所需要掌握的知识点:CSS盒子模型、CSS选择器、浮动、清除浮动、绝对定位、相对定位、CSS3 2D转换、CSS3 过渡、导航菜单列表标签、当前栏目标签、if条件语句、PHP运算符。

 

每个人都有自己的代码习惯,比如我就喜欢先写HTML(结构),再写模板标签(数据),接着写CSS(样式),最后写JS(交互)。

所以,先开始写导航菜单的HTML部分:

<!– 演示就只写二级导航,更多级导航大家可以依葫芦画瓢 –>
<nav class=”menu”>
<ul>
<li>
<a href=”#”>主栏目</a>
<ul>
<li><a href=””>子栏目</a></li>
<li><a href=””>子栏目</a></li>
</ul>
</li>
</ul>
</nav>

接下来,使用PbootCMS的模板标签来填充数据:

<nav class=”menu”>
<ul>
{pboot:nav}
<li>
<a href=”[nav:link]”>[nav:name]</a>
<ul class=”sub-menu”>
{pboot:2nav parent=[nav:scode]}
<li>
<a href=”[2nav:link]”>[2nav:name]</a>
</li>
{/pboot:2nav}
</ul>
</li>
{/pboot:nav}
</ul>
</nav>

看一下前端页面:

pbootcms模板制作教程五:多级导航菜单

可以看到,二级菜单已经调用出来了,接下来处理一下导航高亮。

 

导航高亮:

原理:判断当前栏目的ID和导航的ID是否一致,如果一致,则添加class,然后CSS中给这个class设置高亮样式。

方案:使用if条件语句结合当前栏目标签以及导航菜单列表标签进行判断。

代码:

<nav class=”menu”>
<ul>
{pboot:nav}
<li class=”{pboot:if(‘[nav:scode]’=='{sort:tcode}’)}active{/pboot:if}”>
<a href=”[nav:link]”>[nav:name]</a>
<ul class=”sub-menu”>
{pboot:2nav parent=[nav:scode]}
<li class=”{pboot:if(‘[2nav:scode]’=='{sort:scode}’)}active{/pboot:if}”>
<a href=”[2nav:link]”>[2nav:name]</a>
</li>
{/pboot:2nav}
</ul>
</li>
{/pboot:nav}
</ul>
</nav>

版权声明 1 本站永久网址:https://www.gzkj8.com
2 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长:yixinis@163.com,进行删除处理。
3 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
4 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
PbootCMS教程文章资讯

pbootcms模板制作教程四 :pbootcms模板标签手册

2023-6-13 15:23:39

PbootCMS教程文章资讯

pbootcms模板制作教程六:首页Banner轮播

2023-6-13 15:25:51

0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
搜索