可悬停菜单显示在页面的不同部分

时间:2017-10-18 作者:Bradley

基本上,当鼠标悬停时,我需要我的子菜单项出现在页面的不同区域。请查看以下链接:

http://brainstormmarketing.agency/dev/UBG/

有四个主菜单项。子菜单项应显示在主页上的四个模块中,即打印和文档部门、IT部门、电信部门和安全和安保部门。仅当鼠标悬停在主菜单项(四个)上时,它们才会出现

1 个回复
最合适的回答,由SO网友:Tom 整理而成

布拉德利,

感谢您在评论中的进一步澄清。我编写了一些javascript(jQuery),您需要将其插入到主题中:

jQuery( "#panel-2-1-0-0" ).hover( //Print and Document
    function() {
        jQuery(\'#mega-menu-item-475\').addClass(\'mega-toggle-on\');
    }, function() {
        jQuery(\'#mega-menu-item-475\').removeClass(\'mega-toggle-on\');
    }
);

jQuery( "#panel-2-1-1-0" ).hover( //Telecom
    function() {
        jQuery(\'#mega-menu-item-477\').addClass(\'mega-toggle-on\');
    }, function() {
        jQuery(\'#mega-menu-item-477\').removeClass(\'mega-toggle-on\');
    }
);

jQuery( "#panel-2-1-0-1" ).hover( //IT Dev
    function() {
        jQuery(\'#mega-menu-item-476\').addClass(\'mega-toggle-on\');
    }, function() {
        jQuery(\'#mega-menu-item-476\').removeClass(\'mega-toggle-on\');
    }
);

jQuery( "#panel-2-1-1-1" ).hover( // Safety and Security
    function() {
        jQuery(\'#mega-menu-item-478\').addClass(\'mega-toggle-on\');
    }, function() {
        jQuery(\'#mega-menu-item-478\').removeClass(\'mega-toggle-on\');
    }
);
这些块中的每一块都针对所讨论的面板。一旦用户将鼠标悬停在一个块上,它就会找到相应的mega菜单元素,并应用一个类来显示它。当用户移开鼠标时,会删除类并隐藏菜单。

如您所见,代码基于与mega菜单元素和块关联的ID。If you change the blocks or menu ID\'s the script will no longer work.

有一种更干净的方法来实现这一点(不依赖ID),但为了让您朝着正确的方向前进,这将起作用。

希望这能帮助你走上正轨,如果你有任何问题,请告诉我。

结束

相关推荐

Problem with custom menus

在菜单上,我说的是自定义菜单,我有一个带有几列的页脚,每列都有一个项目列表,每列菜单都需要从wp admin上的菜单选项进行更新,所以我创建了关于函数的部分。调用菜单并在页脚上添加每个菜单的php。php文档,类似于:<?php wp_nav_menu( array(\'menu\' => \'f-1\', \'menu_class\' => \'\', \'container\' => \'nav\' )); ?> <?php wp_nav_menu( arr