Info Dropdown Combined Example<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\" \/>\n <style>\n body {\n margin: 0;\n font-family: 'Trebuchet MS', sans-serif;\n background-color: #f2f2f2;\nfont-size:16px;\n }\n\n .header {\n position: relative;\n width: 100%;\n height: 220px;\n overflow: hidden;\n }\n\n .header img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .language-selector {\n position: absolute;\n top: 15px;\n right: 15px;\n }\n\n .language-selector button {\n padding: 6px 12px;\n font-size: 14px;\n border: none;\n background-color: white;\n border-radius: 5px;\n cursor: pointer;\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);\n }\n\n .container {\n max-width: 600px;\n margin: 50px auto;\n }\n\n .info-bar {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 10px;\n }\n\n .selector {\n flex-shrink: 0;\n }\n\n .selector button {\n padding: 10px;\n font-size: 16px;\n border: none;\n background-color: black;\n border-radius: 8px;\n cursor: pointer;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n }\n\n .info-wrapper {\n background-color: #fff;\n border-radius: 10px;\n padding: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n transition: background 0.2s;\n flex-grow: 1;\nborder:2px solid #b6cc72;\n }\n\n .info-wrapper:hover {\n background-color: #f9f9f9;\n }\n\n .info-left {\n display: flex;\n align-items: center;\n }\n\n .info-left i {\n font-size: 20px;\n margin-right: 12px;\n color: #333;\n }\n\n .info-text strong {\n display: block;\n font-size: 25px;\n color: #333;\n }\n\n .info-subtext {\n font-size: 16px;\n color: #999;\n }\n\n .info-right i {\n font-size: 16px;\n color: #999;\n transition: transform 0.3s ease;\n }\n\n .rotate {\n transform: rotate(90deg);\n }\n\n .info-card {\n background-color: #fff;\n border-radius: 0 0 10px 10px;\n padding: 20px;\n margin-top: 5px;\n display: none;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n animation: fadeSlide 0.3s ease forwards;\n }\n\n .info-card h1 {\n margin: 0 0 15px;\n font-size: 22px;\n text-align: center;\n }\n\n .info-card p {\n margin: 10px 0;\n font-size: 18px;\n color: #333;\n display: flex;\n align-items: center;\n }\n\n .info-card i {\n margin-right: 10px;\n color: #333;\n width: 20px;\n }\n\n @keyframes fadeSlide {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .search-box {\n display: flex;\n justify-content: center;\n margin: 20px auto;\n max-width: 600px;\n position: relative;\n }\n\n .search-box input {\n width: 100%;\n padding: 12px 20px;\n border: 1px solid red;\n border-radius: 25px;\n font-size: 16px;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n }\n\n .search-box .search-btn {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n background-color: white;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n padding: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .search-box .search-btn i {\n font-size: 20px;\n color: #555;\n }\n\n .tab-container {\n margin-top: 20px;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n position: relative;\n max-width: 100%;\n border-radius: 20px;\n padding: 5px;\n overflow: hidden;\n }\n\n .tab-scroll-wrapper {\n overflow-x: auto;\n white-space: nowrap;\n scrollbar-width: thin;\n scrollbar-color: #aaa #f5f5f5;\n scroll-behavior: smooth;\n }\n\n .tab-scroll-wrapper::-webkit-scrollbar {\n height: 10px;\n }\n\n .tab-scroll-wrapper::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 5px;\n }\n\n .tab-scroll-wrapper::-webkit-scrollbar-track {\n background: #f5f5f5;\n }\n\n .tab-label {\n display: inline-block;\n margin: 5px 10px;\n padding: 6px 14px;\n background: #ccc;\n border-radius: 12px;\n cursor: pointer;\n font-size: 14px;\n transition: background 0.2s;\n font-weight: bold;\n margin-right: 10px;\n }\n\n .tab-label:hover {\n background: #bbb;\n }\n\n input[type=\"radio\"] {\n display: none;\n }\n\n .scroll-arrow {\n position: absolute;\n top: 2.5%;\n transform: translateY(-50%);\n font-size: 18px;\n color: #555;\n width: 28px;\n height: 30px;\n text-align: center;\n line-height: 26px;\n cursor: pointer;\n user-select: none;\n }\n\n .scroll-arrow.left {\n left: -10px;\n }\n\n .scroll-arrow.right {\n right: -10px;\n }\n\n .tab-content {\n margin-top: 10px;\n }\n\n .buttons {\n text-align: center !important;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n<h1>Main Menu<\/h1>\n \n <div class=\"info-bar\">\n \n\n <div class=\"info-wrapper\" onclick=\"toggleInfoCard()\">\n <div class=\"info-left\">\n <i class=\"fas fa-info-circle\"><\/i>\n <div class=\"info-text\">\n <strong>Info<\/strong>\n <div class=\"info-subtext\">Wifi, Phone, Address, Facebook, TikTok<\/div>\n <\/div>\n <\/div>\n <div class=\"info-right\">\n <i class=\"fas fa-chevron-right\" id=\"chevronIcon\"><\/i>\n <\/div>\n <\/div>\n<div class=\"selector\">\n <button onclick=\"toggleDarkMode()\">\n <i class=\"fa-regular fa-moon\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"info-card\" id=\"infoCard\">\n <h5>Info<\/h5>\n\n<div onclick=\"copyWiFiPassword()\" style=\"cursor: pointer; position: relative; display: inline-block;\">\n <p>\n <i class=\"fas fa-wifi\" style=\"margin-right: 6px;\"><\/i>\n <strong>Wi-Fi Name:<\/strong> <span id=\"wifi-name\">Lu Lar Lar Lay<\/span>\n <\/p>\n <p>\n <i class=\"fas fa-lock\" style=\"margin-right: 6px;\"><\/i>\n <strong>Password:<\/strong> <span id=\"wifi-text\">lularlay25<\/span>\n <\/p>\n <span id=\"copy-msg\" style=\"display:none; position:absolute; left:0; top:100%; background:#4caf50; color:white; padding:4px 8px; border-radius:6px; font-size:12px; margin-top:5px;\">Password copied!<\/span>\n<\/div>\n\n\n<input type=\"text\" id=\"hidden-input\" style=\"position: absolute; left: -9999px;\" readonly \/>\n\n\n<script>\n function copyWiFiPassword() {\n const text = document.getElementById('wifi-text').innerText;\n const hiddenInput = document.getElementById('hidden-input');\n const message = document.getElementById('copy-msg');\n\n hiddenInput.value = text;\n hiddenInput.select();\n hiddenInput.setSelectionRange(0, 99999); \/\/ for iOS\n\n const success = document.execCommand('copy');\n\n if (success) {\n message.style.display = 'inline-block';\n setTimeout(() => {\n message.style.display = 'none';\n }, 2000);\n } else {\n alert('Copy failed.');\n }\n }\n<\/script>\n\n <p>\n <a href=\"tel:09440535535\" style=\"text-decoration: none; color: black;\">\n <i class=\"fas fa-phone\"><\/i>09440535535<\/a><\/p>\n\n <p>\n <i class=\"fas fa-map-marker-alt\" style=\"margin-right: 15px;\"><\/i>\n <a href=\"https:\/\/maps.app.goo.gl\/izfm1fmEnEcPKrEW9\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color: inherit; text-decoration: none;\">\n (41-Ward), Min Ye Kyaw Swar St, North Dagon\n <\/a>\n<\/p>\n\n <p>\n <i class=\"fab fa-facebook\"><\/i> \n <a href=\"https:\/\/www.facebook.com\/share\/15X6QcJ4iE2\/?mibextid=wwXIfr\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color: inherit; text-decoration: none;\">\n Lu Lar Lar Lay Entertainment\n <\/a>\n<\/p>\n\n <p>\n <i class=\"fab fa-tiktok\"><\/i> \n <a href=\"\nhttps:\/\/www.tiktok.com\/@lular_larlay?_r=1&_t=ZP-92oX8nro5GB\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color: inherit; text-decoration: none;\">\n Lu Lar Lar Lay\n <\/a>\n<\/p>\n\n <\/div>\n\n\n\n\n<div class=\"main-category-container\">\n \n <div class=\"main-category-wrapper\" style=\"gap: 30px;\">\n \n <div class=\"main-category-box\"\n onclick=\"window.location.href='https:\/\/mm2.ezyqrmenu.com\/lularlarlayentertainment\/food'\">\n\n <p>Food<\/p>\n <\/div>\n\n \n <div class=\"main-category-box\" \n onclick=\"window.location.href='https:\/\/mm2.ezyqrmenu.com\/lularlarlayentertainment\/bar'\">\n \n <p>Bar<\/p>\n <\/div>\n <\/div>\n<\/div>\n\n\n\n\n<div class=\"buttons\">\n <p>\n <button onclick=\"shareLocation()\" style=\"padding: 8px 16px; border: none; background-color: black;border:1px solid white; color: white; border-radius: 5px; cursor: pointer;\">\n Share Location\n <\/button>\n<button onclick=\"window.location.href='customer-feedback'\" style=\"padding: 8px 16px; border: none; background-color: black;border:1px solid white; color: white; border-radius: 5px; cursor: pointer;\">\n Customer Feedback\n <\/button>\n <\/p>\n<\/div>\n\n \n <div style=\" padding: 20px; display: inline-block;\">\n<iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3817.8845434217737!2d96.1768644!3d16.881604999999997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30c1933fba784613%3A0x38529ec9ecd842e1!2sLu%20Lar%20Lar%20Lay!5e0!3m2!1sen!2smm!4v1767676205458!5m2!1sen!2smm\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe>\n <\/div>\n<\/div>\n\n\n<script>\n function shareLocation() {\n const locationUrl = 'https:\/\/maps.app.goo.gl\/1iKPS6rYP7dbgwFZ6';\n if (navigator.share) {\n navigator.share({\n title: 'Our Location',\n url: locationUrl\n }).catch((error) => console.log('Error sharing', error));\n } else {\n navigator.clipboard.writeText(locationUrl).then(() => {\n alert('Location link copied to clipboard!');\n });\n }\n }\n<\/script>\n\n <script>\n function toggleInfoCard() {\n const card = document.getElementById(\"infoCard\");\n const chevron = document.getElementById(\"chevronIcon\");\n const isOpen = card.style.display === \"block\";\n card.style.display = isOpen ? \"none\" : \"block\";\n chevron.classList.toggle(\"rotate\", !isOpen);\n }\n\n function scrollTabs(amount) {\n document.getElementById('tabScroll').scrollLeft += amount;\n }\n\n const tabs = document.querySelectorAll('input[name=\"tabs\"]');\n const contents = document.querySelectorAll('.tab-content');\n\n function updateTabContent() {\n contents.forEach((content, index) => {\n content.style.display = tabs[index].checked ? 'block' : 'none';\n });\n }\n\n tabs.forEach(tab => tab.addEventListener('change', updateTabContent));\n updateTabContent(); \/\/ initialize\n\n function toggleDarkMode() {\n document.body.classList.toggle(\"dark-mode\");\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Info Dropdown Combined Example Main Menu Info Wifi, Phone, Address, Facebook, TikTok Info Wi-Fi Name: Lu Lar Lar Lay Password: […]<\/p>\n","protected":false},"author":1,"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":"disabled","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-5","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mm2.ezyqrmenu.com\/lularlarlayentertainment\/wp-json\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mm2.ezyqrmenu.com\/lularlarlayentertainment\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mm2.ezyqrmenu.com\/lularlarlayentertainment\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mm2.ezyqrmenu.com\/lularlarlayentertainment\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mm2.ezyqrmenu.com\/lularlarlayentertainment\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":97,"href":"https:\/\/mm2.ezyqrmenu.com\/lularlarlayentertainment\/wp-json\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":1820,"href":"https:\/\/mm2.ezyqrmenu.com\/lularlarlayentertainment\/wp-json\/wp\/v2\/pages\/5\/revisions\/1820"}],"wp:attachment":[{"href":"https:\/\/mm2.ezyqrmenu.com\/lularlarlayentertainment\/wp-json\/wp\/v2\/media?parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5,"date":"2025-10-30T04:23:38","date_gmt":"2025-10-30T04:23:38","guid":{"rendered":"https:\/\/mm2.ezyqrmenu.com\/lularlarlayentertainment\/?page_id=5"},"modified":"2026-03-03T09:18:32","modified_gmt":"2026-03-03T02:48:32","slug":"menu","status":"publish","type":"page","link":"https:\/\/mm2.ezyqrmenu.com\/lularlarlayentertainment\/","title":{"rendered":"Menu"},"content":{"rendered":"\n