選單
使用選單元件建立連結的水平或垂直清單。
基礎
選單是具有 .menu 類別的 <table>，其中包含 <tr>。選單中的每個連結都是 <th class="menu-item">，其中包含 <a>。
在 Inky HTML 中，使用標籤 <menu> 建立選單，並使用標籤 <item> 建立項目。
HTML
<menu>
<item href="https://zurb.com">Item</item>
<item href="https://zurb.com">Item</item>
<item href="https://zurb.com">Item</item>
</menu><html>
<head></head>
<body>
<table class="menu">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>示範
- 為 `- ` 新增 `href` 屬性非常重要，以確保 Outlook.com 不會在已呈現的電子郵件中顯示 `[未定義]`。
- Office 365 和 Outlook.com 需要在 href 屬性中提供有效的網址，或可以使用 # 佔位符。
- Office 365 和 Outlook.com 需要在 href 屬性中提供有效的網址，或可以使用 # 佔位符。
垂直選單
選單預設會水平對齊。若要切換至垂直選單，請將類別 .vertical 新增至選單。
HTML
<menu class="vertical">
<item href="https://zurb.com">Item</item>
<item href="https://zurb.com">Item</item>
<item href="https://zurb.com">Item</item>
</menu><html>
<head></head>
<body>
<table class="menu vertical">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>示範
小斷點上的垂直選單
選單預設會水平對齊。若要在小斷點上切換至垂直選單，請將類別 .small-vertical 新增至選單。這很實用，因為支援媒體查詢的電子郵件客戶端會落入小斷點，例如 iPhone 和 Android 4.4。
HTML
<menu class="small-vertical">
<item href="https://zurb.com">Item</item>
<item href="https://zurb.com">Item</item>
<item href="https://zurb.com">Item</item>
</menu><html>
<head></head>
<body>
<table class="menu small-vertical">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>示範
Sass 參考
變數
此元件的預設樣式可以使用專案的 設定檔 中的這些 Sass 變數進行自訂。
| 名稱 | 類型 | 預設值 | 說明 |
|---|---|---|---|
$menu-item-padding |
長度 | 10px |
選單項目內的內距。 |
$menu-item-gutter |
長度 | 10px |
在具有 |
$menu-item-color |
顏色 | $primary-color |
這是選單項目連結的顏色。 |
