Question

我是wordpress，html，css和javascript的新手，如果可能的话，我会很乐意帮助您：

我正在尝试让我的网站的wp_nav_menu与tabs中的https://market.android.com/books相似。选项卡是分层的，在悬停时更改颜色，并加载选项卡的内容而不导航离开页面（我不需要这个功能）。

非常感谢任何帮助。

Answer 1

您最好下载Firebug或使用Chrome开发人员工具检查页面的CSS和标记。这是了解某人如何获得特定效果的最佳方式。

话虽如此，这里有几件事情在发挥作用。

正在创建标签的实际形状，并使用边框来创建shapes。在这种情况下，选项卡的标记只是一个无序列表，其中包含选项卡文本的跨度。使用border-bottom和border-right，可以创建标签的形状：

border-bottom: 24px solid #3D3D3D;
border-right: 24px solid transparent;

然后给标签赋予负右边距以使它们彼此重叠：

margin-right: -12px;

最后，除了所选标签之外的所有标签都会被赋予0.35的不透明度，这会导致您看到的透明度：

opacity: 0.35;

编辑：哇，我完全忽略了你使用WordPress的事实。我不熟悉WP，但假设导航可以作为包含文本的跨度的无序列表输出，你应该没问题。这是一种非常标准的导航方式，所以你真正需要的就是CSS。