博客

如何使用HTML、CSS和JavaScript使导航菜单中的活动标签弯曲？

导航菜单中的活动标签通常需要通过一些样式来强调当前所处的页面或目录，并且为了提高用户体验，有时候我们会为当前所处页面或目录的标签添加一些动效，这就需要使用到HTML、CSS和JavaScript。

以下是一些可能用到的示例：

使用CSS伪类和transform属性实现活动标签弯曲

1. HTML结构

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Product</a></li>
    <li><a href="#" class="active">Contact</a></li>
  </ul>
</nav>

其中，active类用于标记当前所处页面或目录。

1. CSS样式

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

nav li {
  margin: 0 10px;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 5px 10px;
}

nav a.active::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #333;
  border-radius: 20px 20px 0 0;
  transform: skew(-20deg);
  z-index: -1;
}

代码解析：

• 使用flex布局控制导航菜单的排列；
• 为active类下的链接添加伪元素，并使用transform属性对其实现弯曲效果；
• 通过z-index属性将伪元素置于底层，使其显示在链接之下。

使用JavaScript将活动标签弯曲效果封装成组件

在React应用中，我们可以将上述样式封装成组件，并动态地为组件添加类名实现弯曲效果。

以下是一个可能的实现：

1. React组件

import React from "react";
import { NavLink } from "react-router-dom";
import "./NavMenu.css";

const NavMenu = ({
  items,
  activePath,
}: {
  items: { to: string; label: string }[];
  activePath: string;
}) => {
  return (
    <nav>
      <ul>
        {items.map((item) => (
          <li key={item.to}>
            <NavLink
              className={item.to === activePath ? "active" : ""}
              to={item.to}
            >
              {item.label}
            </NavLink>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default NavMenu;

1. CSS样式

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 5px 10px;
}

nav a.active::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #333;
  border-radius: 20px 20px 0 0;
  transform: skew(-20deg);
  z-index: -1;
}

代码解析：

• 使用react-router-dom库中的NavLink组件渲染导航链接，动态设置类名来实现弯曲效果。
• 样式部分与前面示例类似。

以上两个示例提供了使用HTML、CSS和JavaScript实现导航菜单中活动标签弯曲效果的方案，开发者可以根据不同的场景选择合适的实现方式，并将其应用到自己的项目中。