始终在带有 flexbox 的按钮下方直接显示下拉菜单

Posted 2023-03-07

【中文标题】始终在带有 flexbox 的按钮下方直接显示下拉菜单

【英文标题】：Always show dropdown directly below button with flexbox

【发布时间】：2021-10-23 18:15:40

【问题描述】：

我使用 Tailwind 创建了以下响应式导航栏，但下拉按钮（“Folgen”）出现问题，该按钮始终在 x 轴上的其他位置显示内容，而不是按钮（取决于窗口宽度）。 如何确保下拉菜单始终保持在浏览器窗口内（窗口外没有溢出）并根据浏览器宽度保持靠近按钮？

<nav class="bg-blue-800 shadow-lg sticky top-0 z-50 h-[3.75rem]">
  <div class="max-w-6xl mx-auto px-4 h-[3.75rem]">
    <div class="flex justify-between h-[3.75rem]">
      <div class="flex space-x-7">
        <div>
          <!-- Website Logo -->
          <a class="flex items-center py-4 px-2 text-white font-bold text-lg" href="<?= $site->url() ?>"><?= $site->title()->html() ?></a>
          </a>
        </div>
        <!-- Primary Navbar items -->
        <div class="hidden md:flex items-center space-x-1">
          <?php foreach ($site->children()->listed() as $item): ?>
            <a class="py-4 px-2 text-white font-semibold hover:text-white-500 hover:bg-blue-500 transition duration-300" <?php e($item->isOpen(), 'aria-current ') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
          <?php endforeach ?>
        </div>
      </div>
      <!-- This is a search component -->
      <ul class="flex items-center ml-auto space-x-1">   
      <div class="md:flex hidden items-center ml-auto bg-blue-800 space-x-1 pr-4">
        <form method="post" action="<?= page('search')->url() ?>">
          <div class="relative text-gray-600 focus-within:text-gray-800">
            <span class="absolute inset-y-0 left-0 flex items-center pl-2">
              <button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke- viewBox="0 0 24 24" class="w-6 h-6"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
              </button>
            </span>
            <input type="search" name="q" class="py-2 text-sm text-gray-900 bg-white rounded-md pl-10 focus:outline-none focus:bg-white focus:text-gray-900" placeholder="Suche..." value="<?php echo (!empty($query)) ? esc($query) : '' ?>" autocomplete="off">
          </div>
        </form>
      </div>
      <!-- Language selector -->
      <?php foreach($kirby->languages()->not($kirby->language()) as $language): ?>
        <?php if ($page->translation($language->code())->exists()): ?>
          <?= svg('assets/icons/OOjs_UI_icon_language-ltr-invert.svg') ?> 
        <li <?php e($kirby->language() == $language, ' class="active text-white"') ?>>
        <a href="<?= $page->url($language->code()) ?>" hreflang="<?php echo $language->code() ?>" class="text-white">
          <?= html($language->name()) ?>
        </a>
        </li>
        <?php endif ?>
      <?php endforeach ?>
      </ul>
      <!-- Social Navbar items -->
      <div class="group hidden md:flex">
        <button
          class="outline-none focus:outline-none px-3 py-1 bg-blue-800 text-white rounded-sm flex items-center min-w-32"
        >
          <span class="pr-1 font-semibold flex-1">Folgen</span>
          <span>
            <svg
              class="fill-current h-4 w-4 transform group-hover:-rotate-180
              transition duration-150 ease-in-out"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
            >
              <path
                d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
              />
            </svg>
          </span>
        </button>
        <ul
          class="bg-gray-200 inline-flex transform scale-0 group-hover:scale-100 absolute transition duration-150 ease-in-out origin-top top-full right-0 left-auto"
        >
          <li class="items-center inline-flex py-2"><?php snippet('social') ?></li>
        </ul>
      </div>
      <!-- Mobile menu button -->
      <div class="md:hidden flex ml-4 items-center">
        <button class="outline-none mobile-menu-button" aria-label="Navigation icon">
        <svg class=" w-7 h-7 text-white hover:text-blue-500 "
          x-show="!showMenu"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
      </div>
    </div>
  </div>
  <!-- mobile menu -->
  <div class="hidden mobile-menu text-center bg-blue-600">
    <ul class="inline-block">
      <?php foreach ($site->children()->listed() as $item): ?>
        <li><a class="block px-2 py-4 text-white hover:bg-blue-500 transition duration-300" <?php e($item->isOpen(), 'aria-current ') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a></li>
      <?php endforeach ?>
      <div class="inline-flex px-2 py-4">
        <form method="post" action="<?= page('search')->url() ?>">
          <div class="relative text-gray-600 focus-within:text-gray-800">
            <span class="absolute inset-y-0 left-0 flex items-center pl-2">
              <button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke- viewBox="0 0 24 24" class="w-6 h-6"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
              </button>
            </span>
            <input type="search" name="q" class="py-2 text-sm text-gray-900 bg-white rounded-md pl-10 focus:outline-none focus:bg-white focus:text-gray-900" placeholder="Suche..." value="<?php echo (!empty($query)) ? esc($query) : '' ?>">
          </div>
        </form>
      </div>
      <div class="inline-flex px-2 py-4 text-white filter invert"><?php snippet('social') ?></div>
    </ul>
  </div>
  <script>
    const btn = document.querySelector("button.mobile-menu-button");
    const menu = document.querySelector(".mobile-menu");

    btn.addEventListener("click", () => 
      menu.classList.toggle("hidden");
    );
  </script>
</nav>

您可以找到working example over here。

【参考方案1】：

您可以在包含按钮和下拉菜单的容器上添加relative 类。然后，您的下拉菜单（具有 right-0 类）将位于容器的右边缘，而不是像现在这样的浏览器窗口。工作示例here。