<!DOCTYPE html>
@WAIT-FOR:Ready
@EXECUTE-AND-WAIT-FOR:openMenu()
@EXECUTE-AND-WAIT-FOR:closeMenu()
@BLINK-ALLOW:htmlTag*
@BLINK-ALLOW:className*
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Web Menu</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
<script type="module">
import { injectImportMap, loadAndWaitForReady } from "./resources/utils.js";
injectImportMap();
const components = [
"md-menu",
"md-menu-item",
"md-sub-menu",
"md-filled-button",
"md-icon"
];
loadAndWaitForReady(components, () => {
const statusDiv = document.getElementById("status");
const menuContainer = document.createElement("div");
menuContainer.style.position = "relative";
menuContainer.style.display = "inline-block";
const button = document.createElement("md-filled-button");
button.id = "test-menu-button";
button.textContent = "Open Menu";
const menu = document.createElement("md-menu");
menu.id = "test-menu";
menu.anchor = "test-menu-button";
menu.quick = true;
const items = [
{ headline: "Menu Item 1" },
{ headline: "Menu Item 2", startIcon: "star" },
{ headline: "Menu Item 3", startIcon: "settings", disabled: true },
{
headline: "Submenu Item",
endIcon: "arrow_right",
submenu: [
{ headline: "Submenu Item 1" },
{ headline: "Submenu Item 2" }
]
}
];
items.forEach(itemInfo => {
const menuItem = document.createElement("md-menu-item");
menuItem.headline = itemInfo.headline;
if (itemInfo.startIcon) {
const icon = document.createElement("md-icon");
icon.slot = "start";
icon.textContent = itemInfo.startIcon;
menuItem.appendChild(icon);
}
if (itemInfo.endIcon) {
const icon = document.createElement("md-icon");
icon.slot = "end";
icon.textContent = itemInfo.endIcon;
menuItem.appendChild(icon);
}
if (itemInfo.disabled) {
menuItem.disabled = true;
}
if (itemInfo.submenu) {
const subMenu = document.createElement("md-sub-menu");
subMenu.slot = "submenu";
itemInfo.submenu.forEach(subItemInfo => {
const subMenuItem = document.createElement("md-menu-item");
subMenuItem.headline = subItemInfo.headline;
subMenu.appendChild(subMenuItem);
});
menuItem.appendChild(subMenu);
}
menu.appendChild(menuItem);
});
menuContainer.appendChild(button);
menuContainer.appendChild(menu);
statusDiv.appendChild(menuContainer);
statusDiv.setAttribute("aria-label", "Ready");
});
</script>
</head>
<body>
<div id="status" aria-label="Loading">
</div>
</body>
<script>
async function openMenu() {
const menu = document.getElementById("test-menu");
if (menu) {
menu.open = true;
const statusDiv = document.getElementById("status");
const statusText = document.createElement("div");
statusText.textContent = "Menu Opened";
statusDiv.appendChild(statusText);
return "Menu Opened";
}
return "Failed to open Menu";
}
async function closeMenu() {
const menu = document.getElementById("test-menu");
if (menu) {
menu.anchorElement.focus({ preventScroll: true });
menu.open = false;
await menu.updateComplete;
menu.offsetHeight;
await new Promise(resolve => setTimeout(resolve, 500));
const statusDiv = document.getElementById("status");
const statusText = document.createElement("div");
statusText.textContent = "Menu Closed";
statusDiv.appendChild(statusText);
return "Menu Closed";
}
return "Failed to close Menu";
}
</script>
</html>
