README

此包是 npm a11y-menu 标记生成实用工具的 PHP 版本。

目标是提供与 a11y-menu JavaScript 包类似的开发者体验。这包括

从 JSON 生成菜单
提供对 a11y-menu 包中最小样式和脚本的访问
允许开发者以直观的方式生成菜单。该类公开一个单一静态方法。

安装

应使用 composer 安装此包 - composer require aberkow/a11y-menu-php。

要求

使用标记生成器需要具有以下格式的 JSON 文件。

{
  "menu": [
    {
      "name": "Display Name",
      "slug": "slugified-name",
      "link": "/route",
      "sub": false,
      "classes": ["optional", "classes"]
    }
  ]
}

如果需要子菜单，将 sub 属性标记为 true 并提供具有菜单项数组的 menu 属性。例如

{
  "menu": [
    {
      "name": "Display Name",
      "slug": "slugified-name",
      "link": "/route",
      "sub": true,
      "classes": ["optional", "classes"],
      "menu": [
        {
          "name": "Submenu Item 1",
          "slug": "submenu-item-1",
          "link": "/submenu-item-1",
          "sub": false
        },
        {
          "name": "Submenu Item 2",
          "slug": "submenu-item-2",
          "link": "/submenu-item-2",
          "sub": false
        }
      ]
    }
  ]
}

使用

使用菜单生成器非常简单。它需要

基本样式表
基本导航脚本
使用生成器的 display_menu 方法

步骤

require vendor/autoload.php
创建一个如上所示的 JSON 文件并将其解码

$data = file_get_contents('path/to/file.json');
$menu = json_decode($data)->menu;

创建导航标记
- 将 nav 和 ul 的 id 前缀设置为 am-

<nav id="am-my-nav">
  <ul id="am-main-nav"></ul>
</nav>

在 <ul> 内部输出菜单生成器的结果
添加样式和 Navigation.js 脚本

<head>
  <link rel="stylesheet" href="vendor/ucomm/a11y-menu/dist/main.css">
</head>

<nav id="am-navigation">
  <ul id="am-php-menu">
    <?php echo A11y\Menu_Generator::display_menu($decoded->menu); ?>
  </ul>
</nav>

// before the closing body tag...
  <script src="vendor/ucomm/a11y-menu/dist/Navigation.js"></script>

aberkow / a11y-menu-php

维护者

详情

README

安装

要求

使用

步骤

更多...