當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

利用HTML 5中的Menu和Menuitem元素快速创建菜单

發布時間：2024/6/21 综合教程 30 生活家

生活随笔收集整理的這篇文章主要介紹了利用HTML 5中的Menu和Menuitem元素快速创建菜单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

原文：Introducing the HTML5 “Menu” and “Menuitem” Elements

譯文：HTML 5中Menu和Menuitem的元素介紹

譯者：dwqs

今天向你介紹HTML 5中的兩個元素：Menu和Menuitem，這兩個元素是W3C交互元素中的一部分?，F在Web的演變已經不僅僅局限于文檔之間的鏈接，在APPs中，頁面的行為越來越多，因此，是時候形成一個Web交互的標準了。

Menu和Menuitem是在開發者中談論最熱門的兩個元素，可能是由于主流瀏覽器對其缺乏足夠的支持。在我寫這篇文章的時候，FireFox已經實現了這個元素。

Menu和Nav的對比

當談到Menu時，難免不和Nav元素混淆。區分這兩個元素，文檔規范是一個不錯的工具。

Nav元素是HTML導航元素，代表著Web頁面的導航塊，一般包含一個links集合，允許用戶在頁面內跳轉或者跳轉到其它網站頁面。

Menu是一系列菜單命令的集合，跟桌面或者手機應用有點相似。桌面應用通常使用工具條菜單或者上下文菜單來展現各種任務。Nav和Menu最根本的不同之處在于：Nav元素包含導航鏈接去幫助用戶在Web頁面之間跳轉，而Menu應該讓用戶執行特定的任務。

使用Menu元素

在一個容器中，Menu元素用于創建上下文、工具欄和彈出菜單。然而，后面的兩個功能還沒有瀏覽器實現，包括FireFox。此刻，很難去猜測瀏覽會怎么實現他們以及看起來會是什么樣子。不過對于toolbar和popup菜單的規范在下一代交互設計中做些改變也是一個不錯的機會。

對于現在，我們將集中注意力到上下文。

上下文

當我們右擊一個應用時，會出現一個上下文菜單。顯示的選項取決于用戶在哪里點擊。

JavaScript 選項

通過JavaScript和JQuery插件在Web頁面上添加上下文菜單是可以實現的。問題是這種方法需要額外的標記，并且腳本會刪除瀏覽器本地的菜單，如果處理不當，將會使用戶感到失望。

本地解決方案

Menu和Menuitem一起使用，將把新的菜單合并到本地的上下文菜單。例如，給body添加一個叫“Hello World”的菜單

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

在上述代碼片段中，包含的基本屬性有id,type和contextmenu—它指定了菜單類型是context，同時也指定了新的菜單項應該被顯示的區域。

在示例中，當右擊鼠標時，新的菜單項將出現在文檔的任何地方，因為我們指定它的作用區域是body。

當然，你可以通過在特定的元素上給contextmenu賦值，例如div,main,section等等，來限制新菜單項的作用區域。

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

當在FireFox中查看時，會發現新添加的菜單項被添加到最頂部。

添加子菜單和圖標

子菜單由一組相似或相互的菜單項組成。PS中的Image Rotation就是一個典型的例子。使用Menu添加子菜單是非常容易和直觀的。查看下面的示例代碼：

<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>

在支持Menu元素的瀏覽器中運行時，將看到新菜單中添加的四個子菜單：

圖標

介紹一個新的屬性：icon,使用這個屬性可以在菜單的旁邊添加圖標。值得一提的是，icon屬性只能在menuitem元素中使用。示例代碼：

<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>

結果如你所見的：

在菜單中添加功能

我們已經構建了一些看起來像菜單的示例，但是是沒有任何功能都的。當點擊菜單時，用戶期待一些事情發生。例如點擊Copy應該要復制文本或鏈接，點擊New Folder應該創建一個新的文件夾?？梢杂肑avaScript實現這些功能。
注意：在開始之前，我建議你在JavaScript Fundamentals 看一看Jeremy McPeak’s的課程，對于任何想學習JavaScript的人都是一個不錯的開始。
利用上面的“Image Rotation”為例，讓我們添加一個當點擊時旋轉圖像的功能。CSS 3的Transform and Transition可以在瀏覽器中為我們實現這個功能。將圖像旋轉90度的樣式如下：

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

為了使用這個樣式，需要寫一個函數將它應用到圖像。

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

把這個函數和每一個menuitem的onclick屬性關聯，并且傳遞一個參數：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>

完成這個之后，再創建將圖片旋轉180度和裁剪圖片的樣式，將每一個函數添加到獨立的menuitem中，記得傳參數。查看效果：in the demo page.

查看更多關于Menu元素的信息：Interactive Element: The Menu Element

查看我的示例：http://jsfiddle.net/Web_Code/15pc5zfv/1/embedded/result/

總結

以上是生活随笔為你收集整理的利用HTML 5中的Menu和Menuitem元素快速创建菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CentOS7 服务器连接超时自动断开问
下一篇：求如何设置水星路由器水星路由器如何mes