アクティブなメニュー項目に下線を付けるにはどうすればいいですか？

Question

私はHTMLとCSSには本当に新しいです。私は、あなたがフェードインしたメニュー項目の下にあるnavbarを持っています。 中間からのフェードアウト効果がありますが、どのようにアクティブなメニュー項目に同じスタイルで下線を付けることができますか？

私はTypo3/Fluidを使って私にHTMLコードを作成し、アクティブなクラスをアクティブなメニュー項目に割り当てます。あなたがこれを行うためにJavaScriptを使用する必要がhttps://jsfiddle.net/wr5w09r0/

CSS

div#top_nav{ 
    text-align: center; 
} 

div#top_nav li{ 
    display: inline; 
    padding: 15px; 
} 

div#top_nav a { 

display: inline-block; 
position: relative; 

} 

div#top_nav a:hover{ 
    color: orange; 
} 


div#top_nav a:before{ 

    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 2px; 
    bottom: -3px; 
    left: 0; 
    background-color: orange; 
    visibility: hidden; 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transition: all 0.15s ease-in-out 0s; 
    transition: all 0.15s ease-in-out 0s; 

} 

div#top_nav a:hover:before { 
    visibility: visible; 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
} 

.active { 
    color: orange; 
} 

Answer 1

を希望このが手伝う。私はこの単純な要素を追加しました。

div#top_nav a:hover:before , div#top_nav a.active:before

a { 
 
    text-decoration: none; 
 
} 
 

 
div#top_nav{ 
 
\t text-align: center; 
 
} 
 

 
div#top_nav li{ 
 
\t display: inline; 
 
\t padding: 15px; 
 
} 
 

 

 

 
div#top_nav a { 
 

 
display: inline-block; 
 
position: relative; 
 

 
} 
 

 
div#top_nav a:hover{ 
 
\t color: orange; 
 
} 
 

 

 
div#top_nav a:before{ 
 

 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 2px; 
 
    bottom: -3px; 
 
    left: 0; 
 
    background-color: orange; 
 
    visibility: hidden; 
 
    -webkit-transform: scaleX(0); 
 
    transform: scaleX(0); 
 
    -webkit-transition: all 0.15s ease-in-out 0s; 
 
    transition: all 0.15s ease-in-out 0s; 
 

 
} 
 

 
div#top_nav a:hover:before , div#top_nav a.active:before { 
 
    visibility: visible; 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
} 
 

 
.active { 
 
\t color: orange; 
 
}

<div id="top_nav"> 
 
<ul> 
 
<li class="mainMenu-itemLevel1"> 
 
<a href="index.php?id=2" class="active">seite1</a></li> 
 
<li class="mainMenu-itemLevel1"> 
 
<a href="index.php?id=3">seite2</a> 
 
</li><li class="mainMenu-itemLevel1"> 
 
<a href="index.php?id=4">seite3</a></li> 
 
<li class="mainMenu-itemLevel1"> 
 
<a href="index.php?id=6">seite4</a></li> 
 
<li class="mainMenu-itemLevel1"> 
 
<a href="index.php?id=7">Seite5 lang Hover</a></li> 
 
</ul> 
 

 

 
</div>

これはあなたを助けることを願っています。

Answer 2

：

これは、これまでにどのように見えるかです。

あなたのJavaScriptは、関連するメニュー項目にactiveのようなクラスを追加するので、CSSを使って適切にスタイルを設定することができます。

要素にactiveクラスを追加した後、あなたのオレンジ色のスタイルの使用を適用するには、この：

div#top_nav.active a{ 
    color: orange; 
} 

（注）以来、唯一のアクティブな項目、およびリンク上:hoverの省略を選択.activeの追加もはやホバーを気にしません。

あなたは以下の私の例のように異なる（アクティブ、およびホバー）セレクタに同じスタイルを適用するため、ここでは便利な, CSS演算子を見つけることがあります。

var items = document.getElementsByClassName('item'); 
 
var activeClassName = 'active'; 
 

 
function unselectItems() { 
 
    for (var i = 0; i < items.length; i++) { 
 
    items[i].classList.remove(activeClassName); 
 
    } 
 
} 
 

 
function selectItem(item) { 
 
    unselectItems(); 
 
    item.classList.add(activeClassName); 
 
} 
 

 
function onItemClick(event) { 
 
    selectItem(event.target); 
 
} 
 

 
for (var i = 0; i < items.length; i++) { 
 
    items[i].addEventListener('click', onItemClick); 
 
}

span { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
} 
 

 
span:hover, span.active { 
 
    color: white; 
 
    background-color: black; 
 
}

<nav> 
 
    <span class="item">Home</span> 
 
    <span class="item">About</span> 
 
    <span class="item">Contact</span> 
 
<nav>