TailwindCSS – 使用TailwindCSS创建粘性导航栏
1 使用TailwindCSS创建粘性导航栏
本文将介绍如何使用TailwindCSS创建如下导航栏
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>
参考
欢迎扫码关注我的微信公众号，及时获取文章更新
本文作者：StubbornHuang
版权声明：本文为站长原创文章，如果转载请注明原文链接！
原文标题：TailwindCSS – 使用TailwindCSS创建粘性导航栏
原文链接：https://www.stubbornhuang.com/2985/
发布于：2024年02月02日 16:42:44
修改于：2024年02月02日 16:45:13
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
文章末尾
评论
72