翻訳: HTML 5 の Menu および Menuitem の要素の紹介
翻訳者: dwqs
今日は、HTML 5 の 2 つの要素である Menu と Menuitem を紹介します。これら 2 つの要素は、W3C インタラクティブ要素の 1 つです。一部。現在、Web の進化はドキュメント間のリンクに限定されず、ページの動作はますます増えています。そのため、Web インタラクションの標準を形成する時期が来ています。
Menu と Menuiitem は、開発者の間で最も話題になっている 2 つの要素です。これは、おそらく主流のブラウザーでそれらが十分にサポートされていないためです。この記事を書いている時点で、FireFox はこの要素を実装しています。
Menu に関しては、Nav 要素と混同しないように注意してください。これら 2 つの要素を区別するには、ドキュメント仕様が優れたツールです。
Nav 要素は、Web ページのナビゲーション ブロックを表す HTML ナビゲーション要素で、通常、ユーザーがページ内に移動したり、他の Web サイトのページに移動したりできるようにするリンクのコレクションが含まれています。
メニューはメニュー コマンドのコレクションであり、デスクトップ アプリケーションやモバイル アプリケーションに似ています。デスクトップ アプリケーションは通常、ツールバー メニューまたはコンテキスト メニューを使用してさまざまなタスクを表示します。 Nav と Menu の最も基本的な違いは、Nav 要素にはユーザーが Web ページ間を移動できるようにするためのナビゲーション リンクが含まれているのに対し、Menu 要素ではユーザーが特定のタスクを実行できるようにする必要があることです。
Menu 要素の使用
コンテナでは、Menu 要素を使用してコンテキスト、ツールバー、ポップアップ メニューを作成します。ただし、後の 2 つの機能は、FireFox を含むブラウザにはまだ実装されていません。現時点では、ブラウジングがそれらをどのように実装し、どのように見えるかを推測するのは困難です。ただし、次世代のインタラクション デザインにおいて、ツールバーやポップアップ メニューの仕様を変更する良い機会でもあります。
今のところは、コンテキストに焦点を当てます。
コンテキスト
アプリを右クリックすると、コンテキスト メニューが表示されます。表示されるオプションは、ユーザーがクリックした場所によって異なります。
JavaScript オプション
JavaScript および JQuery プラグインを介して Web ページにコンテキスト メニューを追加できます。問題は、このアプローチでは追加のマークアップが必要であり、スクリプトによってブラウザのネイティブ メニューが削除されるため、適切に処理しないとユーザーがイライラすることです。
ローカル ソリューション
Menu と Menuitem を一緒に使用すると、新しいメニューがローカル コンテキスト メニューにマージされます。たとえば、「Hello World」というメニューを本文に追加します
<body contextmenu="new-context-menu"><menu id="new-context-menu" type="context"> <menuitem>Hello World</menuitem></menu></body>
上記のコード スニペットでは、含まれる基本属性は id、type、contextmenu であり、メニュー タイプが context であることを指定し、また、 new メニュー項目が表示される領域。
この例では、マウスを右クリックすると、スコープが本文であると指定したため、新しいメニュー項目がドキュメント内の任意の場所に表示されます。
もちろん、div、main、section などの特定の要素の contextmenu に値を割り当てることで、新しいメニュー項目の範囲を制限することもできます。
<body> <div contextmenu="new-context-menu"> <!-- content --> </div> <menu id="new-context-menu" type="context"> <menuitem>Hello World</menuitem> </menu></body>
FireFoxで見ると、新しく追加したメニュー項目が一番上に追加されているのがわかります。
サブメニューとアイコンを追加します
サブメニューは、類似または相互のメニュー項目のグループで構成されます。 PS における画像の回転はその典型的な例です。メニューを使用してサブメニューを追加するのは非常に簡単で直感的です。以下のサンプル コードを確認してください:
rrree
Menu 要素をサポートするブラウザで実行すると、新しいメニューに追加された 4 つのサブメニューが表示されます:
icon
新しい属性の導入 :アイコンの場合は、この属性を使用してメニューの横にアイコンを追加します。 icon 属性は menuitem 要素でのみ使用できることに注意してください。コード例:
<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>
結果はご覧のとおりです:
メニューに機能を追加する
メニューのように見えるが、機能がまったくないサンプルをいくつか作成しました。メニューをクリックすると、ユーザーは何かが起こることを期待します。たとえば、「コピー」をクリックするとテキストまたはリンクがコピーされ、「新規フォルダー」をクリックすると新しいフォルダーが作成されます。これらの機能は JavaScript を使用して実装できます。 之開始 注: 始める前に、JavaScript を学びたい人にとっては、Jeremy Mcpeak のコースを参照することをお勧めします。 上の「画像の回転」を例に、クリック時に画像を回転する機能を追加してみましょう。 CSS 3 の Transform と Transition は、この機能をブラウザに実装できます。画像を 90 度回転するスタイルは次のとおりです:
<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>
このスタイルを使用するには、画像に適用する関数を記述する必要があります。
れーい
把这个函数和每一个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/
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
