4

我正在尝试生成如下菜单：

在此处输入图像描述

菜单中有几个项目，活动项目后面有一个箭头。菜单项是类似于以下代码的标签：

<div class="menuCenter">
     <div class="linksWrapper">
      <a href="#">Home</a>
      <a class="menuCenterLinkLeft" href="#">Plans & Pricing</a>
      <a class="menuCenterLinkLeft" href="#">Sign In</a>
      <a class="menuCenterLinkLeft active" href="#">Sign Up</a>
      <a class="menuCenterLinkLeft" href="#">Contact</a>
     </div>
</div>

我尝试了两个选项： 1- 使用 javascript 绝对定位箭头图像。调整页面大小时遇到​​问题。2- 使用 :after 伪元素，如下所示：

.linksWrapper a.active:after
{
    content: url("images/arrowImg.png");
    position: relative;
    left: -40px;
    top: 30px; 
}

这种方法的问题是箭头的水平对齐。它应该在链接的中心下方，我无法做到这一点。我可以使用 HTML5 或 CSS 3。

有什么帮助吗？

4

3 回答 3

9

试试这个：

.linksWrapper a.active:after {
    content: url("images/arrowImg.png");
    position: absolute;
    left: 50%;
    top: 30px;
    margin-left: - <width-of-your-image> / 2; /* negative number!*/
}

旁注：我避免{换行，因为它可能在 javascript 中产生令人讨厌的影响。

该技巧left:50%;与通过通过将其设置回半角来校正位置相结合margin-left。

见例子。

于 2012-04-30T22:28:25.080 回答
2

绝对定位方法应该有效，您需要将箭头放在另一个已position:relative定义的 div 内，以便绝对坐标相对于该父 div，而不是相对于 body 元素。

但是，我会改用这种方法：

使箭头成为实际 a.active 项目的背景图像的一部分 - 这样它就会居中background-position并且您不需要任何脚本！

于 2012-04-30T22:28:21.323 回答
-1

我很快就把这个放在一起了..

http://jsfiddle.net/8Sqwq/1/

因为我不太确定您的代码有多灵活，所以这是我能想到的最好的。

哪个 href 具有 .active 的类名将继承箭头

// 我更新了小提琴以显示它的实际效果。

于 2012-04-30T22:33:25.890 回答