본문 바로가기
카테고리 없음

To create a drawer in the footer using Tailwind CSS

designer.jlb 2024. 10. 16. 01:32

To create a drawer in the footer using Tailwind CSS, you can make a sliding drawer that appears from the bottom of the screen when a button is clicked. Here's how you can create a footer drawer that slides up:

HTML & Tailwind CSS Example for Footer Drawer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Footer Drawer with Tailwind CSS</title>
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.0.6/dist/cdn.min.js" defer></script>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">

  <!-- Main Content -->
  <div class="p-4">
    <h1 class="text-2xl mb-4">Main Content</h1>
    <p>This is the main content area. Click the button below to open the footer drawer.</p>
    <button @click="open = true" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
      Open Footer Drawer
    </button>
  </div>

  <!-- Footer Drawer -->
  <div x-data="{ open: false }">
    <!-- Backdrop -->
    <div 
      x-show="open" 
      class="fixed inset-0 bg-black bg-opacity-50 z-40"
      @click="open = false"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="transition ease-in duration-300"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
    ></div>

    <!-- Drawer Content -->
    <div
      class="fixed bottom-0 left-0 w-full bg-white z-50 transform translate-y-full transition-transform"
      :class="{ 'translate-y-0': open, 'translate-y-full': !open }"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="translate-y-full"
      x-transition:enter-end="translate-y-0"
      x-transition:leave="transition ease-in duration-300"
      x-transition:leave-start="translate-y-0"
      x-transition:leave-end="translate-y-full"
    >
      <!-- Drawer Header -->
      <div class="p-4 bg-gray-800 text-white flex justify-between">
        <h2 class="text-lg">Footer Drawer</h2>
        <button @click="open = false" class="text-white">Close</button>
      </div>

      <!-- Drawer Body -->
      <div class="p-4">
        <p>This is the footer drawer content. You can put any information or links here.</p>
        <ul>
          <li class="py-2"><a href="#" class="text-blue-500">Link 1</a></li>
          <li class="py-2"><a href="#" class="text-blue-500">Link 2</a></li>
          <li class="py-2"><a href="#" class="text-blue-500">Link 3</a></li>
        </ul>
      </div>
    </div>
  </div>

</body>
</html>

Explanation:

  1. Drawer Positioning:

    • The drawer is positioned at the bottom of the screen using the classes fixed bottom-0 left-0 w-full, which makes it span the full width and stick to the bottom of the viewport.
    • By default, it is hidden by using the class translate-y-full, which pushes it completely off the screen vertically. When the drawer is opened, translate-y-0 is applied to bring it into view.

  2. Backdrop:

    • When the drawer is open, a semi-transparent backdrop (bg-black bg-opacity-50) appears, allowing users to click outside the drawer to close it. The backdrop is hidden or shown using the x-show directive in Alpine.js.

  3. Transitions:

    • Smooth sliding animations are handled using Tailwind's transition-transform utility. The drawer slides up and down with ease-in and ease-out transitions for a smooth user experience.

  4. Alpine.js Interaction:

    • The x-data="{ open: false }" initializes the state variable open to control the drawer’s visibility. When the "Open Footer Drawer" button is clicked, the open variable is set to true, and the drawer slides up into view.
    • Clicking the close button or the backdrop sets open to false, hiding the drawer again.

Customization Options:

  • Drawer Height: Adjust the height of the drawer by modifying the height class (h-64, h-72, etc.) or setting a custom height in the drawer content <div>.
  • Position: If you want a smaller drawer or need the drawer to cover less of the screen, adjust the height accordingly.
  • Content: You can add more content like forms, additional navigation, or social media links to the footer drawer.

This setup provides a clean and responsive footer drawer using Tailwind CSS and Alpine.js, with smooth transitions and simple interactivity.

티스토리툴바