html - CSS使事件导航栏箭头

Question

我想为一个小型学校元素设计我的网站导航栏，如上图(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 header 的准确程度。假设您想要保留相同的 Logo ，并且不想使用“提问”按钮，您可以使用如下内容:

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

这将设置您的背景颜色以匹配 StackExchange 用户体验，同时更改链接的颜色。如果您想像 StackExchange UX 一样将 header 的高度调整得更短，则需要调整 Logo 的高度。

编辑:

正如@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) 根据您网站的结构，通过从 URL 中获取链接(使用 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) 修改代码，将三 Angular 形添加到 .youarehere{}相反:

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

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

希望这对您有所帮助!