<menu>: ã¡ãã¥ã¼è¦ç´
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2015å¹´7æ.
<menu> 㯠HTML ã®è¦ç´ ã§ãHTML 仿§æ¸ã§ã¯ <ul> ã¨ã¯ç°ãªãæå³ã¥ãã¨ãã¦è¨è¿°ããã¦ãã¾ããããã©ã¦ã¶ã¼ã§ã¯ <ul> ã¨éãã®ãªããã®ã¨ãã¦æ±ããã¾ãï¼ããã¦ã¢ã¯ã»ã·ããªãã£ããªã¼ã§å
¬éããã¾ãï¼ãããã¯ï¼<li> è¦ç´ ã§è¡¨ç¾ãããï¼é
ç®ã®é åºã®ãªããªã¹ãã表ãã¾ãã
試ãã¦ã¿ã¾ããã
<div class="news">
<a href="#">NASAâs Webb Delivers Deepest Infrared Image of Universe Yet</a>
<menu>
<li><button id="save">Save for later</button></li>
<li><button id="share">Share this news</button></li>
</menu>
</div>
.news {
background-color: bisque;
padding: 1em;
border: solid thin black;
}
menu {
list-style-type: none;
display: flex;
padding: 0;
margin-bottom: 0;
gap: 1em;
}
屿§
ãã®è¦ç´ ã«ã¯ã°ãã¼ãã«å±æ§ãããã¾ãã
使ç¨ä¸ã®æ³¨æ
<menu> è¦ç´ 㨠<ul> è¦ç´ ã¯ã¨ãã«é åºãªããªã¹ãã®é
ç®ã表ããã®ã§ãã主ãªéãã¯ã<ul> ã¯ä¸»ã«é
ç®ã®è¡¨ç¤ºãç®çã¨ããã®ã«å¯¾ãã <menu> è¦ç´ ã¯æä½ãè¡ãããã®å¯¾è©±åã®é
ç®ã®ããã®ãã®ã§ããé¢é£ãã <menuitem> è¦ç´ ã¯éæ¨å¥¨ã«ãªãã¾ããã
ã¡ã¢:
HTML 仿§æ¸ã®åæã®çã§ã¯ã<menu> è¦ç´ ã«ã¯ã³ã³ããã¹ãã¡ãã¥ã¼ã¨ãã¦ã®è¿½å ã®ç¨éãããã¾ããããã®æ©è½ã¯å»æ¢ãããã¨èãã¦ããã仿§æ¸ã«ã¯ããã¾ããã
ä¾
>ãã¼ã«ãã¼
ãã®ä¾ã§ã¯ã<menu> ãç·¨éã¢ããªã±ã¼ã·ã§ã³ã®ããã®ãã¼ã«ãã¼ãçæããããã«ä½¿ç¨ãã¦ãã¾ãã
HTML
<menu>
<li><button onclick="copy()">ã³ãã¼</button></li>
<li><button onclick="cut()">åãåã</button></li>
<li><button onclick="paste()">è²¼ãä»ã</button></li>
</menu>
ãªããæ©è½çã«ã¯æ¬¡ã®ãã®ã¨éãã¯ããã¾ããã
<ul>
<li><button onclick="copy()">ã³ãã¼</button></li>
<li><button onclick="cut()">åãåã</button></li>
<li><button onclick="paste()">è²¼ãä»ã</button></li>
</ul>
CSS
menu,
ul {
display: flex;
list-style: none;
padding: 0;
width: 400px;
}
li {
flex-grow: 1;
}
button {
width: 100%;
}
çµæ
æè¡çæ¦è¦
| ã³ã³ãã³ãã«ãã´ãªã¼ |
ããã¼ã³ã³ãã³ãããã®è¦ç´ ã®åã« 1 å以ä¸ã® |
|---|---|
| 許å¯ããã¦ããå 容 |
0 å以ä¸ã® |
| ã¿ã°ã®çç¥ | ãªããéå§ã¿ã°ã¨çµäºã¿ã°ã®ä¸¡æ¹ãå¿ é ã§ãã |
| 許å¯ããã¦ãã親è¦ç´ | ããã¼ã³ã³ãã³ããåãå ¥ãããã¹ã¦ã®è¦ç´ |
| æé»ã® ARIA ãã¼ã« |
list
|
| 許å¯ããã¦ãã ARIA ãã¼ã« |
directory, group,
listbox, menu, menubar,
none, presentation,
radiogroup, tablist,
toolbar or tree
|
| DOM ã¤ã³ã¿ã¼ãã§ã¤ã¹ | HTMLMenuElement |
仿§æ¸
| Specification |
|---|
| HTML> # the-menu-element> |