Giới thiệu phần tử "Menu" và "Menuitem" trong HTML5

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Hôm nay, tôi sẽ giới thiệu với bạn hai phần tử HTML5: <menu> và <menuitem>, là một phần nằm trong nhóm Các phần tử tương tác. Các trang web đã phát triển thành một cái gì đó lớn hơn không chỉ là các liên kết tài liệu; các trang web ngày càng hoạt động như những ứng dụng. Như vậy, đây là lúc thích hợp để hình thành các tính năng tương tác web tiêu chuẩn.

Hai phần tử này nằm trong số những phần tử ít được các nhà phát triển đề cập đến, có lẽ do chúng thiếu sự hỗ trợ trong các trình duyệt chính. Firefox là trình duyệt duy nhất đã triển khai cài đặt phần tử này tại thời điểm viết bài.

Phần tử Menu và Nav

Khi chúng ta đang nói về menu, điều quan trọng là không được nhầm lẫn với <nav>. Đặc tả kỹ thuật thực hiện tốt công việc của nó trong việc xác định sự khác biệt giữa hai phần tử này.

Phần tử <nav> là phần tử điều hướng HTML. Nó là các phần tử đại diện cho khối điều hướng của trang web. Nó thường chứa một tập hợp các liên kết cho phép người dùng chuyển hoặc nhảy qua các phần trên trang hoặc đến một trang khác của trang web.

Phần tử <menu>, mặt khác, đại diện cho một menu chứa các lệnh. Ý tưởng tương tự như các ứng dụng desktop hoặc điện thoại di động. Các ứng Desktop thường sử dụng thanh công cụ menu và menu ngữ cảnh để thực hiện các tác vụ khác nhau. Lấy ví dụ menu Blur trong Photoshop. Điều này thực hiện một tác vụ làm mờ cho lớp đã chọn.

Đây là sự khác biệt cơ bản giữa hai phần tử; <nav> nên chứa các liên kết để giúp người dùng điều hướng trên trang web, trong khi các phần tử <menu> nên giúp người dùng thực hiện các tác vụ nhất định.

Sử dụng phần tử Menu

Tóm lại, phần tử <menu> được thiết kế tạo các menu theo ngữ cảnh, thanh công cụ và popup. Tuy nhiên, cả hai sau đó đã không được cài đặt trong bất kỳ trình duyệt nào, bao gồm cả trong Firefox. Tại thời điểm này, rất khó để đoán như thế nào (nếu?) liệu các trình duyệt sẽ cài đặt chúng và chúng sẽ trông như thế . Đó cũng là một cơ hội tốt để đặc tả kỹ thuật cho thanh công cụ và menu popup sẽ thay đổi một chút trong phiên bản kế tiếp.

Bây giờ, chúng ta sẽ tập trung sự chú ý tính năng Contextual Menu.

Contextual Menu

Một Contextual Menu (hoặc menu ngữ cảnh) xuất hiện khi chúng ta nhấp chuột phải lên một ứng dụng. Các tùy chọn hiện ra cụ thể ở nơi người dùng đã nhấp vào, đó là context.

Tuỳ chọn JavaScript

Có thể thêm các menu ngữ cảnh trên các trang web thông qua JavaScript hoặc một plugin jQuery. Vấn đề với phương thức này là nó thường yêu cầu nhiều mã đánh dấu, và tệ hơn nữa, script sẽ loại bỏ Context Menu gốc của trình duyệt, có thể phá vỡ quá trình bình thường của người dùng nếu thực hiện không đúng.

Menu ngữ cảnh tùy biến trong Google Drive

Giải pháp thuần HTML

Phần tử <menu> cùng với <menuitem> sẽ kết hợp các phần tử menu mới như là một phần của menu ngữ cảnh gốc. Trong ví dụ dưới đây, chúng ta sẽ thêm vào phần tử <body> của chúng ta một phần tử menu ngữ cảnh mới có tên "Hello World".

<body contextmenu="new-context-menu">
<menu id="new-context-menu" type="context">
    <menuitem>Hello World</menuitem>
</menu>
</body>

Các phần thiết yếu của đoạn code trên là các thuộc tính—id, type và contextmenu—chỉ định kiểu menu như là một context menu cũng như phạm vi nơi mà menu mới sẽ được hiển thị.

Trong trường hợp của chúng ta, trình đơn mới sẽ xuất hiện bất cứ nơi nào trên tài liệu khi thực hiện nhấp chuột phải vào, như chúng ta đã gán nó bằng cách sử dụng các thuộc tính contextmenu cho body.

Ngoài ra, bạn có thể hạn chế phạm vi trong một phần nào đó trên trang bằng cách gán thuộc tính contextmenu vào các phần tử—<div>, <main>, <section>, và vv—thay vì trong body.

<body>
    <div contextmenu="new-context-menu">
    <!-- content -->
    </div>
    <menu id="new-context-menu" type="context">
        <menuitem>Hello World</menuitem>
    </menu>
</body>

Khi chúng ta xem nó trong trình duyệt (tại thời điểm này, chỉ trong Firefox) bạn sẽ thấy rằng menuitem mà chúng ta định nghĩa được thêm vào đầu danh sách.

Thàn phần menu mới, "Hello World", được nạp như là một phần của menu ngữ cảnh gốc.

Thêm menu con và biểu tượng

Menu con tạo nên một nhóm các thành phần menu với các hành động liên quan hoặc tương tự. Menu Image Rotation trong Photoshop là một ví dụ hoàn hảo của điều này. Menu Image Rotation chứa một số thành phần menu con để cho phép người dùng chọn độ xoay (90⁰ và 180⁰) mà họ muốn, cũng như hướng để áp dụng nó.

Sử dụng phần tử <menu>, thêm menu con đều rất dễ dàng và trực quan. Hãy lồng thêm một <menu> cùng với một label để khai báo tên menu, giống như:

<menu id="demo-image" type="context">
    <menu label="Image Rotation">
        <menuitem>Rotate 90</menuitem>
        <menuitem>Rotate 180</menuitem>
        <menuitem>Flip Horizontally</menuitem>
        <menuitem>Flip Vertically</menuitem>
    </menu>
</menu>

Khi chúng ta chạy điều này trong một trình duyệt có hỗ trợ, chúng ta sẽ thấy một trình đơn mới với bốn Menu con:

Biểu tượng

Hơn nữa, một thuộc tính mới được gọi là icon đã được giới thiệu cho phép nó có thể để thêm một biểu tượng bên cạnh menu. Điều đáng nói là thuộc tính này chỉ áp dụng được bên trong phần tử <menuitem>. Thiết lập đường dẫn đến icon, như sau.

<menu id="demo-image" type="context">
    <menu label="Image Rotation">
        <menuitem icon="img/arrow-return-090.png">Rotate 90</menuitem>
        <menuitem icon="img/arrow-return-180.png">Rotate 180</menuitem>
        <menuitem icon="img/arrow-stop-180.png">Flip Horizontally</menuitem>
        <menuitem icon="img/arrow-stop-270.png">Flip Vertically</menuitem>
    </menu>
</menu>

Và đó là biểu tượng, như bạn có thể nhìn thấy dưới đây.

Mỗi menu con bây giờ có một biểu tượng minh họa. Các biểu tượng bởi Fuga icon.

Thêm một chức năng vào Menu

Chúng ta đã xây dựng một cái gì đó trông giống như một menu ngữ cảnh, nhưng nó vẫn chưa hoạt động được. Người dùng sẽ mong đợi một cái gì đó xảy ra khi họ nhấp vào nó; bấm vào Copy sẽ sao chép văn bản hoặc liên kết, trong khi nhấp vào New Folder sẽ tạo ra một thư mục mới. Chúng ta có thể làm điều này bằng cách sử dụng JavaScript.

Lưu ý: trước khi tiến hành tôi đề nghị bạn hãy xem khoá học của Jeremy McPeak về JavaScript Cơ bản; một điểm khởi đầu tuyệt vời cho bất cứ ai học JavaScript.

Lấy ví dụ "Image Rotation" ở trên, hãy thêm một chức năng mà sẽ xoay hình ảnh mà chúng ta đã nhấp vào. CSS3 Transform và Transition có thể thực hiện việc xoay trong trình duyệt cho chúng ta; ở đây là phong cách mà sẽ xoay tấm hình 90 độ.

.rotate-90 {
    transform: rotate(90deg);
}

Khi chỉ định phong cách xong, chúng ta cần viết một hàm để áp dụng điều này lên hình ảnh:

function imageRotation(name) {
    document.getElementById('image').className = name;
}

Thêm hàm này vào trong <menuitem> tương ứng thông qua thuộc tính onclick và truyền tham số với tên lớp, rotate-90:

<menu id="demo-image" type="context">
    <menu label="Image Rotation">
        <menuitem onclick="imageRotation('rotate-90')" icon="img/arrow-return-090.png">Rotate 90</menuitem>
        <menuitem icon="img/arrow-return-180.png">Rotate 180</menuitem>
        <menuitem icon="img/arrow-stop-180.png">Flip Horizontally</menuitem>
        <menuitem icon="img/arrow-stop-270.png">Flip Vertically</menuitem>
    </menu>
</menu>

Để hoàn tất, hãy tạo các luật phong cách sẽ xoay hình ảnh 180 độ và lật hình ảnh. Và thêm từng hàm bên trong thành phần menu tương ứng cùng với tham số. Xem ví dụ này trong trang demo.

Kết luận

Phần tử <menu> có thể rất hữu ích cho cả các ứng dụng web hoặc các trang web thông thường. Đáng buồn thay, sự hỗ trợ vẫn còn thực sự rất nghèo nàn.

Hy vọng rằng, Safari, Chrome, Opera và Internet Explorer sẽ sớm nắm bắt và cài đặt các kiểu menu (popup và thanh công cụ). Tôi thực sự mong chờ phần tử này sẽ phát triển trong năm tới.

Tài liệu tham khảo thêm

Phần tử Tương tác: Phần tử Menu