• 微信
当前位置:首页 >> CMS笔记

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

作者:玄北 时间:2021-12-07 阅读数:229人阅读

从本篇教程开始,将会以网站中常用的一些组件为例,来帮助大家了解和熟悉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>

导航高亮:

原理:判断当前栏目的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>
        </li>    
        {/pboot:nav}    
    </ul>    
</nav>

有的同学会发现,这种导航高亮的方式,在除首页外的其他栏目,给其栏目下的二级分类做高亮时,就不好用了,那么,玄北来改一点:

<nav class="menu">    
    <ul>    
        {pboot:nav}    
        <li class="{pboot:if('[nav:scode]'=='{sort:scode}')}active{/pboot:if}">    
            <a href="[nav:link]">[nav:name]</a>
        </li>    
        {/pboot:nav}    
    </ul>    
</nav>

细心的同学应该可以发现,{sort:tcode}被我改成了{sort:scode}

免责声明:本站部分文章、数据、图片来自互联网,

如果侵犯了你的权益请来信告知我们删除,否则不承担相应法律责任。邮箱:xuanbei@xuanbeiweb.cn

标签: pbootcms 导航
玄北头像

玄北

Hi~如果您正好看到这里,可以扫一扫微信二维码加我为好友,我是一个喜欢交朋友的人,我知道您也是哦~

玄北微信

发表评论:

评论记录:

暂无评论——欢迎您的点评!