HTML5.1で導入されたmenuとmenuitemタグで独自のコンテキストメニューを作ってみた

右クリックで表示されるコンテキストメニューをHTML5.1で導入された<menu>と<menuitem>タグで独自に作れるという話を聞き、早速作ってみることにしました。

独自のコンテキストメニューを表示する

下記はFirefoxの最新版で確認することができます。現在のChromeの最新版(Chrome 55)では未対応のようです。

Firefoxでマウスの右クリックからコンテキストメニューを表示する。

ヘッダーを固定

Firefoxで上記の要素内で右クリックをすると、コンテキストメニューに独自の「ヘッダーを固定」というメニューが表示されます。

HTML5.1 menuitem コンテキストメニュ-に独自のメニューが表示される
コンテキストメニュ-に独自のメニューが表示される

「ヘッダーを固定」を選択すると、上スクロール時にサイトのヘッダーが固定されます。再度選択すると固定が解除されます。

画像をクリックすると動画が表示されます。
HTML5.1 menuitem メニューの「ヘッダーを固定」を選択するとヘッダーが固定される
メニューの「ヘッダーを固定」を選択するとヘッダーが固定される

<menu>タグは対応していないブラウザで見ると、テキストのような感じで表示されるので、未対応ブラウザの場合は非表示にする必要があります。今回は対応していないブラウザでもあえて非表示にせず、表示しています。

HTML5.1 menuitem 未対応ブラウザではテキストのような感じで表示される
未対応ブラウザではテキストのような感じで表示される

html

p要素に記述されている「contextmenu=”c-menu”」の「c-menu」と、menu要素にある「id=”c-menu”」の「c-menu」は同じ記述にしておく必要があります。

menuitemに記述している「c-menu-slide-header」はヘッダーを固定するclickイベントで使用しています。「type=”checkbox”」は独自メニューを選択したときにチェックマークが表示されます。

menuitemはcheckboxの他にradio(複数の項目からいずれかを選択)、command(クリックでアクションを行う)などがあります。

JS

ヘッダーを固定するロジックは、以前ご紹介したものを「c-menu-slide-header」クラスを追加する形でそのまま使用しています。

WordPressテーマの「Simplicity」で表示されるモバイルメニューの、スクロール時に固定表示/非表示する動作をボタンで切り替えるようにしてみた
前回、「Simplicity」で表示されるPCヘッダーのスクロール時に、固定表示/非表示する動作をボタンで切り替える方法をご紹介いたしました...

まとめ

  • menuのmenuitemはFirefoxの最新版は対応しているが、Chrome(バージョン55)は対応していない。
  • トリガーとなる要素のcontextmenuとmenuのidは同じ属性値にする。
  • menuitemの属性はcheckbox、radio、commandなどがある。

<menu>と<menuitem>タグをうまく使えば、そのサイト独自のコンテキストメニューを提供することができるようになるので、アイデア次第でいろいろできそうです。対応していないブラウザがまだまだ多いですが、期待して待ちましょう。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

HTML5.1で導入されたmenuとmenuitemタグで独自のコンテキストメニューを作ってみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!