1 使用TailwindCSS创建粘性导航栏

本文将介绍如何使用TailwindCSS创建如下导航栏

TailwindCSS – 使用TailwindCSS创建粘性导航栏-StubbornHuang Blog

1.1 创建一个基础的导航

首先使用TailwindCSS创建一个简单的导航栏，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
    <title>Sticky NavBar using Tailwind CSS</title>
</head>
<body class="bg-gray-100">
    <header class="bg-white">
        <nav class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <a href="#" class="text-2xl font-bold text-gray-800">MyWebsite</a>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-800">Home</a>
                    <a href="#" class="text-gray-800">About</a>
                    <a href="#" class="text-gray-800">Services</a>
                    <a href="#" class="text-gray-800">Contact</a>
                </div>
            </div>
        </nav>
    </header>
    <!-- Add your page content here -->
</body>
</html>

以上代码创建一个带有container、log和菜单链接的基本导航栏。

1.2 使导航栏固定在顶部

在上述基础导航栏代码的基础上，为了使导航栏具有粘性，我们需要将fixed、top-0、w-full添加到header元素中，通过上述的设置将会把导航栏固定在顶部并且占据整个屏幕。

<header class="bg-white fixed top-0 w-full">

现在如果再去滑动页面，导航栏会黏在顶部不会消失。

1.3 添加阴影

导航栏和页面内容之间还不是很明显，我们可以为导航栏创建阴影使导航栏和页面内容之间分隔更加明显

<header class="bg-white fixed top-0 w-full shadow-md">

1.4 菜单项添加悬停效果

为导航的菜单项添加悬停效果，鼠标悬停在菜单项上修改文本颜色

<a href="#" class="text-gray-800 hover:text-blue-600">Home</a>

1.5 添加搜索栏

可以集成搜索栏来增加导航栏，通过使用border-、rounded-和foucus:设置搜索栏的输入字段和按钮样式

<div class="flex items-center space-x-2">
    <input type="search" placeholder="Search" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:border-blue-600">
    <button class="bg-blue-600 text-white px-4 py-2 rounded-md">Search</button>
</div>

2 完整代码

以下是完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
    <title>Sticky NavBar using Tailwind CSS</title>
</head>
<body class="bg-gray-100">
    <header class="bg-white fixed top-0 w-full shadow-md">
        <nav class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <a href="#" class="text-2xl font-bold text-gray-800">MyWebsite</a>
                <div class="hidden md:flex items-center space-x-4">
                    <a href="#" class="text-gray-800 hover:text-blue-600">Home</a>
                    <a href="#" class="text-gray-800 hover:text-blue-600">About</a>
                    <a href="#" class="text-gray-800 hover:text-blue-600">Services</a>
                    <a href="#" class="text-gray-800 hover:text-blue-600">Contact</a>
                    <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-md">Sign Up</a>
                </div>
                <div class="md:hidden flex items-center">
                    <button class="text-gray-800 focus:outline-none"> <!-- Add a hamburger menu icon here -->
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="mt-4">
                <div class="flex items-center space-x-2">
                    <input type="search" placeholder="Search" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:border-blue-600 w-full">
                    <button class="bg-blue-600 text-white px-4 py-2 rounded-md">Search</button>
                </div>
            </div>
        </nav>
    </header>
    <!-- Add your page content here -->
</body>
</html>

参考