HTML 5_html/css_WEB-ITnose の Menu 要素と Menuitem 要素を使用してメニューをすばやく作成する
翻訳: HTML 5 の Menu および Menuitem の要素の紹介
翻訳者: dwqs
今日は、HTML 5 の 2 つの要素である Menu と Menuitem を紹介します。これら 2 つの要素は、W3C インタラクティブ要素の 1 つです。一部。現在、Web の進化はドキュメント間のリンクに限定されず、ページの動作はますます増えています。そのため、Web インタラクションの標準を形成する時期が来ています。
Menu と Menuiitem は、開発者の間で最も話題になっている 2 つの要素です。これは、おそらく主流のブラウザーでそれらが十分にサポートされていないためです。この記事を書いている時点で、FireFox はこの要素を実装しています。
Menu と Nav の比較
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/
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7569
15
1386
52
87
11
28
107
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
