CSSは、アクティブナビゲーションバーは、私は小さな学校のプロジェクトのために（StackExchange UXへのクレジット）上記画像のように私のウェブサイトのための私のナビゲーションバーを設計したい

Question

矢印作ります。しかし、私はどのようにアクティブなリンクの矢印を作るか分からない。

マイヘッダー：これを達成するためにどのような方法があります

：

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

それは、このような小さなものになりますか？

EDIT：私のボタンはそうのように展開されているようだ

矢印に追加した後...上記のように、私は55×の下パディングを追加しました

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

ボタンが大きくなりました。ボタンを広げずに矢印だけを下に移動するにはどうしたらいいですか？

Answer 1

解決策は、StackExchange UXヘッダーをどの程度正確にミラーリングするかによって異なります。 StackExchange UXのに合わせて背景色を設定します

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

、に沿って：あなたは同じロゴを維持したいと仮定し、「質問する」ボタンを持ってしたくない、あなたは以下のようなものを使用することができますあなたのリンクの色を変えて。 StackExchange UXのようにヘッダーの高さを短く調整したい場合は、ロゴの高さを調整する必要があります。

EDIT：@Dandyが指摘したように

、矢印のために、あなたが必要とする：あなたが直面している

.myNav li a.active { 
    background: transparent url('youarehere.png') no-repeat center bottom; 
} 

追加のパディング誤差は、純粋なCSSを修正するために、残念ながらできません。問題は、ビジュアルボタン.myNav li {}ではなく、リンク自体に埋め込みを追加することです。.myNav li a {}どちらのリンクが.myNav li a.activeでアクティブであるかを試していますが、画像を追加するには問題ありませんが、残念ながらCSSは親セレクタにアクセスできません。つまり、純粋なCSSで正しい要素を操作することはできません。

StackExchange UXがこの問題を解決する方法はjQueryです。あなたはjQueryのへのアクセス権を持っていると仮定すると、何をしたいと思うことはある：

：

1）あなたのサイトの構造に応じて、（GET付き）URLからそれをつかんで、現在表示されているリンクワークアウト

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. 

：変数と一致して <li>テキストに基づいて計算ですか）

var page = page.substring(1); 

3：

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

2）最初の文字を取り除きます

4）三角形が代わりに.youarehere{}に追加されるようにコードを変更します。

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

あなたはJavaScriptやjQueryのへのアクセスを持っていない場合は、残念ながらあなたは大きなクリック可能領域と一緒に暮らすことのいずれかが必要です、またはその三角形を削除します。もちろん、生のHTMLの対応するリンクにクラスを追加するだけでも可能ですが、サイト全体で同じヘッダーコードを使用したいと考えています。

希望すると便利です。