Menu
HTML

HTML Interactive Elements

11. Interactive Elements

  • <details>: encapsulates a disclosure widget with a label "Click for options."
  • <summary>: provides the clickable label that, when clicked, reveals or hides the content inside <details>.
  • <menu>: is used to define a list of commands.
  • <menuitem>: represents an option within the menu, labeled "Option 1," and triggers the JavaScript function handleOption1() when clicked.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Details Example</title>
</head>
<body>

<!-- Example of using the <details>, <summary>, <menu>, and <menuitem> elements -->
<details>
    <!-- <summary> provides the clickable label for the disclosure widget -->
    <summary>Click for options</summary>

    <!-- <menu> defines a list of commands -->
    <menu type="toolbar">
        <!-- <menuitem> represents an option within the menu -->
        <menuitem label="Option 1" onclick="handleOption1()"></menuitem>
        <menuitem label="Option 2" onclick="handleOption2()"></menuitem>
        <menuitem label="Option 3" onclick="handleOption3()"></menuitem>
    </menu>

    <!-- Content inside <details> that will be revealed or hidden -->
    <p>This is the content that is revealed or hidden when clicking the options.</p>
</details>

<script>
    // JavaScript functions to handle menuitem clicks
    function handleOption1() {
        alert("Option 1 clicked!");
        // Add your custom logic for Option 1 here
    }

    function handleOption2() {
        alert("Option 2 clicked!");
        // Add your custom logic for Option 2 here
    }

    function handleOption3() {
        alert("Option 3 clicked!");
        // Add your custom logic for Option 3 here
    }
</script>

</body>
</html>
HTML