2020-05-31


应用:适用于三级产品分类或文章分类,非顶头主导航。

1、eyoucms三级横向弹出菜单代码-效果图

eyoucms三级横向弹出菜单代码-效果图


2、eyoucms三级横向弹出菜单代码-HTML代码

<ul class="menu-h">

    <li>

        <a href="{$eyou.field.typeid|gettoptype=###,'typeurl'}" title="{$eyou.field.typeid|gettoptype=###,'typename'}" {eyou:eq name='$eyou.field.typeid' value='$eyou.field.typeid|gettoptype=###,typeid'}class="active"{/eyou:eq}>全部</a>

    </li>            

    {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='cur' /}

                {/eyou:eq}

            {/eyou:type}

        {/eyou:eq}

        <li><a href="{$field.typeurl}" title="{$field.typename}" class="{$field.currentstyle}">{$field.typename}

        {eyou:notempty name="$field.children"}<i class="fa fa-angle-down margin-small-left"></i>{/eyou:notempty}</a>

        {eyou:notempty name="$field.children"}

        <ul>

        {eyou:channel name="$field.children" id="field2"}

            <li class="children">

                <a href="{$field2.typeurl}" class="{$field2.currentstyle}" title="{$field2.typename}">{$field2.typename}</a>

            </li>

        {/eyou:channel}

        </ul>

        {/eyou:notempty}

        </li>

    {/eyou:channel}

</ul>

注:<i class="fa fa-angle-down margin-small-left"></i>可以找fontawesome图标对应。




3、eyoucms三级横向弹出菜单代码-CSS


.menu-h li {position:relative;display:block;float:left}

.menu-h li a{height:69px;line-height:69px;color:#666;display:block;padding:0 20px;font-size:16px}

.menu-h li a.active,.menu-h li a.cur{background: linear-gradient(-45deg,#4276ff,#32b6ff);color:#fff}

.menu-h li.focusa {background: linear-gradient(-45deg,#4276ff,#32b6ff); }

.menu-h li.focusa a{color:#fff}

.menu-h li ul {z-index:99;position:absolute;top:69px;left:0;background:#fff;min-width:200px;display:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;box-shadow:0 6px 5px 3px rgba(0,0,0,0.06); }

.menu-h li ul li{display:block;width:100%;text-align:left;}

.menu-h li ul li.focusa {background:none;}

.menu-h li ul li.children a{display:block;color:#666;line-height:46px;height:46px;}

.menu-h li ul li.children a.active,.menu-h li ul li.children a:hover{background:#f9f9f9;color:#0F6FDA}

.menu-h li ul li.children:last-child a:hover{border-bottom-left-radius:5px;border-bottom-right-radius:5px;}

 

/* 移动可以加下面代码,细节可以自调 */

@media screen and (max-width:760px) {

.menu-h li {float:none}

.menu-h li ul {width:100%;}

}



4、eyoucms三级横向弹出菜单代码-JS


$(document).ready(function(){

    $('.menu-h li').hover(function(){

    $(this).children('ul').show();

    $(this).focus().addClass('focusa')    

    },function(){

    $(this).children('ul').hide();

    $(this).focus().removeClass('focusa')    

        });    

    });



 小秋同学  标签使用技巧  2021-03-25 15:15:35    收藏:  赞(542)
源码网-一个不错的学习网站
本文地址:https://www.yuanma.cc/article/eyou/1729.html 复制链接 如果还有疑问,欢迎加入我们的QQ交流群:887790 加入Q群 易优最新程序下载: 点击下载
QQ在线咨询