Hamburger Menu

hamburger-menu.markdown

Hamburger Menu

A Pen by Constantin on CodePen.

License.

index.html

<main
      class="mx-auto max-w-4xl bg-gray-200 h-screen"
      x-data="{ 'isDialogOpen': false }"
      @keydown.escape="isDialogOpen = false"
>
  <nav class="p-4 bg-indigo-700 text-indigo-100">
    <div>Hamburger Menu</div>
    <div class="text-xs text-indigo-400 font-thin">Alpine.js + TailwindCSS</div>
  </nav>

  <section class="flex flex-wrap p-4">
    <table class="w-full">
      <thead>
        <tr class="border-b">
          <th class="p-2 text-left">Name</th>
          <th class="p-2 text-left">Email</th>
          <th class="p-2 text-right"></th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-yellow-100">
          <td class="p-2 text-left flex flex-col">
            John Bob
          </td>
          <td class="p-2 text-left">
            [email protected]
          </td>
          <td class="text-right" x-data="{ 'isHamburgerOpen': false }">
            <button
              type="button"
              title="Open the actions menu"
              class="font-mono text-2xl px-2"
              @click="isHamburgerOpen = true"
              :class="{ 'bg-gray-100': isHamburgerOpen }"
            >
              &ctdot;
            </button>

            <ul
                x-show="isHamburgerOpen"
                x-cloak
                @click.away="isHamburgerOpen = false"
                class="absolute border bg-white shadow-md text-left -mt-10 -ml-12"
            >
              <li class="p-2 hover:bg-gray-200">✏ Edit</li>
              <li class="p-2 hover:bg-gray-200">❌ Delete</li>
              <li class="p-2 hover:bg-gray-200">🦄 Other action</li>
            </ul>
          </td>
        </tr>
        <tr class="hover:bg-yellow-100">
          <td class="p-2 text-left flex flex-col">
            Joan Bab
          </td>
          <td class="p-2 text-left">
            [email protected]
          </td>
          <td class="text-right" x-data="{ 'isHamburgerOpen': false }">
            <button
              type="button"
              title="Open the actions menu"
              class="font-mono text-2xl px-2"
              @click="isHamburgerOpen = true"
              :class="{ 'bg-gray-100': isHamburgerOpen }"
            >
              &ctdot;
            </button>

            <ul
                x-show="isHamburgerOpen"
                x-cloak
                @click.away="isHamburgerOpen = false"
                class="absolute border bg-white shadow-md text-left -mt-10 -ml-12"
            >
              <li class="p-2 hover:bg-gray-200">✏ Edit</li>
              <li class="p-2 hover:bg-gray-200">❌ Delete</li>
              <li class="p-2 hover:bg-gray-200">🦄 Other action</li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</main>

script.js

/* what js? */

scripts

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js"></script>

style.css

/* CSS handled by Tailwind 🚀 */

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css" rel="stylesheet" />