Preview

Desktop, tablet en mobiel voorbeeld van je nieuwe On The Menu-menu.

Compiler Output

Kopieerbare output voor HTML, CSS en JS.

Start vanaf page_id (voor PHP snippet) 0 = standaardstart. Vul een page_id in om vanaf die pagina te starten.

PHP Snippet (template) HTML CSS JS

Builder

Menu items

Label URL

Parent Geselecteerd item

Structuur

Designer

Hoogte knop 46px Horizontale padding 16px Border radius 8px Tablet breakpoint 1100px Mobile breakpoint 860px

Achtergrond Tekstkleur Hover kleur Mobiel paneel

Menu layout Mega menu Mega kolommen 4 Submenu breedte 260px

Submenu achtergrond Submenu tekstkleur Submenu hover kleur Submenu radius 8px

Current tekstkleur Current achtergrond Current border kleur Current border dikte 0px Current font-weight

Parent tekstkleur Parent achtergrond Parent border kleur Parent border dikte 0px Parent font-weight

Mobile indicator Indicator positie Indicator tekst Custom indicator

Snelle hulp

Submenu los stylen: gebruik Submenu achtergrond, Submenu tekstkleur, Submenu hover kleur, Submenu breedte en Submenu radius.

Current en parent stylen: gebruik tekstkleur/achtergrond plus border kleur, border dikte en font-weight.

Mobile indicator: kies type bij Mobile indicator, positie bij Indicator positie, en pas label/icoon aan via Indicator tekst of Custom indicator.

Verticaal menu: zet Menu layout op Verticaal.

Megamenu: zet Mega menu op Aan en kies het aantal kolommen bij Mega kolommen.

Preview tabs: wissel bovenin tussen Desktop, Tablet en Mobile om max-breedtes direct te testen.

Migratie

ShowMenu2 input (function call of JSON)

Website URL (beta)

Website URL

Step Wizard

Doel menu Aantal hoofditems Submenu's Stijl toon Mobiel breakpoint

Archief

Naam preset

Bewaarde menu's

Snelle acties

PHP variant

Uitgebreide documentatie (placeholders + opties)

Start vanaf page_id

Ja, net als bij show_menu2 kun je starten vanaf een specifieke pagina-ID. Gebruik in de generator het veld Start vanaf page_id. Dan wordt de 2e parameter van onthemenu_menu(...) automatisch die ID.

Template placeholders

Deze placeholders kun je gebruiken in je eigen item/list templates:

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

Belangrijkste constanten

OTM_ROOT: starten op root-niveau
OTM_CURR: current context
OTM_ALL: geen max-level limiet
OTM_ALLMENU: over alle menu's heen

Flags

OTM_ALL: volledig menu tonen
OTM_TRIM: current tak
OTM_SIBLING: siblings rond current
OTM_CRUMB: breadcrumb-pad
OTM_NUMCLASS: level classes toevoegen
OTM_PRETTY: pretty output
OTM_BUFFER: return string i.p.v. direct echo
OTM_SHOWHIDDEN: hidden pagina's meenemen
OTM_MOBILEONLY: mobile-only hint/classes
OTM_MEGAMENU: megamenu hint/classes
OTM_SITEMAP: sitemap modus

Runtime options (array)

Je kunt als 4e parameter ook een options-array geven met o.a.:

flags: gecombineerde OTM flags
source: pages, pages+news, pages+shop, all
mobile_only: true/false
megamenu: true/false
sitemap: true/false
news: custom news dataset
shop: custom shop dataset
news_label: label voor nieuwsroot
shop_label: label voor shoproot

Classes in output

Output gebruikt nu alleen onthemenu-* classes, zoals:

onthemenu-menu, onthemenu-submenu
onthemenu-item, onthemenu-expand
onthemenu-current, onthemenu-parent, onthemenu-sibling
onthemenu-first, onthemenu-last
onthemenu-level-0, onthemenu-level-1, ...