HTML 5での<menu>要素。

HTML 5での<menu>要素。

HTML 5の仕様草案では、<menu>要素は以下のように定義される事となっております。

種別

フロウ内容。

加えて、type="toolbar"属性が附与された場合はインタラクティヴ内容ともなる。

あるべき位置

フロウ内容があるべき位置。

属性

グローバル属性の他に、以下の独自属性が定義されます。

type

以下のいずれかの値を取ります。

• toolbar … ツールバーとして取り扱います。
• context … コンテクストメニューとして取り扱います。
• list(デフォルト) … 特にインタラクティヴな操作を伴わないメニューリストとなります(ツールバーの中身となるメニューも該当します)。

label

メニューの見出しとなるテキストです。

内容モデル

以下のいずれかの内容モデルとなります。

• 零個以上の<li>要素
• フロウ内容(<li>要素は該当せず)

特に後者の場合、<command>要素(閲覧者が選択出来るコマンド)を用いる事も出来ます。

ツールバーとして利用する場合。

type="toolbar"属性が附与された場合、当該<menu>要素はツールバーとして取扱われます。

すなわち、ウィンドウズ, マックOS或いはXウィンドウなどでの各ウィンドウの上端に表示されるようなメニューが当該要素が置かれる箇所に表示される事となります。

例えば、以下のようなHTMLがあったとします。

<menu type="toolbar">
    <li>
        <menu type="list" label="三次元">
            <li><a href="../3D/HORIKITA_Maki.html">堀北真希</a></li>
            <li><a href="../3D/UETO_Aya.html">上戸彩</a></li>
            …
            </menu>
        </li>

    <li>
        <menu type="list" label="二次元">
            <li><a href="../2D/HAKUREI_Reimu.html">博麗霊夢</a></li>
            <li><a href="../2D/Cirno.html">チルノ(&#9320;)</a></li>
            …
            </menu>
        </li>

    <li>
        <menu type="list" label="ご案内">
            <li><a href="../About.html">当サイトについて</a></li>
            <li><a href="http://www.blog.uso800.uso/">管理人日記</a></li>
            …
            </menu>
        </li>

この文書の場合、HTML 5に対応しているウェブブラウザなら、以下のような表示に出来るでしょう。

つまり、各<li>要素直下にある<menu>要素のlabel属性である、三次元, 二次元,　及びご案内が見出しとなって並び、これらをクリックすると当該<menu>要素の内容となるリストがプルダウンするようになると言う訳です。

一方、HTML 5に対応していない旧式のウェブブラウザ(何度も言うようですが現行のウェブブラウザも旧式扱いとなります)では、従来の<menu>要素の定義に従うため、普通の順不同リストが入れ子になって表示されるでしょう。

• 勿論、現行のウェブブラウザならCSSやJAVAスクリプトを併用する事で、これに近い形にする事も可能です。

コンテクストメニューとして利用する場合。

type="context"属性が附与された場合、当該<menu>要素は他の要素上で用いられるコンテクストメニューとして取扱われます。

具体的には、

1. 当該<menu>要素にid属性で文書内で一意となる識別名を与えておき、
2. このコンテクストメニューを適用したい要素にこの識別名を属性値とするcontextmenu属性を与える事で、

当該要素上である操作を行う事によりコンテクストメニューとして出す事が可能になります。

• このため、type="context"属性を附与する場合には、id属性が欠かせません。
• 尚、contextmenu属性もあらゆる要素に附与できるグローバル属性となります。

ここで言うある操作とは、ウィンドウズで言えば右のボタンを押してクリックする行為であったり、マックOSならコマンドキーを押下する行為などとなります。

• つまり、HTML 5に対応している環境であれば、或いはスクリプトでエミュレーションが可能であれば、通常のコンテクストメニューと全く同じように出来ます。

例えば、以下のようなHTMLがあったとします。

<form name="FAVORITE_FORM" method="GET" action="/cgi/favorite.cgi">
    <iframe style="float: right; " width="240" height="320" id="FAVORITE_LIST" src="IdolList.html"></iframe>
    <p>
        <label contextmenu="FAVORITE_MENU">
            あなたの好きなキャラクタは？
            <input type="text" name="favorite" value="" />
            </label>
        <input type="submit" value="送信" />
        </p>

    <menu type="context" id="FAVORITE_MENU">
        <command label="制作者の一押し" onclick="document.forms.FAVORITE_FORM.elements.favorite.value='堀北真希'; " />
        <command label="三次元アイドルリスト" onclick="document.getElementById('FAVORITE_LIST').src='IdolList.html'; " />
        <command label="二次元キャラクタリスト" onclick="document.getElementById('FAVORITE_LIST').src='CharctersList.html'; " />
        </menu>
    </form>

この文書の場合、HTML 5に対応しているウェブブラウザなら、以下のように出来るでしょう。

つまり、

• 好みのキャラクタを入力する入力欄・<input>要素と
• その直前のプロンプト・あなたの好きなキャラクタは？

を纏めた<label>要素に contextmenu="FAVORITE_MENU" 属性を与えた事で、id="FAVORITE_MENU" 属性を附与された<menu type="context">要素が当該領域上で表示されるコンテクストメニューとして機能するようになる訳です。

このとき、コンテクストメニューとなる<menu>要素には、<li>要素の代わりに<command>要素が並びますが、これはHTML 5で導入される要素で、<menu>要素内でのみ有効なコマンド指定の要素です。

閲覧者は、コンテクストメニュー内のlabel属性で表わされた文字列を選択する事で、onclick属性などのコマンドを実行させる事が可能になります。

• <command>要素の詳細につきましては、またの機会にしたいと思いますが、取敢えずは以上のような事が出来ると覚えておけば良いでしょう。

この場合で言えば、以下のようなコンテクストメニューとなります。

1. 一番目の<command>要素…コンテクストメニューの一行目に制作者の一押しと表示され、それを閲覧者がクリックすると、入力欄に自動的に堀北真希の文字が入力されるようになります。
2. 二番目の<command>要素…コンテクストメニューの二行目に三次元アイドルリストと表示され、それを閲覧者がクリックすると、入力欄の右にフロートしているインラインフレームに 'IdolList.html' で示される文書が表示されます(恐らくそれはアイドルの一覧表で、名前をクリックすると入力欄に入力されるようになっているのでしょう)。
3. 一番目の<command>要素…コンテクストメニューの三行目に二次元キャラクタリストと表示され、それを閲覧者がクリックすると、入力欄の右にフロートしているインラインフレームに 'CharctersList.html' で示される文書が表示されます(恐らくそれは二次元キャラクタの一覧表で、やはり名前をクリックすると入力欄に入力されるようになっているでしょう)。

尚、HTML 5に対応していない旧式のウェブブラウザ(くどいようですが現行のウェブブラウザも旧式扱いとなります)では、JAVAスクリプトなどでDOM操作を行わない限りこのような形でのコンテクストメニューは出ません。そしてこの事は、<menu>要素で実現出来るコンテクストメニューは決してそれがなければ何も出来なくなると言うような事になってはいけない、すなわち入力の助けに留めておかなければならないと言う事が分かります。