mirror of
https://github.com/thejakubruzicka/MNotes.git
synced 2025-07-10 06:24:04 +02:00
63 lines
2.5 KiB
HTML
63 lines
2.5 KiB
HTML
<div class="figure-wrapper">
|
|
<figure
|
|
style="justify-content: center"
|
|
aria-label="A filled button that says menu with submenus. Interact with the button to interact with a menu that has two sub menus."
|
|
>
|
|
<span style="position: relative">
|
|
<md-filled-button id="usage-submenu-anchor"> Menu with Submenus </md-filled-button>
|
|
<!-- Note the has-overflow attribute -->
|
|
<md-menu has-overflow id="usage-submenu" anchor="usage-submenu-anchor">
|
|
<md-sub-menu>
|
|
<md-menu-item slot="item">
|
|
<div slot="headline">Fruits with A</div>
|
|
<!-- Arrow icons are helpful affordances -->
|
|
<md-icon slot="end">arrow_right</md-icon>
|
|
</md-menu-item>
|
|
<!-- Submenu must be slotted into sub-menu's menu slot -->
|
|
<md-menu slot="menu">
|
|
<md-menu-item>
|
|
<div slot="headline">Apricot</div>
|
|
</md-menu-item>
|
|
<md-menu-item>
|
|
<div slot="headline">Avocado</div>
|
|
</md-menu-item>
|
|
<!-- Nest as many as you want and control menu anchoring -->
|
|
<md-sub-menu menu-corner="start-end" anchor-corner="start-start">
|
|
<md-menu-item slot="item">
|
|
<div slot="headline">Apples</div>
|
|
<!-- Arrow icons are helpful affordances -->
|
|
<md-icon slot="start">
|
|
arrow_left
|
|
</md-icon>
|
|
</md-menu-item>
|
|
<md-menu slot="menu">
|
|
<md-menu-item>
|
|
<div slot="headline">Fuji</div>
|
|
</md-menu-item>
|
|
<md-menu-item>
|
|
<div slot="headline" style="white-space: nowrap;">Granny Smith</div>
|
|
</md-menu-item>
|
|
<md-menu-item>
|
|
<div slot="headline" style="white-space: nowrap;">Red Delicious</div>
|
|
</md-menu-item>
|
|
</md-menu>
|
|
</md-sub-menu>
|
|
</md-menu>
|
|
</md-sub-menu>
|
|
<md-menu-item>
|
|
<div slot="headline">Banana</div>
|
|
</md-menu-item>
|
|
<md-menu-item>
|
|
<div slot="headline">Cucumber</div>
|
|
</md-menu-item>
|
|
</md-menu>
|
|
</span>
|
|
<script type="module">
|
|
const anchorEl = document.body.querySelector("#usage-submenu-anchor");
|
|
const menuEl = document.body.querySelector("#usage-submenu");
|
|
anchorEl.addEventListener("click", () => {
|
|
menuEl.open = !menuEl.open;
|
|
});
|
|
</script>
|
|
</figure>
|
|
</div>
|