WordPress 导航风格类似于 Android Market 网站
我对 wordpress、html、css 和 javascript 很陌生，如果可能的话，希望得到您的帮助：
我正在尝试让我的网站的 wp_nav_menu 类似于 标签 来自 https://market.android.com/books。选项卡是分层的，悬停时更改颜色，并且无需离开页面即可加载选项卡的内容（我不需要此功能）。
任何帮助将不胜感激。
I'm pretty new to wordpress, html, css, and javascript and would love your help if possible:
I'm trying to get the wp_nav_menu for my site to resemble the tabs from https://market.android.com/books. The tabs are layered, change color on hover, and load the contents of the tab without navigating away from the page (I DO NOT NEED THIS FUNCTION).
Any help would be much appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您最好下载 Firebug 或使用 Chrome 开发人员工具来检查页面的 CSS 和标记。这是准确了解某人如何获得特定效果的最佳方法。
话虽如此，这里有一些事情在起作用。
选项卡的实际形状是通过一个巧妙的技巧创建的，该技巧使用边框来创建形状。在这种情况下，选项卡的标记只是一个无序列表，其中包含选项卡文本的跨度。使用
border-bottom和border-right创建选项卡的形状：然后为选项卡赋予负的右边距，使它们彼此重叠：
最后，除了所选选项卡之外的所有选项卡的不透明度都被指定为 0.35，这会导致您看到的透明度：
编辑：哇，我完全忽略了您正在使用 WordPress 的事实。我不熟悉 WP，但假设导航可以作为包含文本的跨度的无序列表输出，你应该没问题。这是一种非常标准的导航方式，因此您真正需要的只是 CSS。
You would do well to download Firebug or use Chrome developer tools to inspect the CSS and markup of the page. It's the best way to find out exactly how someone is getting a specific effect.
That being said, there are a couple things in play here.
The actual shape of the tabs is being created with a neat trick that uses borders to create shapes. In this case, the markup for the tabs is just an unordered list with spans for the tab text. Using
border-bottomandborder-right, the shape of the tabs is created:The tabs are then given a negative right margin to cause them to overlap with each other:
Finally, all tabs except for the selected tab are given an opacity of 0.35, which causes the transparency you see:
EDIT: Wow, I somehow completely overlooked the fact that you are using WordPress. I'm not familiar with WP, but assuming that the nav can be output as an unordered list with spans containing the text, you should be just fine. This is a pretty standard way to do navigation, so all you really need is the CSS.