aberkow / a11y-menu-php
A package for generating accessible navigation menus
Requires
- ucomm/a11y-menu: dev-master
- dev-master
- dev-dependabot/npm_and_yarn/qs-6.5.3
- dev-dependabot/npm_and_yarn/decode-uri-component-0.2.2
- dev-dependabot/npm_and_yarn/loader-utils-1.4.2
- dev-dependabot/npm_and_yarn/copy-props-2.0.5
- dev-dependabot/npm_and_yarn/ajv-6.12.6
- dev-dependabot/npm_and_yarn/path-parse-1.0.7
- dev-dependabot/npm_and_yarn/postcss-7.0.36
- dev-dependabot/npm_and_yarn/hosted-git-info-2.8.9
- dev-dependabot/npm_and_yarn/lodash-4.17.21
- dev-dependabot/npm_and_yarn/y18n-3.2.2
- dev-dependabot/npm_and_yarn/ini-1.3.7
- dev-dependabot/npm_and_yarn/node-sass-4.14.1
- dev-dependabot/npm_and_yarn/acorn-5.7.4
- dev-dependabot/npm_and_yarn/lodash.mergewith-4.6.2
- dev-dependabot/npm_and_yarn/fstream-1.0.12
- dev-dependabot/npm_and_yarn/tar-2.2.2
- dev-develop
This package is auto-updated.
Last update: 2024-10-09 03:17:07 UTC
README
This package is a PHP version of the npm a11y-menu markup generation utilities.
The goal is to provide a developer experience similar to the a11y-menu javascript package. That includes:
- Generating menus from JSON
- Providing access to the minimal styles and script from the a11y-menu package
- Allowing developers a straightforward menu generation experience. The class exposes a single static method.
Installation
This package should be installed with composer - composer require aberkow/a11y-menu-php
.
Requirements
Using the markup generator requires a JSON file with the following format.
{ "menu": [ { "name": "Display Name", "slug": "slugified-name", "link": "/route", "sub": false, "classes": ["optional", "classes"] } ] }
if a submenu is required, mark the sub
property as true
and provide a menu
property with an array of menu items. For example
{ "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 } ] } ] }
Use
Using the menu generator is straightforward. It requires
- the base stylesheet
- the base Navigation script
- using the generator's
display_menu
method
Steps
- require
vendor/autoload.php
- create a json file as above and decode it
$data = file_get_contents('path/to/file.json'); $menu = json_decode($data)->menu;
- create navigation markup
- prefix nav and ul ids with
am-
- prefix nav and ul ids with
<nav id="am-my-nav"> <ul id="am-main-nav"></ul> </nav>
- echo the results of the menu generator inside the
<ul>
- add styles and the
Navigation.js
script
<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>
More...
For more details on styling and js implementation, please see the a11y-menu
github repo. This repo has information about
- The
Navigation
javascript constructor - Incorporating alternative menu icons
- Extending the base styles