Restaurant Menu<\/title>\n\n<style>\n\/* ===== RESET ===== *\/\n*, *::before, *::after { box-sizing: border-box; }\n\nbody {\n margin: 0;\n background: #f6f7fb;\n color: #111;\n}\nbody.modal-open { overflow: hidden; }\n\n\/* ===== WRAPPER ===== *\/\n.wrap {\n max-width: 980px;\n margin: 0 auto;\n padding: 16px;\n}\n\n\/* ===== HEADER ===== *\/\n.menu-top {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 14px;\n margin-bottom: 24px;\n}\n.menu-logo { max-width: 180px; }\n.menu-title { font-size: 22px; font-weight: 800; }\n\n\/* ===== CATEGORIES ===== *\/\n.cats {\n display: grid;\n grid-template-columns: repeat(2,1fr);\n gap: 14px;\n}\n.cat-card {\n position: relative;\n min-height: 170px;\n border-radius: 16px;\n overflow: hidden;\n cursor: pointer;\n}\n.cat-card img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.cat-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: flex-end;\n padding: 14px;\n color: #fff;\n background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.15));\n}\n\n\/* Responsive *\/\n@media (min-width:720px){\n .cats{ grid-template-columns: repeat(3,1fr); }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"wrap\">\n <div class=\"menu-top\">\n <img decoding=\"async\"\n src=\"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-content\/uploads\/sites\/75\/2026\/01\/late-night-1-1.png\"\n class=\"menu-logo\"\n alt=\"logo\"\n >\n <h1 class=\"menu-title\">Bar & Restaurant<\/h1>\n <\/div>\n\n <div class=\"cats\" id=\"menuCategories\"><\/div>\n<\/div>\n\n\n<div class=\"modal\" id=\"menuModal\" aria-hidden=\"true\">\n <div class=\"modal-sheet\">\n <div class=\"modal-header\">\n <div>\n <strong id=\"modalCatName\"><\/strong><br>\n <span id=\"modalCatSub\"><\/span>\n <\/div>\n <button id=\"closeModal\">\u2715<\/button>\n <\/div>\n <div class=\"modal-body\">\n <div class=\"items\" id=\"itemsContainer\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\n const modal = document.getElementById(\"menuModal\");\n const itemsContainer = document.getElementById(\"itemsContainer\");\n const catsWrap = document.getElementById(\"menuCategories\");\n\n if (!modal || !itemsContainer || !catsWrap) return;\n\n function closeProductModal(){\n modal.classList.remove(\"is-open\");\n modal.setAttribute(\"aria-hidden\", \"true\");\n document.body.classList.remove(\"modal-open\");\n }\n\n document.getElementById(\"closeModal\")\n ?.addEventListener(\"click\", closeProductModal);\n\n modal.addEventListener(\"click\", (e) => {\n if (e.target === modal) closeProductModal();\n });\n\n catsWrap.addEventListener(\"click\", (e) => {\n const card = e.target.closest(\".cat-card\");\n if (!card) return;\n\n const key = card.dataset.category;\n const cat = window.MENU_DATA?.[key];\n if (!cat) return;\n\n modal.classList.add(\"is-open\");\n modal.setAttribute(\"aria-hidden\", \"false\");\n document.body.classList.add(\"modal-open\");\n\n document.getElementById(\"modalCatName\").textContent = cat.title || \"\";\n document.getElementById(\"modalCatSub\").textContent = cat.sub || \"\";\n\n itemsContainer.innerHTML = (cat.items || []).map(i => {\n const prices = Array.isArray(i.prices)\n ? i.prices\n : (i.price ? [i.price] : []);\n\n return `\n <div class=\"item\">\n <img decoding=\"async\" src=\"${i.img || \"\"}\" loading=\"lazy\" alt=\"\">\n <div class=\"item-info\">\n <p class=\"item-name\">${i.name || \"\"}<\/p>\n ${i.desc ? `<div class=\"item-desc\">${i.desc}<\/div>` : ``}\n <div class=\"item-meta\">\n ${prices.map(p => `<div class=\"price\">${p}<\/div>`).join(\"\")}\n <\/div>\n <\/div>\n <\/div>\n `;\n }).join(\"\");\n });\n\n window.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\") closeProductModal();\n });\n\n});\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Restaurant Menu Bar & Restaurant \u2715<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":33,"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":465,"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/pages\/22\/revisions\/465"}],"wp:attachment":[{"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/media?parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":22,"date":"2026-01-06T04:13:52","date_gmt":"2026-01-06T04:13:52","guid":{"rendered":"https:\/\/mm2.ezyqrmenu.com\/example24\/?page_id=22"},"modified":"2026-03-25T03:51:50","modified_gmt":"2026-03-25T03:51:50","slug":"menu","status":"publish","type":"page","link":"https:\/\/mm2.ezyqrmenu.com\/example24\/","title":{"rendered":"Menu"},"content":{"rendered":"\n\n\n\n\n\nRestaurant Menu<\/title>\n\n<style>\n\/* ===== RESET ===== *\/\n*, *::before, *::after { box-sizing: border-box; }\n\nbody {\n margin: 0;\n background: #f6f7fb;\n color: #111;\n}\nbody.modal-open { overflow: hidden; }\n\n\/* ===== WRAPPER ===== *\/\n.wrap {\n max-width: 980px;\n margin: 0 auto;\n padding: 16px;\n}\n\n\/* ===== HEADER ===== *\/\n.menu-top {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 14px;\n margin-bottom: 24px;\n}\n.menu-logo { max-width: 180px; }\n.menu-title { font-size: 22px; font-weight: 800; }\n\n\/* ===== CATEGORIES ===== *\/\n.cats {\n display: grid;\n grid-template-columns: repeat(2,1fr);\n gap: 14px;\n}\n.cat-card {\n position: relative;\n min-height: 170px;\n border-radius: 16px;\n overflow: hidden;\n cursor: pointer;\n}\n.cat-card img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.cat-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: flex-end;\n padding: 14px;\n color: #fff;\n background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.15));\n}\n\n\/* Responsive *\/\n@media (min-width:720px){\n .cats{ grid-template-columns: repeat(3,1fr); }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"wrap\">\n <div class=\"menu-top\">\n <img decoding=\"async\"\n src=\"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-content\/uploads\/sites\/75\/2026\/01\/late-night-1-1.png\"\n class=\"menu-logo\"\n alt=\"logo\"\n >\n <h1 class=\"menu-title\">Bar & Restaurant<\/h1>\n <\/div>\n\n <div class=\"cats\" id=\"menuCategories\"><\/div>\n<\/div>\n\n\n<div class=\"modal\" id=\"menuModal\" aria-hidden=\"true\">\n <div class=\"modal-sheet\">\n <div class=\"modal-header\">\n <div>\n <strong id=\"modalCatName\"><\/strong><br>\n <span id=\"modalCatSub\"><\/span>\n <\/div>\n <button id=\"closeModal\">\u2715<\/button>\n <\/div>\n <div class=\"modal-body\">\n <div class=\"items\" id=\"itemsContainer\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\n const modal = document.getElementById(\"menuModal\");\n const itemsContainer = document.getElementById(\"itemsContainer\");\n const catsWrap = document.getElementById(\"menuCategories\");\n\n if (!modal || !itemsContainer || !catsWrap) return;\n\n function closeProductModal(){\n modal.classList.remove(\"is-open\");\n modal.setAttribute(\"aria-hidden\", \"true\");\n document.body.classList.remove(\"modal-open\");\n }\n\n document.getElementById(\"closeModal\")\n ?.addEventListener(\"click\", closeProductModal);\n\n modal.addEventListener(\"click\", (e) => {\n if (e.target === modal) closeProductModal();\n });\n\n catsWrap.addEventListener(\"click\", (e) => {\n const card = e.target.closest(\".cat-card\");\n if (!card) return;\n\n const key = card.dataset.category;\n const cat = window.MENU_DATA?.[key];\n if (!cat) return;\n\n modal.classList.add(\"is-open\");\n modal.setAttribute(\"aria-hidden\", \"false\");\n document.body.classList.add(\"modal-open\");\n\n document.getElementById(\"modalCatName\").textContent = cat.title || \"\";\n document.getElementById(\"modalCatSub\").textContent = cat.sub || \"\";\n\n itemsContainer.innerHTML = (cat.items || []).map(i => {\n const prices = Array.isArray(i.prices)\n ? i.prices\n : (i.price ? [i.price] : []);\n\n return `\n <div class=\"item\">\n <img decoding=\"async\" src=\"${i.img || \"\"}\" loading=\"lazy\" alt=\"\">\n <div class=\"item-info\">\n <p class=\"item-name\">${i.name || \"\"}<\/p>\n ${i.desc ? `<div class=\"item-desc\">${i.desc}<\/div>` : ``}\n <div class=\"item-meta\">\n ${prices.map(p => `<div class=\"price\">${p}<\/div>`).join(\"\")}\n <\/div>\n <\/div>\n <\/div>\n `;\n }).join(\"\");\n });\n\n window.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\") closeProductModal();\n });\n\n});\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Restaurant Menu Bar & Restaurant \u2715<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":33,"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":465,"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/pages\/22\/revisions\/465"}],"wp:attachment":[{"href":"https:\/\/mm2.ezyqrmenu.com\/example24\/wp-json\/wp\/v2\/media?parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}