HTML - <menu> 標籤

HTML <menu> 標籤用於建立內容的選單列表。我們可以使用<li>標籤在選單項內建立列表項。

HTML <menu> 標籤在 HTML4 中已棄用，並在 HTML5 中重新引入。但是最好忽略此標籤，因為它處於實驗階段，並且許多瀏覽器都不支援。

語法

<menu>
  ...
  ...
<menu>

屬性

HTML menu 標籤支援全域性和事件HTML 屬性。也接受一些特定的屬性，如下所示。

屬性	值	描述
label	文字	指定可見標籤。
type	popup toolbar context	指定要顯示的選單型別。

屬性

值

描述

label

文字

指定可見標籤。

type

popup

toolbar

context

指定要顯示的選單型別。

HTML menu 標籤示例

下面的示例將說明 menu 標籤的使用方法、使用時機以及如何使用 menu 標籤建立選單列表。

使用 menu 標籤建立選單項

讓我們來看下面的例子，我們將使用 menu 標籤。

<!DOCTYPE html>
<html>

<head>
   <title>HTML menu Tag</title>
</head>

<body>
   <menu>
      <li>ol - Ordered list</li>
      <li>ul - Unordered list</li>
      <li>dir - Directory list</li>
      <li>menu - Menu list</li>
   </menu>
</body>

</html>

使用 CSS 樣式化選單項

在這個例子中，我們將使用內聯 CSS 來樣式化 menu 元素。

<!DOCTYPE html>
<html>

<head>
    <title>HTML menu Tag</title>
    <style>
        menu {
            display: flex;
            list-style: none;
            padding: 10px;
            width: 600px;
        }

        li {
            flex-grow: 1;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: lightgray;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <menu>
        <li><button onclick="html()">HTML</button></li>
        <li><button onclick="css()">CSS</button></li>
        <li><button onclick="js()">JS</button></li>
    </menu>
</body>

</html>

支援的瀏覽器

標籤
menu	是	是	是	是	是

html_tags_reference.htm

列印頁面