Eyoucms手风琴三级菜单，掌握三级分类用法

速优网络（10年经验），服务数万家企业，固定透明报价。域名注册、主机/服务器、网站源码一站式服务。实体公司，专业团队，值得选择！建站业务：企业网站建设、公司官网制作、外贸网站建设、网站仿制、网站复制、仿站、外贸建站、单页扒站客服微信【suyoufuwu】

应用：适用于左右结构排版三级产品分类或文章分类。

1、效果图

eyoucms手风琴三级菜单标签

2、HTMl

<!-- 分类折叠手风琴菜单 开始 -->
<div class="subnavbox bg-white radius">
<h2 class="bg-blue text-white">{eyou:channelartlist typeid='$eyou.field.typeid|gettoptype=###,typeid'}{eyou:field name='typename' /}{/eyou:channelartlist}</h2>
<!--当前栏目下二级栏目调用-->
{eyou:channel type="first" currentstyle="active"} 
    {eyou:eq name='$eyou.field.grade' value='2'} 
        {eyou:type typeid='$eyou.field.typeid' id='field1'} 
            {eyou:eq name='$field1.parent_id' value='$field.id'} 
                {eyou:assign name='$field.currentstyle' value='current' /}
                <!--current对应样式中的display:block-->
            {/eyou:eq} 
        {/eyou:type} 
    {/eyou:eq}
    <div class="{$field.currentstyle}dd {$field.currentstyle}dt suboneNav">{$field.typename}</div>
    <!--当前栏目下三级栏目调用-->
    {eyou:notempty name="$field.children"}
    <ul class="cur-bg {$field.currentstyle}">
        {eyou:channel name="$field.children" id="field2"}
        <li><a href="{$field2.typeurl}" class="{$field2.currentstyle}">{$field2.typename}{$field2.typeid}</a>
        </li>
        {/eyou:channel}
    </ul>
    {/eyou:notempty} 
{/eyou:channel}
</div>
<!-- 分类折叠手风琴菜单 结束 -->

3、CSS

.subnavbox h2 {line-height:60px;height:60px;position:relative;font-size:20px;padding:0 0 0 20px;}
.subnavbox .current {display:block;}
.subnavbox .cur-bg{background:#fff;padding:10px 0;}
.subnavbox ul {display:none;}
.subnavbox ul li a{display:block;line-height:36px;font-size:14px;color:#999;padding-left:20px;}
.subnavbox ul li a:hover {color:#FF6D33;}
.subnavbox ul li a.active {color:#FF6D33;}
.suboneNav{border-bottom:solid 1px #0BECF1;background:#0AD4D9 url(../images/ico_jia.png) no-repeat;background-position:95% 50%;cursor:pointer;font-size:16px;color:#fff;line-height:54px;padding-left:20px;}
.suboneNav:last-child{border-bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px} 
.currentdt {background-image:url(../images/ico_jian.png);}

4、JS

$(".suboneNav").click(function () {
    $(this).toggleClass("currentdd").siblings(".suboneNav").removeClass("currentdd");
    $(this).toggleClass("currentdt").siblings(".suboneNav").removeClass("currentdt");
    $(this).next("ul").slideToggle(300).siblings("ul").slideUp(500);
})

以上就是速优网络和大家分享的"Eyoucms手风琴三级菜单，掌握三级分类用法",非常感谢您有耐心的读完这篇文章，我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供：企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务，本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作，请扫码咨询，我们将诚挚为您服务。

TAG标签：易优cms

上一篇： eyoucms隐藏标签整理

下一篇： eyoucms判断顶级栏目下是否有子栏目