【问题标题】:Wordpress navigation style like Android Market WEBSITE类似 Android Market WEBSITE 的 Wordpress 导航风格
【发布时间】:2012-02-14 16:48:37
【问题描述】:
我对 wordpress、html、css 和 javascript 还是很陌生,如果可能的话,我很想得到你的帮助:
我正在尝试让我的网站的 wp_nav_menu 类似于来自 https://market.android.com/books 的 tabs。标签是分层的,在悬停时更改颜色,并在不离开页面的情况下加载标签的内容(我不需要这个功能)。
任何帮助将不胜感激。
【问题讨论】:
标签:
android
wordpress
navigation
google-play
【解决方案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。