html Pine Hamburger导航标题示例

Posted 2021-05-11

<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td style="padding: 0 20px;">
      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tr>
          <!-- Logo column -->
          <td class="col pb-sm-2" width="200" style="padding: 0 10px;">
            <img src="http://placehold.it/160x160?text=LOGO" class="align-sm-center" alt="Logo" width="80" style="border-radius: 50%; max-width: 80px; width: 100%;">
          </td>
          <!-- Navigation column -->
          <td class="col" width="420" style="padding: 0 10px; vertical-align: middle;">
            <!-- Hamburger Nav -->
            <div>
              <!--[if !mso 9]><!-->
              <img class="toggle-trigger show-sm align-sm-center p-sm-mini" src="https://i.imgur.com/RIRjWm6.png" width="20" aria-hidden="true" style="display: none; max-height: 0; max-width: 20px; width: 100%;">
              <!--<![endif]-->
              <div class="toggle-content">
                <table align="right" class="nav nav-sm-vertical align-sm-center text-sm-center" cellpadding="0" cellspacing="0" role="presentation">
                  <tr>
                    <td class="nav-item" style="padding-right: 30px;">
                      <a href="http://example.com" style="color: #999999; text-decoration: none;">News</a>
                    </td>
                    <td class="nav-item" style="padding-right: 30px;">
                      <a href="http://example.com" style="color: #999999; text-decoration: none;">Services</a>
                    </td>
                    <td class="nav-item" style="padding-right: 30px;">
                      <a href="http://example.com" style="color: #999999; text-decoration: none;">Work</a>
                    </td>
                    <td class="nav-item">
                      <a href="http://example.com" style="color: #999999; text-decoration: none;">Store</a>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>