Как подчеркнуть активный элемент меню?

Question

Я действительно новичок в HTML и CSS. У меня есть навигационная панель, которая подчеркивает пункт меню, который вы навешиваете с постепенным исчезновением, выпадающим эффектом из середины, , но как я могу сохранить активный элемент меню, подчеркнутый тем же стилем?

Я также использую Typo3/Fluid, который создает мне html-код и назначает активный элемент активному пункту меню.

Вот как это выглядит так далеко: 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, чтобы сделать это.

Ваш javascript добавит класс, например active, к соответствующему пункту меню, и вы сможете использовать свой CSS для его правильной настройки.

После добавления active класса к элементу, чтобы применить использование оранжевого стиля это:

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

Примечания добавления .active, который выбирает только активные элементы, а также пропуск :hover по ссылке, так как вы больше не заботятся о зависании.

Вы можете найти оператор , 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>