ホーム > 実験・ラボ > 【HTML5,CSS3】menu要素のレンダリングに挑戦してみた

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

mixiチェック Clip to Evernote このエントリーをはてなブックマークに追加

こんにちは。

先日、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 14:15:55 更新