html - CSS使事件导航栏箭头

我想为我的网站设计我的导航栏，就像上面的图片（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的底部填充，如上图所示，这导致按钮更大。如何只将箭头移到底部而不使按钮膨胀？

最佳答案

解决方案取决于您到底想多接近地镜像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 {}确定哪个链接处于活动状态，这对于添加图像很好，但不幸的是CSS没有访问父选择器的能力。这意味着您永远不能用纯CSS操作正确的元素。
StackExchange UX解决这个问题的方法是使用jQuery。假设您有权访问jQuery，那么您需要做的是：
1）根据网站的结构，通过从URL（带有GET）中获取当前显示的链接：

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

2）去掉第一个字符：

var page = page.substring(1);

3）根据变量和.myNav 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）修改代码，以便将三角形添加到.myNav li a.active中：

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

如果您不能访问JavaScript或jQuery，那么不幸的是，您需要使用更大的可点击区域，或者删除三角形。当然，您可以简单地将类添加到原始HTML中的相应链接，但我假设您希望在整个站点中使用相同的头代码。
希望这有帮助！

关于html - CSS使事件导航栏箭头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38949484/

stackexchange

html - CSS使事件导航栏箭头