首页 话题 小组 问答 好文 用户 我的社区 域名交易 唠叨

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

发布于 2024-11-05 15:59:05
0
245

要在 WordPress 首页的顶部菜单或目录上实现 hover 显示二级菜单的效果,您可以按照以下步骤进行操作:1、创建 WordPress 自定义菜单:在 WordPress 后台的外观 >...

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

1、创建 WordPress 自定义菜单:

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

2、添加自定义 CSS 样式:

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

.sub-menu {
    display: none;
}

3、编写 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');
    });
});

4、将 JavaScript 代码添加到 WordPress 主题中:

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

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

通过以上步骤,您可以在 WordPress 首页的顶部菜单或目录上实现 hover 显示二级菜单的效果。如果您遇到任何问题或需要更详细的指导,请随时告诉我。

评论
一个月内的热帖推荐
鸟云
Lv.1普通用户

275

帖子

20

小组

225

积分

赞助商广告
站长交流