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; 
} 

我已经添加了55像素的底部填充如上图所示，这导致按钮变大。如何将箭头移至底部而不会导致按钮展开？

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 {}。您正在计算哪个链接处于活动状态.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中的相应链接中，但是我认为你希望在整个网站中使用相同的标题代码。

希望这会有所帮助！