OnTheMenu voor BakerCMS

Een modern, dynamisch menu-systeem met visuele designer, compile-output en migratiepad vanaf show_menu2.

1. Snelle vergelijking: ShowMenu2 vs OnTheMenu

Onderdeel	show_menu2	OnTheMenu
Template API	Function call met flags	Function call met flags (showmenu2-achtig)
Mobiel menu	Vaak extra plugin nodig	Standaard in output (toggle + submenu)
Design workflow	Handmatig CSS/HTML	Visuele builder + live preview
Herbruikbaarheid	Code snippets	Archief met save/load/fork
Migratiepad	n.v.t.	Import van legacy input + compatibele runtime

2. Installatie

1. Plaats modulemap als /modules/on_the_menu.
2. Neem runtime op in je template met require_once.
3. Vervang bestaande show_menu2(...) calls geleidelijk.
4. Gebruik designerpagina om CSS/JS snel te genereren en finetunen.

3. Basisgebruik in template

<?php
require_once WB_PATH.'/modules/on_the_menu/onthemenu_menu.php';

echo onthemenu_menu(
  0,
  OTM_ROOT,
  OTM_ALL,
  OTM_ALL | OTM_NUMCLASS | OTM_PRETTY | OTM_BUFFER,
  false,
  false,
  '<ul class="mark [class]">'
);
?>

4. API-signatuur

onthemenu_menu(
  $aMenu = 0,
  $aStart = OTM_ROOT,
  $aMaxLevel = OTM_ALL,
  $aOptions = OTM_TRIM,
  $aItemOpen = false,
  $aItemClose = false,
  $aMenuOpen = false,
  $aMenuClose = false,
  $aTopItemOpen = false,
  $aTopMenuOpen = false
)

Belangrijke constants

• OTM_ROOT, OTM_CURR, OTM_ALL
• OTM_TRIM, OTM_SIBLING, OTM_CRUMB
• OTM_NUMCLASS, OTM_PRETTY, OTM_BUFFER
• OTM_SHOWHIDDEN (alleen gebruiken als je hidden gedrag expliciet wilt)

5. Migratievoorbeelden

A. 1-op-1 richting

// oud
show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL|SM2_NUMCLASS|SM2_PRETTY, false, false, '<ul class="mark [class]">');

// nieuw
onthemenu_menu(0, OTM_ROOT, OTM_ALL, OTM_ALL|OTM_NUMCLASS|OTM_PRETTY|OTM_BUFFER, false, false, '<ul class="mark [class]">');

B. Gefaseerd migreren

1. Eerst runtime call vervangen (zelfde template-positie).
2. Daarna designer gebruiken voor verbeterde CSS/JS.
3. Per template/mobile breakpoint finetunen.
4. Opslaan als archief-preset voor hergebruik op andere sites.

6. Beschikbare tags in formatter-templates

In $aItemOpen, $aMenuOpen, etc. kun je tags gebruiken:

• [class]
• [menu_title]
• [page_title]
• [url]
• [target]
• [page_id]
• [level]
• [sib], [sibCount]
• [tooltip], [description]

7. CSS classes die OnTheMenu zet

• menu-current
• menu-parent
• menu-sibling
• menu-child
• menu-expand
• menu-first, menu-last
• menu-[level] (alleen met OTM_NUMCLASS)

8. Designer + Archief workflow (aanbevolen)

1. Open onthemenu/index.html.
2. Bouw menu, style en mobiel gedrag visueel op.
3. Gebruik Opslaan in archief.
4. Fork varianten per klant/site/layout.
5. Kopieer compiler output (HTML/CSS/JS) naar template-assets.

9. Veelgestelde vragen

Moet ik alles in 1 keer migreren?

Nee. Je kunt pagina voor pagina of template voor template overstappen.

Kan ik showmenu2 voorlopig laten staan?

Ja. Draai beide tijdelijk naast elkaar tijdens overgang.

Kan OnTheMenu een willekeurige externe website volledig scrapen?

Niet volledig client-side door CORS en dynamische rendering. De URL-generator is bedoeld als startpunt, daarna visueel finetunen.

10. Aanbevolen overstapplan (praktisch)

1. Start met 1 template en 1 hoofdmenu.
2. Gebruik runtime call met CM-flags voor functionele gelijkwaardigheid.
3. Pas mobile gedrag en styling aan in On The Menu designer.
4. Sla op in archief en fork voor varianten.
5. Rol daarna uit naar overige templates/klantsites.

Documentversie: 2026-02-28