【HTML5,CSS3】menu要素のレンダリングに挑戦してみた

こんにちは。

先日、HTML5のmenu要素に付いて調べていたら、まだ実装がほとんどされていないということに気が付いた管理人です。

そこで、W3Schools.comさんのサイトのサンプルを参考に、こんな風にレンダリングされるんじゃないかという妄想も込みでちょっといじってみた記録です。

以下、サンプルのソースです。

<!DOCTYPE HTML>
<html>
<body>
<style>
menu, li{
    margin: 0;
    padding: 0;
    display:inline;
}
menu[type="toolbar"]{
    height: 1.75em;
    display: block;
    background: #ddd;
    border-bottom: solid 1px #999;
    text-align: left;
}
menu[type="toolbar"] li{
    position: relative;
}
menu[type="toolbar"] > li > menu[label]:before{
    display: inline-block;
    content:attr(label);
    padding: 0.25em;
    position: relative;
    top: 0;
    left: 0;
}
menu[type="toolbar"] > li > menu[label]{
    display: inline-block;
    padding: 0;
    background: #ddd;
    border: solid 1px #999;
    position: relative;
    top: 0;
    left: 0;
}
menu[type="toolbar"] > li > menu[label] > button{
    display: block;
    padding: 0.25em;
    width: 100%;
    background: #ddd;
    border: none;
    position: relative;
    text-align: left;
    cursor: pointer;
}
menu[type="toolbar"] > li > menu[label] > button:hover{
    color: #f8f8f8;
    background: #33c;
    position: relative;
}
</style>
<menu type="toolbar">
<li>
 <menu label="File(F)">
  <button type="button" onclick="file_new()">New...</button>
  <button type="button" onclick="file_open()">Open...</button>
  <button type="button" onclick="file_save()">Save</button>
 </menu>
</li>
<li>
 <menu label="Edit(E)">
  <button type="button" onclick="edit_cut()">Cut</button>
  <button type="button" onclick="edit_copy()">Copy</button>
  <button type="button" onclick="edit_paste()">Paste</button>
 </menu>
</li>
</menu>
</body>
</html>

カテゴリー:実験・ラボ
2011/08/17 23:15:55 更新