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 class="c-menu-text" contextmenu="c-menu">Firefoxでマウスの右クリックからコンテキストメニューを表示する。</p>
<menu type="context" id="c-menu">
  <menuitem class="c-menu-slide-header" type="checkbox">ヘッダーを固定</menuitem>
</menu>

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ヘッダーのスクロール時に、固定表示/非表示する動作をボタンで切り替える方法をご紹介いたしました...
/* ヘッダースライド切替え */
jQuery(function() {

    jQuery(".arrow-svg,.c-menu-slide-header").click(function() {

        jQuery("body").toggleClass("slide-header");
        jQuery(".arrow-svg,.c-menu-slide-header").toggleClass("on");

        if (jQuery.cookie("slide-header")) {

            jQuery.cookie("slide-header", '', {

                expires: -1, path: "/"

            });

        } else {

            jQuery.cookie("slide-header", '1', {

                expires: 7, path: "/"

            });

        }

    });

    if (jQuery.cookie("slide-header")) {

        jQuery("body").toggleClass("slide-header");
        jQuery(".arrow-svg,.c-menu-slide-header").toggleClass("on");

    }

});

/* ヘッダースライド */
var startPos = 0;

jQuery(window).scroll(function() {
    var currentPos = jQuery(this).scrollTop();
    if (currentPos > startPos) {
        if (jQuery(window).scrollTop() >= 135) {
            jQuery("#header").css("top", "-135px");
        }
    } else {
        jQuery("#header").css("top", 0 + "px");
    }
    startPos = currentPos;
});

まとめ

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

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

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

シェアする

フォローする

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