humanmade/hm-mega-menu-block 问题修复 & 功能扩展

解决BUG、新增功能、兼容多环境部署,快速响应你的开发需求

邮箱:yvsm@zunyunkeji.com | QQ:316430983 | 微信:yvsm316

humanmade/hm-mega-menu-block

Composer 安装命令:

composer require humanmade/hm-mega-menu-block

包简介

A reusable Gutenberg block for creating mega menus in WordPress.

README 文档

README

https://www.loom.com/embed/b91514e4eb2b4d939f128ac194b13c7d?sid=58fd2f1e-5b2b-4e40-ba1a-da8210c8c54c

This guide explains how to create and customize a mega menu using the HM Mega Menu Block plugin.

Installation and usage

Step 1: Install and Activate the HM Mega Menu Block Plugin

  1. Install the Plugin:
    • If the plugin is not installed yet, upload or install it from the plugin directory.
  2. Activate the Plugin:
    • Go to Plugins > Installed Plugins and activate the HM Mega Menu Block plugin.

Step 2: Add a New Mega Menu Template Part

  1. Open the Site Editor:
    • Go to Appearance > Editor to access the block editor.
  2. Create a New Template Part:
    • In the editor, click Add New to create a new pattern or template part.
    • Assign a name to the template part (e.g., "Mega Menu").
    • Designate it as a Mega Menu type.

Step 3: Build the Mega Menu Layout

  1. Add Groups:
    • In the newly created template part, use Group blocks to structure the menu.
    • Add nested groups for creating multi-level menus.
  2. Add Content:
    • Insert blocks like:
      • Navigation Block for menu links.
      • Heading Block for section titles.
      • Other blocks (e.g., images, buttons) to customize the layout.
  3. Customize:
    • Add any colors, styles, or additional elements to personalize the mega menu.

Step 4: Link the Mega Menu to the Header

  1. Edit the Header Template Part:
    • In the Site Editor, open the Header template part.
  2. Insert the HM Mega Menu Block:
    • Add the HM Mega Menu Block to the header inside the Navigation Block.
    • Add a label to the Mega Menu uat the block section, on the right side of your screen.
    • Link it to the template part created for the mega menu (e.g., "Mega Menu").
  3. Save Changes

Step 5: Test the Mega Menu

  1. Preview on the Front-End:
    • Visit your site's homepage to see the mega menu in action.

Step 6: Make Final Adjustments

  1. Fix Positioning Issues:
    • Ensure the mega menu is properly aligned and sticky (if needed).
  2. Enhance Styling:
    • Customize colors, spacing, and other design elements to match your site.

Notes and Tips

  • You can create multiple mega menus by repeating these steps and linking them to different template parts.
  • Adjust sticky positioning or other advanced behaviors as necessary.

This plugin provides a flexible, code-light way to build and customize mega menus in WordPress!

Release Process

Merges to main will automatically build to the release branch.

Commits in the release branch may be tagged for installation via packagist and composer, and optionally marked as releases in GitHub for download. A project may also be set up to track the dev-release branch to always pull in the latest built beta version.

Changelog

1.1.1

  • Adds menu close when user presses escape key when the menu is not in focus.
  • Adds menu close when user clicks outside of the menu.
  • Adds menu close when another menu is opened.

1.0.0 / 1.0.1

  • Initial Release. v1.0.1 created to work around a mis-targeted tag pushed to Composer.

humanmade/hm-mega-menu-block 适用场景与选型建议

humanmade/hm-mega-menu-block 是一款 基于 JavaScript 开发的 Composer 扩展包,目前已累计 3.25k 次下载、GitHub Stars 达 13, 最近一次更新时间为 2024 年 12 月 04 日, 在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 humanmade/hm-mega-menu-block 或与其功能相近的方案,如果你在选型或落地过程中遇到问题,例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查,欢迎联系我们协助评估。

围绕 humanmade/hm-mega-menu-block 我们能提供哪些服务?
定制开发 / 二次开发

基于 humanmade/hm-mega-menu-block 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复;针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维;也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ:316430983 微信:yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

统计信息

  • 总下载量: 3.25k
  • 月度下载量: 0
  • 日度下载量: 0
  • 收藏数: 13
  • 点击次数: 1
  • 依赖项目数: 0
  • 推荐数: 0

GitHub 信息

  • Stars: 13
  • Watchers: 11
  • Forks: 0
  • 开发语言: JavaScript

其他信息

  • 授权协议: GPL-2.0-or-later
  • 更新时间: 2024-12-04