销售只是起点、服务永无止境 云创模板

您现在的位置: 云创网 > 使用教程 >

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

来源:原创 发布时间:2022-08-22 09:17:01 热度:440 ℃标签: 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>

 

看一下前端页面:

002.jpg

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

 

导航高亮:

原理:判断当前栏目的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>


转载请注明来自http://www.gdaia.com/muban/newsshow/252.html
如有版权纠纷或者违规问题,请联系我们删除,谢谢!

    限时特惠!终身会员 仅需199元!上架最多的PbootCMS模板下载站!建站资源爽快下!
     
    QQ在线咨询