CSS制作有效的导航栏箭头

Question

我想为我的网站设计我的导航栏，如上图（Credits to StackExchange UX），用于一个小型学校项目。但我不确定如何为活动链接制作箭头。

我的标题：

<header>
    <img src="logo.png" height="125px" width="250px" style="margin-left: 15%;" />
    <div class="myNav">
        <nav>
        <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="courses.html">Courses</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="login.html">Login</a></li>
        </ul>
        </nav>
    </div>        
</header>

它看起来像这样：

有没有办法实现这个目标？

编辑：

在添加箭头后，我的按钮似乎被扩展了......

.myNav li a {
    display: block;
    text-align:center;
    padding: 14px 16px 55px;
    text-decoration: none;
    font-family: arial;
    color: navy;
}

.myNav li a.active {
    background: transparent url('youarehere.png') no-repeat center bottom;
}

我添加了一个55px的底部填充，如上所示，这导致按钮更大。如何在不导致按钮扩展的情况下仅将箭头移至底部？

Answer 1

解决方案取决于您希望镜像StackExchange UX标头的精确程度。假设您想要保留相同的徽标，并且不想提出“提问”问题。按钮，您可以使用以下内容：

<style>
.myNav {
    background-color: #2363a0;
}
.myNav li {
    list-style-type: none;
}
.myNav li a {
    color: #ffffff;
    text-decoration: none;
}
</style>

这将设置您的背景颜色以匹配StackExchange UX，以及更改链接的颜色。如果要像StackExchange UX那样将标题的高度调整得更短，则需要调整徽标的高度。

编辑：

正如@Dandy指出的那样，对于箭头，你需要：

.myNav li a.active {
    background: transparent url('youarehere.png') no-repeat center bottom;
}

遗憾的是，您无法使用纯CSS纠正您遇到的额外填充错误。问题是您要向链接本身.myNav li a {}添加填充，而不是视觉按钮.myNav li {}。您正在研究哪个链接对.myNav li a.active有效，这对于添加图片很合适，但遗憾的是CSS无法访问父选择器。这意味着你永远不能用纯CSS操纵正确的元素。

StackExchange UX解决此问题的方法是使用jQuery。假设你有权访问jQuery，你想要做的是：

1）根据您网站的结构，通过从网址（使用GET）抓取来显示当前显示的链接：

var page = window.location.pathname; // JavaScript
var page = $(location).attr('pathname'); // jQuery

2）剥去第一个字符：

var page = page.substring(1);

3）根据与变量和<li>文本匹配的计算进行计算：

if (page.indexOf('courses') >=0 ) {
    $(".myNav ul li:nth-child(1)").addClass("youarehere");
}
else if (page.indexOf('about') >=0 ) {
   $(".myNav ul li:nth-child(2)").addClass("youarehere");
}
etc.

4）修改您的代码，以便将三角形添加到.youarehere{}代替：

.youarehere {
    padding: 14px 16px 55px;
    background: transparent url('youarehere.png') no-repeat center bottom;
}

如果您无法访问JavaScript或jQuery，那么很遗憾，您需要使用较大的可点击区域，或删除该三角形。当然，您可以随时将该类添加到原始HTML中的相应链接，但我假设您希望在整个站点中使用相同的标题代码。

希望这有帮助！