如何使用Tailwind CSS和Javascript创建一个响应式导航栏

DebugUsery
1,932 阅读6分钟

使用Tailwind CSS和Javascript创建一个响应式导航栏

什么是导航条？导航栏是一个位于网页最上方的工具。它被网站访问者用来引导浏览网站的不同部分。当一个网页很长时，导航条就会派上用场。它可以帮助用户轻松导航到网页的特定部分。因此，导航栏应该是简单和易于使用的。

简介

在Tailwind CSS框架中，你可以通过使用各种Tailwind CSS类，将样式直接添加到你的HTML文件中，从而轻松实现你的网站风格。这使得创建移动友好和桌面友好的设计都变得更加容易。网页的布局根据网站所处的屏幕大小进行转换。这种网站被称为 "响应式"。

在本教程中，我们将用Tailwind CSS和JavaScript创建一个响应式的导航栏。该导航栏将在小屏幕设备上变成一个汉堡包菜单。我们将使用JavaScript来创建汉堡包菜单的切换功能。

前提条件

  1. 安装最新版本的Tailwind CSS
  2. 对Tailwind CSS的了解
  3. 对JavaScript函数的了解

将Tailwind CSS添加到您的项目中

请访问这篇文章，了解Tailwind CSS框架的完整安装过程。

安装完Tailwind CSS后，我们将使用链接标签链接我们的Tailwind样式表，如图所示。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Navigation</title>
		<link rel="stylesheet" href="./css/tailwind.css" />
	</head>
</html>

我们就可以开始创建我们的导航栏了!

我们的HTML

在上面的片段中，我们给我们的页面一个标题，"导航"。

接下来，在<body> 标签中，我们添加一个<nav> 标签和类，如图所示。

<body>
	<!-- Navbar goes here -->
	<nav class="bg-white shadow-lg">
		<div class="max-w-6xl mx-auto px-4">
			<div class="flex justify-between">
				<div class="flex space-x-7">
					<!-- Website Logo -->
					<div>
						<a href="#" class="flex items-center py-4 px-2">
							<img src="logo.png" alt="Logo" class="h-8 w-8 mr-2" />
							<span class="font-semibold text-gray-500 text-lg"
								>Navigation</span
							>
						</a>
					</div>
					<!-- Primary Navbar items -->
					<div class="hidden md:flex items-center space-x-1">
						<a
							href=""
							class="py-4 px-2 text-green-500 border-b-4 border-green-500 font-semibold "
							>Home</a
						>
						<a
							href=""
							class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300"
							>Services</a
						>
						<a
							href=""
							class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300"
							>About</a
						>
						<a
							href=""
							class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300"
							>Contact Us</a
						>
					</div>
				</div>
			</div>
		</div>
	</nav>
</body>

在上面的代码段中，我们为我们的导航条添加了白色背景颜色和一个大的阴影，以使它稍微突出一些。

接下来，我们在第一个<div> 标签上添加以下类。

<div class="max-w-6xl mx-auto px-4"></div>

这是一个包含<div> ，我们所有的导航栏项目都将被放入其中。我们在标签中添加了以下类。

  • max-w-6xl 类将我们的导航栏的宽度限制为1152px。
  • mx-auto 类使导航栏居中。
  • px-4 类在导航栏内容的左侧和右侧添加了16px的填充。

接下来，我们向第二个<div> 标签添加以下类。

<div class="flex justify-between"></div>

这是另一个包含<div> ，使我们的导航栏项目并排躺着。我们向标签添加了以下类。

  • flex 类使子 标签垂直对齐。<div>

  • justify-between 类在子 标签之间创建一个空间。从我们的分部来看，在包含网站标志的第一个分部、包含主要导航条项目的分部和包含次要导航条项目的第二个分部之间将添加空间。<div>

接下来，我们将向第三个<div> 标签添加以下类。

<div class="flex space-x-7"></div>

这个标签包裹了两个<div> ，其中包含我们的网站标志和主要的导航条项目。我们将添加flex 和space-x-7 类，它们将使我们的标志和导航条项目垂直对齐，并在项目之间添加一些空间。

网站标识

在本教程中，我使用了一个基本的图片文件作为标志，并修改了它的高度和宽度，使其适合导航栏。下面是我们的代码。

<div>
	<!-- Website Logo -->
	<a href="#" class="flex items-center py-4 px-2">
		<img src="logo.png" alt="Logo" class="h-8 w-8 mr-2" />
		<span class="font-semibold text-gray-500 text-lg">Navigation</span>
	</a>
</div>

在上述代码中，我们使用了<a> 、<img> 和<span> 标签来创建我们的标识。

我们在<a> 标签中添加了以下类。

  • flex 类使图像和文本垂直对齐。
  • items-center 类将标志和文本在容器中居中。
  • py-4 类添加了16px的padding
  • px-2 class添加了8px的padding。

我们在<img> 标签中添加了以下类。

  • h-8 类将图像的高度限制为32px
  • w-8 class限制了图片的宽度为32px
  • mr-2 类在图像的右边缘增加8px的空间

我们给<span> 标签添加了以下类。

  • font-semibold 类使文本呈现半粗体。
  • text-gray-500 类使文本呈现灰色。
  • text-lg 类增加了文本的字体大小。

主要菜单项

这一部分包含菜单项，网站访问者将使用这些菜单项来浏览页面。下面是我们的代码。

<!-- Primary Navbar items -->
<div class="hidden md:flex items-center space-x-1">
	<a
		href=""
		class="py-4 px-2 text-green-500 border-b-4 border-green-500 font-semibold "
		>Home</a
	>
	<a
		href=""
		class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300"
		>Services</a
	>
	<a
		href=""
		class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300"
		>About</a
	>
	<a
		href=""
		class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300"
		>Contact Us</a
	>
</div>

我们在<div> 标签中使用了以下类。

  • hidden 类在小屏幕尺寸下查看时隐藏了导航栏项目。
  • md:flex 类将导航条项目并排排列。在中等屏幕的设备上，导航条项目将显示出来。

我们在<a> 标签上使用了以下类。

  • hover:text-green-500 类在链接上添加了一个悬停效果，使文本颜色变为绿色。
  • transition 类使悬停效果有一个延迟，以使其吸引人。
  • duration-300 类添加了一个300毫秒的过渡延迟。

二级菜单项

这一部分显示了注册和登录的按钮。

<!-- Secondary Navbar items -->
<div class="hidden md:flex items-center space-x-3 ">
	<a
		href=""
		class="py-2 px-2 font-medium text-gray-500 rounded hover:bg-green-500 hover:text-white transition duration-300"
		>Log In</a
	>
	<a
		href=""
		class="py-2 px-2 font-medium text-white bg-green-500 rounded hover:bg-green-400 transition duration-300"
		>Sign Up</a
	>
</div>

我们使用了以下的类。

  • rounded 类使按钮有一个圆形的外观。
  • hover:bg-green-500 类通过使背景颜色变为绿色，在链接上添加了一个悬停效果。

移动菜单按钮

导航栏在小屏幕设备上会变成一个汉堡包菜单，菜单项将处于垂直位置。我们将使用JavaScript来创建汉堡包菜单的切换功能。

下面是我们的代码。

<!-- Mobile menu button -->
<div class="md:hidden flex items-center">
	<button class="outline-none mobile-menu-button">
		<svg
			class="w-6 h-6 text-gray-500"
			x-show="!showMenu"
			fill="none"
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="2"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
		<path d="M4 6h16M4 12h16M4 18h16"></path>
		</svg>
	</button>
</div>

我们使用了一个SVG图标来制作汉堡包菜单按钮。我们用h-6 和w-6 类来修改它的高度和宽度。我们还用text-gray-500 类将其颜色改为灰色。

其他我们使用的类解释如下。

  • md:hidden 类在中等屏幕尺寸的情况下隐藏了移动菜单按钮。
  • flex 类将汉堡包菜单与导航栏中的其他项目并排排列。
  • outline-none 当按钮被点击时，类会移除轮廓的边框。

我们将我们的汉堡包菜单按钮命名为mobile-menu-button ，这样我们在编写JavaScript代码时就可以识别它。

移动菜单

我们将不得不创建新的菜单项，当移动菜单按钮被点击时将会出现。下面是我们的代码。

<!-- Mobile menu -->
<div class="hidden mobile-menu">
	<ul class="">
		<li class="active"><a href="index.html" class="block text-sm px-2 py-4 text-white bg-green-500 font-semibold">Home</a></li>
		<li><a href="#services" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">Services</a></li>
		<li><a href="#about" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">About</a></li>
		<li><a href="#contact" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">Contact Us</a></li>
	</ul>
</div>

我们使用了以下的类。

  • hidden 类隐藏了移动菜单项，只在点击移动菜单按钮时显示。
  • block 类将菜单项排列在垂直位置，像一个列表。

我们将我们的移动菜单命名为mobile-menu ，这样我们在编写JavaScript代码时就可以识别它。

切换功能

我们将使用JavaScript来为我们的移动菜单按钮添加切换功能，这样当我们点击按钮时，它就会隐藏或显示移动菜单项。

我们将使用<script> 标签将JavaScript代码直接添加到我们的HTML代码中，而不是创建一个JavaScript文件并将其链接到我们的HTML中。

我们抓取我们想要添加功能的HTML元素，如图所示。

// Grab HTML Elements
const btn = document.querySelector("button.mobile-menu-button");
const menu = document.querySelector(".mobile-menu");

然后我们添加事件监听器，如图所示。

// Add Event Listeners
btn.addEventListener("click", () => {
	menu.classList.toggle("hidden");
});

这将为移动菜单按钮添加切换功能，因此，当你点击该按钮时，移动菜单就会显示，当你再次点击时，它就会隐藏。

下面是完整的JavaScript代码。

<script>
	// Grab HTML Elements
	const btn = document.querySelector("button.mobile-menu-button");
	const menu = document.querySelector(".mobile-menu");

	// Add Event Listeners
	btn.addEventListener("click", () => {
	menu.classList.toggle("hidden");
	});
</script>

我们的全响应式导航栏完成了!

这是完整的代码。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>Navigation</title>
		<link rel="stylesheet" href="./css/tailwind.css">
	</head>
	<body>
		<!-- Navbar goes here -->
		<nav class="bg-white shadow-lg">
			<div class="max-w-6xl mx-auto px-4">
				<div class="flex justify-between">
					<div class="flex space-x-7">
						<div>
							<!-- Website Logo -->
							<a href="#" class="flex items-center py-4 px-2">
								<img src="logo.png" alt="Logo" class="h-8 w-8 mr-2">
								<span class="font-semibold text-gray-500 text-lg">Navigation</span>
							</a>
						</div>
						<!-- Primary Navbar items -->
						<div class="hidden md:flex items-center space-x-1">
							<a href="" class="py-4 px-2 text-green-500 border-b-4 border-green-500 font-semibold ">Home</a>
							<a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Services</a>
							<a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">About</a>
							<a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Contact Us</a>
						</div>
					</div>
					<!-- Secondary Navbar items -->
					<div class="hidden md:flex items-center space-x-3 ">
						<a href="" class="py-2 px-2 font-medium text-gray-500 rounded hover:bg-green-500 hover:text-white transition duration-300">Log In</a>
						<a href="" class="py-2 px-2 font-medium text-white bg-green-500 rounded hover:bg-green-400 transition duration-300">Sign Up</a>
					</div>
					<!-- Mobile menu button -->
					<div class="md:hidden flex items-center">
						<button class="outline-none mobile-menu-button">
						<svg class=" w-6 h-6 text-gray-500 hover:text-green-500 "
							x-show="!showMenu"
							fill="none"
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							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">
				<ul class="">
					<li class="active"><a href="index.html" class="block text-sm px-2 py-4 text-white bg-green-500 font-semibold">Home</a></li>
					<li><a href="#services" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">Services</a></li>
					<li><a href="#about" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">About</a></li>
					<li><a href="#contact" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">Contact Us</a></li>
				</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>
		<h1 class="text-green-500 text-2xl md:text-3xl lg:text-4xl font-bold p-4">Tailwind Navigation Toolbar</h1>
	</body>
</html>

当在不同的屏幕尺寸上观看时，导航栏将看起来是这样的。

a) 在大屏幕上

Large Screen View

b) 在中等屏幕上

Medium Screen View

c) 在小屏幕上

Small Screen View

总结

在这篇文章中，我们已经通过使用Tailwind CSS创建我们自己的响应式导航栏。我们还学习了如何使用JavaScript为我们的导航栏创建切换功能。导航栏是一个例子，你可以使用Tailwind CSS类创建许多东西。导航条是用户导航体验的一个重要工具。

avatar
文章
阅读
粉丝