Toxa26
@Toxa26
Студент. Люблю верстать сайты.

Как сделать подсветку активного пункта меню?

Как сделать подсветку активного пункта меню, тоесть что бы либо при клике на пункт, либо при скроле на нужну страницу, в главном меню, активный пункт менялся?
<ul class="navbar-nav ml-auto">
     <li class="nav-item active"> 
          <a class="nav-link" href="#"><span>Главная</span></a> 
     </li>
     <li class="nav-item"> 
          <a class="nav-link" href="#team"><span>Пункт1</span></a> 
     </li>
     <li class="nav-item"> 
          <a class="nav-link" href="#"><span>Пункт2</span></a> 
     </li>
     <li class="nav-item"> 
          <a class="nav-link" href="#"><span>Пункт3</span></a> 
     </li>
     <li class="nav-item"> 
          <a class="nav-link" href="#"><span>Пункт4</span></a> 
     </li>
</ul>

.navbar {
    min-height: 200px;
    font-size: 16px;
    text-transform: uppercase;
}
.nav-item .nav-link {
    color: #fff !important;
}
.navbar-nav .nav-link span:hover {
    border-bottom: 1px solid #fff;
}
.navbar-nav .active > .nav-link span {
    font-size: 18px;
    line-height: 22px;
    font-weight: bold;
    border-bottom: 2px solid #fff;
    color: #fff !important;
}
  • Вопрос задан
  • 5882 просмотра
Пригласить эксперта
Ответы на вопрос 3
iNickolay
@iNickolay
Добавлять стиль active к активному элементу nav-item
Ответ написан
@danchiksux
Говнокодер
Если нужно что-бы если ты находишься на определённо странице и её пункт в меню подсвечивается то на css это не сделать.
Ответ написан
AndrewHaze
@AndrewHaze
Умею гуглить яндексом
Подключите JQuery и bootstrap.min.js, все должно работать "из коробки"
Пример для Bootstrap 3
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы