Tailwind Header 实现 002

<!-- 导航栏开始。使用Tailwind CSS，支持亮暗模式和响应式设计。 -->
<nav class="bg-white border-gray-200 dark:border-gray-600 dark:bg-gray-900">
    <!-- 主容器。使用Flexbox布局以适应不同屏幕尺寸。 -->
    <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4">

        <!-- Logo和品牌名称链接。 -->
        <a href="https://flowbite.com" class="flex items-center space-x-3 rtl:space-x-reverse">
            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
            <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
        </a>

        <!-- 移动设备上的菜单按钮。用于在小屏幕上显示菜单。 -->
        <button data-collapse-toggle="mega-menu-full-image" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mega-menu-full-image" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
            </svg>
        </button>

        <!-- 主菜单区域。默认在小屏幕上隐藏，桌面设备上显示。 -->
        <div id="mega-menu-full-image" class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1">
            <ul class="flex flex-col mt-4 font-medium md:flex-row md:mt-0 md:space-x-8 rtl:space-x-reverse">
                <!-- 主页链接 -->
                <li>
                    <a href="#" class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700" aria-current="page">Home</a>
                </li>

                <!-- 带下拉菜单的公司链接 -->
                <li>
                    <button id="mega-menu-full-cta-image-button" data-collapse-toggle="mega-menu-full-image-dropdown" class="flex items-center justify-between w-full py-2 px-3 font-medium text-gray-900 border-b border-gray-100 md:w-auto hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700">
                        Company <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                        </svg>
                    </button>
                </li>

                <!-- 其他导航链接 -->
                <li>
                    <a href="#" class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700">Marketplace</a>
                </li>
                <li>
                    <a href="#" class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700">Resources</a>
                </li>
                <li>
                    <a href="#" class="block py-2 px-3 text-gray-900 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 公司下拉菜单，包含图像和链接 -->
    <div id="mega-menu-full-image-dropdown" class="mt-1 bg-white border-gray-200 shadow-xs border-y dark:bg-gray-800 dark:border-gray-600">
        <div class="grid max-w-screen-xl px-4 py-5 mx-auto text-sm text-gray-500 dark:text-gray-400 md:grid-cols-3 md:px-6">
            <!-- 左侧菜单项，在中等屏幕以上显示 -->
            <ul class="hidden mb-4 space-y-4 md:mb-0 md:block" aria-labelledby="mega-menu-full-image-button">
                <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-500">Online Stores</a></li>
                <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-500">Segmentation</a></li>
                <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-500">Marketing CRM</a></li>
                <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-500">Online Stores</a></li>
            </ul>

            <!-- 中间菜单项 -->
            <ul class="mb-4 space-y-4 md:mb-0">
                <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-500">Our Blog</a></li>
                <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-500">Terms & Conditions</a></li>
                <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-500">License</a></li>
                <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-500">Resources</a></li>
            </ul>

            <!-- 右侧 - 带图像的CTA区域 -->
            <a href="#" class="p-8 bg-local bg-gray-500 bg-center bg-no-repeat bg-cover rounded-lg bg-blend-multiply hover:bg-blend-soft-light dark:hover:bg-blend-darken" style="background-image: url(/docs/images/dashboard-overview.png)">
                <p class="max-w-xl mb-5 font-extrabold leading-tight tracking-tight text-white">Preview the new Flowbite dashboard navigation.</p>
                <button type="button" class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium text-center text-white border border-white rounded-lg hover:bg-white hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-700">
                    Get started
                    <svg class="w-3 h-3 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                </button>
            </a>
        </div>
    </div>
</nav>

<!-- 导航栏开始。使用Tailwind CSS，支持亮暗模式。 -->
<nav class="bg-white border-gray-200 dark:bg-gray-900">
  <!-- 主容器。使用Flexbox布局，确保内容在不同屏幕尺寸下对齐。 -->
  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">

    <!-- Logo和品牌名称链接 -->
    <a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
      <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
    </a>

    <!-- 
      右侧导航和语言选择区域。使用 `md:order-2` 来确保在中等及以上屏幕尺寸下，这些元素排在第二位，
      这样主导航菜单可以在语言选择之前显示。
    -->
    <div class="flex items-center md:order-2 space-x-1 md:space-x-0 rtl:space-x-reverse">

      <!-- 语言选择按钮 -->
      <button type="button" data-dropdown-toggle="language-dropdown-menu" class="inline-flex items-center font-medium justify-center px-4 py-2 text-sm text-gray-900 dark:text-white rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white">
        <svg class="w-5 h-5 rounded-full me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" ...>
          <!-- 美国国旗图标 -->
        </svg>
        English (US)
      </button>

      <!-- 语言选择下拉菜单 -->
      <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm dark:bg-gray-700" id="language-dropdown-menu">
        <ul class="py-2 font-medium" role="none">
          <!-- 语言选项 -->
          <li>
            <a href="#" class="...">
              <svg class="..."><!-- 美国国旗 --></svg>
              English (US)
            </a>
          </li>
          <li>
            <a href="#" class="...">
              <svg class="..."><!-- 德国国旗 --></svg>
              Deutsch
            </a>
          </li>
          <li>
            <a href="#" class="...">
              <svg class="..."><!-- 意大利国旗 --></svg>
              Italiano
            </a>
          </li>
          <li>
            <a href="#" class="...">
              <svg class="..."><!-- 中国国旗 --></svg>
              中文 (繁體)
            </a>
          </li>
        </ul>
      </div>

      <!-- 
        移动设备上的菜单按钮。使用 `md:hidden` 在中等及以上屏幕尺寸上隐藏这个按钮，
        因为主菜单会直接显示。
      -->
      <button data-collapse-toggle="navbar-language" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-language" aria-expanded="false">
        <span class="sr-only">Open main menu</span>
        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" ...>
          <!-- 汉堡菜单图标 -->
        </svg>
      </button>
    </div>

    <!-- 
      主导航菜单。使用 `md:order-1` 来确保在中等及以上屏幕尺寸下，这个菜单排在第一位，
      所以它会在语言选择按钮之前显示。使用 `hidden` 和 `md:flex` 确保菜单在小屏幕上隐藏，
      在中等及以上屏幕上显示。Flexbox 布局帮助保持占位，即使菜单在小屏幕上不显示。
    -->
    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-language">
      <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
        <!-- 导航链接 -->
        <li>
          <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 md:p-0 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
        </li>
        <li>
          <a href="#" class="...">Services</a>
        </li>
        <li>
          <a href="#" class="...">Pricing</a>
        </li>
        <li>
          <a href="#" class="...">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

发送评论 编辑评论

发送评论编辑评论