WordPress首页的顶部菜单或者目录hover显示二级菜单

文章摘要:


要在 WordPress 首页的顶部菜单或目录上实现 hover 显示二级菜单的效果,您可以按照以下步骤进行操作:

创建 WordPress 自定义菜单:
在 WordPress 后台的外观 -> 菜单中创建一个自定义菜单。
添加您的一级菜单项和对应的二级菜单项。
使用拖放功能将二级菜单项缩进到对应的一级菜单项下,以表示它们是二级菜单。

添加自定义 CSS 样式:
使用自定义 CSS 样式来隐藏二级菜单项,例如:

.sub-menu {
    display: none;
}

编写 JavaScript 代码:
编写 JavaScript 代码,以在一级菜单项 hover 时显示对应的二级菜单项。您可以使用 jQuery 来简化操作。

jQuery(document).ready(function($) {
    $('.menu-item-has-children').hover(function() {
        $(this).find('.sub-menu').stop(true, true).slideDown('fast');
    }, function() {
        $(this).find('.sub-menu').stop(true, true).slideUp('fast');
    });
});

将 JavaScript 代码添加到 WordPress 主题中:
将上述 JavaScript 代码添加到您的 WordPress 主题的 JavaScript 文件中,或者直接添加到页面模板的 < script > 标签中。

保存并预览:
保存您对主题文件的更改,并在前台预览您的网站,看看是否成功实现了 hover 显示二级菜单的效果。

通过以上步骤,您可以在 WordPress 首页的顶部菜单或目录上实现 hover 显示二级菜单的效果。

温馨提示:本文最后更新于2025-02-10 13:45:36,某些文章具有时效性,若有错误或已失效,请在下方留言或联系站长
点赞9 分享
畅所欲言 抢沙发

请登录后发表评论

    请登录后查看评论内容