菜单
使用菜单组件创建水平或垂直链接列表。
基础知识
菜单是一个类为 .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 不会在您渲染的电子邮件中显示 `[undefined]`。
- Office 365 和 Outlook.com 要求 href 属性中包含有效的 URL，或者您可以使用 # 占位符。
- Office 365 和 Outlook.com 要求 href 属性中包含有效的 URL，或者您可以使用 # 占位符。
垂直菜单
默认情况下，菜单水平对齐。要切换到垂直菜单，请将类 .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 |
这是菜单项链接的颜色。 |
