พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน menu Tag

<menu> ใน HTML5 เป็นแท็กที่ใช้เพื่อกำหนดรายการเมนู (menu) หรือกลุ่มของคำสั่ง (commands) ที่ผู้ใช้สามารถเลือกปฏิบัติได้ อย่างไรก็ตาม การใช้งาน <menu> นั้นมีการพัฒนาและปรับเปลี่ยนไปเรื่อย ๆ ในหลายเบราว์เซอร์ปัจจุบัน บางส่วนของการใช้งานจึงอาจจะไม่ได้รับการสนับสนุนอย่างเต็มที่แล้ว

การใช้งานหลักของ <menu> ใน HTML5

  1. Context Menu <menu> สามารถใช้เพื่อสร้างคอนเท็กซ์เมนู หรือเมนูที่ปรากฏขึ้นเมื่อคลิกขวาที่องค์ประกอบหนึ่ง โดยจะรวมคำสั่งหลายๆคำสั่งเข้าไว้ด้วยกัน
  2. รายการลิงก์ (List of Links) <menu> สามารถใช้เพื่อสร้างรายการของลิงก์ได้ เช่น การแสดงรายการลิงก์ในการนำทางหรือสำหรับเมนูแถบด้านข้าง

การใช้ <menu> สร้างคอนเท็กซ์เมนู

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Example of Context Menu</title>
</head>
<body>
    <p id="myText">Right-click on this text to see the menu.</p>

    <menu type="context" id="myMenu">
        <menuitem label="Copy" onclick="alert('Copy command clicked')"></menuitem>
        <menuitem label="Paste" onclick="alert('Paste command clicked')"></menuitem>
    </menu>

    <script>
        document.getElementById('myText').addEventListener('contextmenu', function(event) {
            event.preventDefault();
            document.getElementById('myMenu').style.display = 'block';
            document.getElementById('myMenu').style.position = 'absolute';
            document.getElementById('myMenu').style.top = event.pageY + 'px';
            document.getElementById('myMenu').style.left = event.pageX + 'px';
        });

        document.addEventListener('click', function() {
            document.getElementById('myMenu').style.display = 'none';
        });
    </script>
</body>
</html>

ในตัวอย่างนี้ เมื่อผู้ใช้คลิกขวาที่ข้อความ “Right-click on this text to see the menu” จะปรากฏเมนูบริบทขึ้นมา โดยมีคำสั่ง “Copy” และ “Paste” ที่ผู้ใช้สามารถเลือกได้

การใช้ <menu> สร้างรายการของลิงก์ (Navigation Menu)

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Example of Navigation Menu</title>
</head>
<body>
    <nav>
        <menu>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </menu>
    </nav>
</body>
</html>

ในตัวอย่างนี้ <menu> ถูกใช้เป็นเมนูนำทางในเว็บไซต์ ซึ่งมีลิงก์ไปยังหน้า “Home”, “About Us”, “Services”, และ “Contact”

เมนูแบบกลุ่มคำสั่ง (Command Grouping)

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Example of Command Menu</title>
</head>
<body>
    <menu label="File">
        <menuitem label="New" onclick="alert('New file created')"></menuitem>
        <menuitem label="Open" onclick="alert('Opening file')"></menuitem>
        <menuitem label="Save" onclick="alert('File saved')"></menuitem>
    </menu>
</body>
</html>

ตัวอย่างนี้เป็นการสร้างเมนูที่มีคำสั่งสำหรับการจัดการไฟล์ เช่น “New”, “Open” และ “Save” ซึ่งเมื่อคลิกจะมีการทำงานตามคำสั่งที่ตั้งไว้

การปรับใช้

เนื่องจาก <menu> และ <menuitem> ถูกลบออกจากมาตรฐาน HTML5 ในหลายๆ เบราว์เซอร์ การนำไปใช้งานจึงอาจจะต้องใช้ร่วมกับ JavaScript เพื่อให้ทำงานได้ครบถ้วนในทุกเบราว์เซอร์

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ