<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ìâ©.
HTML <menu> ììë <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()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</menu>
ì´ë 기ë¥ì ì¼ë¡ ë¤ìê³¼ ë¤ë¥´ì§ ììµëë¤.
<ul>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</ul>
CSS
menu,
ul {
display: flex;
list-style: none;
padding: 0;
width: 400px;
}
li {
flex-grow: 1;
}
button {
width: 100%;
}
ê²°ê³¼
기ì ìì½
| ì½í ì¸ ì¹´í ê³ ë¦¬ |
íë¡ì° ì½í
ì¸ . ììì ììì¼ë¡ ì ì´ë í ê° ì´ìì |
|---|---|
| ê°ë¥í ì½í ì¸ |
|
| íê·¸ ìëµ | ë¶ê°ë¥, ììê³¼ ëì í그를 ì¶ê°íë ê²ì íìì ëë¤. |
| ê°ë¥í ë¶ëª¨ ìì | íë¡ì° ì½í ì¸ ë¥¼ íì©íë 모ë ìì. |
| ììì ARIA ìí |
list
|
| ê°ë¥í ARIA ìí |
directory, group,
listbox, menu, menubar,
none, presentation,
radiogroup, tablist,
toolbar or tree
|
| DOM ì¸í°íì´ì¤ | HTMLMenuElement |
ëª ì¸
| Specification |
|---|
| HTML > # the-menu-element > |