json-dropdown-tools/README.md

A tool to generate dropdown menus from JSON as HTML or JS modules

# JSON Dropdown Menu Demo

This project is a lightweight tool to generate dynamic, nested dropdown menus directly from a JSON structure.
It produces HTML, JS, and CSS files that render interactive menus with clickable actions, suitable for web applications or demos.

---

## Purpose

The purpose of this tool is to simplify menu creation. Instead of manually writing HTML, JS, and CSS for complex menus, you define the structure in a JSON file, and the tool generates everything required for a functional dropdown menu.

Key features:

* Nested menus and submenus
* Separators for grouping items
* Automatic ID generation if missing
* Ready-to-use CSS scaffolding
* Easy action binding via JS

---

## Files and Structure

* `menu.json` – The JSON file defining your menu structure.
* `menu-tools.js` – Converts JSON into HTML and JS module code.
* `menu-css-generator.js` – Generates a CSS file with selectors matching the menu items.
* `index.js` – Main script that reads `menu.json` and produces `dist/menu.js`, `dist/menu.css`, and `dist/menu.html`.
* `test.html` – A demo page that loads the generated menu dynamically.
* `dist/` – Folder containing generated files (`menu.js`, `menu.css`, `menu.html`).

---

## How It Works

1. **JSON as the source of truth**

   * Every menu, submenu, and item is defined in `menu.json`.
   * Objects can be of type `menu`, `item`, or `separator`.
   * Each object has a `label`, optional `id`, optional `action`, and `items` array for nested content.

2. **Menu generation**

   * `index.js` reads `menu.json` and passes it to `menu-tools.js` and `menu-css-generator.js`.
   * `menu-tools.js` generates:

     * `menu.html` – a static HTML structure for reference
     * `menu.js` – an ES module that dynamically renders the menu and binds actions
   * `menu-css-generator.js` generates `menu.css` with placeholder selectors for each menu ID.

3. **Rendering and interactivity**

   * `menu.js` provides a `renderMenu(container, actionHandler)` function.
   * Nested menus are hidden by default and displayed when their parent is clicked (toggle `.open` class).
   * Menu items with an `action` trigger a callback (demo uses `alert()`).

---

## Getting Started

1. Ensure Node 18+ is installed.

2. Install dependencies (if any):

```
npm install
```

3. Generate the menu outputs:

```
npm start
```

This produces:

* `dist/menu.js`
* `dist/menu.css`
* `dist/menu.html`

4. Open the demo:

Serve the root folder using a local server (required for ES modules):

```
npx serve .
```

or

```
npx live-server .
```

Navigate to `test.html` to see the menu in action.

---

## Editing the Menu

1. Open `menu.json` and modify the structure.
2. Each object can have:

   * `label` – Text displayed in the menu
   * `id` – Optional unique ID (auto-generated if missing)
   * `action` – Name of the function triggered on click
   * `items` – Array of nested objects
3. Regenerate outputs after editing:

```
npm start
```

---

## Styling

* `dist/menu.css` contains selectors for all menu IDs.
* You can add colors, fonts, padding, hover effects, and more.
* Nested menus are hidden by default (`li > ul { display: none; }`) and shown on click (`li.open > ul { display: block; }`).
* Keep the generated structure to ensure compatibility with `menu.js`.

---

## Notes

* A local server is required for ES module support.
* Works in modern browsers (Chrome, Firefox, Edge).
* Alerts for demo actions can be replaced with custom JavaScript functions.
* Ideal for demos, prototypes, or small web apps needing dynamic menu generation.

---

## Example JSON Snippet

```
{
  "type": "menu",
  "label": "Main Menu",
  "id": "main-menu",
  "items": [
    { "type": "item", "label": "New", "action": "newFile" },
    { "type": "separator" },
    { "type": "item", "label": "Exit", "action": "exitApp" }
  ]
}
```

---

## How It's Made

* Built using plain JavaScript and Node.js.
* ES modules allow dynamic rendering in the browser.
* Uses a JSON-first approach: the JSON structure dictates HTML and CSS generation.
* CSS generator creates placeholder IDs to allow easy styling without altering functionality.

---

## License

MIT License