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;
}正如上面所示，我添加了一个55 to的底部填充，这使得按钮更大。如何只将箭头移到底部，而不会导致按钮展开？
回答 1
Stack Overflow用户
发布于 2016-08-15 05:09:08
解决方案取决于您希望镜像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一样，您需要调整徽标的高度。
编辑：
正如“丹迪”指出的那样，对于箭头，你需要：
.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'); // jQuery2)划出第一个字符：
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中的相应链接中，但我假设您希望在整个站点中使用相同的头代码。
希望这能有所帮助！
https://stackoverflow.com/questions/38949484
复制相似问题
腾讯云开发者
