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中的相應鏈接中，但是我認爲你希望在整個網站中使用相同的標題代碼。

希望這會有所幫助！