导航栏或导航栏或菜单栏是任何 Web 或移动应用程序中最重要的组件。用户只能通过此菜单从一页导航到另一页。它通常位于网站顶部以提供更好的 UX（用户体验）。
方法：方法是先创建一个导航栏，然后使用 before 和 hover 选择器在每个项目的下方设置一行动画。
HTML 代码：在本节中，我们使用 unordered-list(ul) 创建了一个简单的导航栏菜单。
Animated Navbar
GeeksforGeeks
Animated Navigation Bar Design
CSS 代码：在本节中，我们使用了一些 CSS 属性来制作有吸引力的动画导航栏。
- 第 1 步：首先，我们使用 flex 属性以水平方式对齐我们的列表。
- 第 2 步：然后删除所有文本装饰并提供所需的边距和填充。
- 第 3 步：然后我们使用 before 选择器在每个元素下方对齐一行，使其宽度保持为 0。
- 第 4 步：现在，在选择器之前使用悬停为线条提供宽度并在 x 轴上对其进行变换以获得所需的效果。
完整代码：在本节中，我们将结合以上两节来创建一个动画导航栏。
Animated Navbar
GeeksforGeeks
Animated Navigation Bar Design
输出： 