Задать вопрос
@glasswalk
html

Выделение активного пункта меню другим цветом, таким же как при Hover?

Сделал навбар для сайта, но не учел очень важный пункт (выделение активного пункта меню другим цветом, таким же как при ховере)

Подскажите как это правильно сделать в моем случае?

Прим. на скриншоте

62ac94f447d95006086017.png

<!DOCTYPE html>
<html>
<body>
  <label class="main-label" id="btn-check" >
  <input type="checkbox" class="btn-check" id="btn-check" >
<nav class="bar">
  <div class="square"></div>
  <div class="navbar__menu">
      <div class="dbltab-a_1">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
        <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
      </svg><span>Мой кабинет</span>
    </div>
  </div>
    <div class="dbltab-a_2">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
      </svg><span>Провайдеры</span>
    </div>
  </div>
      <div class="dbltab-a_3">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
        <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
      </svg><span>Добавить провайдера</span>
    </div>   
  </div>  
      <div class="dbltab-a_4">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-journal-check" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
        <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
        <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
      </svg><span>Консультация</span>
    </div> 
  </div>          
      <div class="dbltab-a_5">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-pie-chart" viewBox="0 0 16 16">
        <path d="M7.5 1.018a7 7 0 0 0-4.79 11.566L7.5 7.793V1.018zm1 0V7.5h6.482A7.001 7.001 0 0 0 8.5 1.018zM14.982 8.5H8.207l-4.79 4.79A7 7 0 0 0 14.982 8.5zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z"/>
      </svg><span>Опросы</span>
    </div> 
  </div>      
      <div class="dbltab-a_6">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-percent" viewBox="0 0 16 16">
        <path d="M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0zM4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm7 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
      </svg><span>Скидки</span>
    </div>
    </div>
      <a href="#profile:edit">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-gear-wide" viewBox="0 0 16 16">
  <path d="M8.932.727c-.243-.97-1.62-.97-1.864 0l-.071.286a.96.96 0 0 1-1.622.434l-.205-.211c-.695-.719-1.888-.03-1.613.931l.08.284a.96.96 0 0 1-1.186 1.187l-.284-.081c-.96-.275-1.65.918-.931 1.613l.211.205a.96.96 0 0 1-.434 1.622l-.286.071c-.97.243-.97 1.62 0 1.864l.286.071a.96.96 0 0 1 .434 1.622l-.211.205c-.719.695-.03 1.888.931 1.613l.284-.08a.96.96 0 0 1 1.187 1.187l-.081.283c-.275.96.918 1.65 1.613.931l.205-.211a.96.96 0 0 1 1.622.434l.071.286c.243.97 1.62.97 1.864 0l.071-.286a.96.96 0 0 1 1.622-.434l.205.211c.695.719 1.888.03 1.613-.931l-.08-.284a.96.96 0 0 1 1.187-1.187l.283.081c.96.275 1.65-.918.931-1.613l-.211-.205a.96.96 0 0 1 .434-1.622l.286-.071c.97-.243.97-1.62 0-1.864l-.286-.071a.96.96 0 0 1-.434-1.622l.211-.205c.719-.695.03-1.888-.931-1.613l-.284.08a.96.96 0 0 1-1.187-1.186l.081-.284c.275-.96-.918-1.65-1.613-.931l-.205.211a.96.96 0 0 1-1.622-.434L8.932.727zM8 12.997a4.998 4.998 0 1 1 0-9.995 4.998 4.998 0 0 1 0 9.996z"/>
</svg><span>Настройки</span>
    </div>
      <a href="#logout">
      <div class="navbar__link"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
  <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
</svg><span>Выход</span>
    </div>
        </nav>

</body>
</html>


svg{
color: #6a778e;
transition: 250ms ease all;
}
svg:hover{
color: #0b0c0f;
transform: scale(1.3);
transition: 250ms ease all;
}


#allrecords ul {
    padding-left: 0px;
}



.bar {
    position: fixed;
    top: 0rem;
    left: 0rem;
    background: #fff;
    border-radius: 0px;
    padding: 1rem 0;
    box-shadow: 0 0 40px rgb(0 0 0 / 3%);
    width: 66px;
    bottom: 0rem;
}
.navbar__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    width: 100%;
    color: #6a778e;
    transition: 250ms ease all;
    cursor: pointer;
}


.navbar__link span {
  position: absolute;
  left: 100%;
  transform: translate(-3rem);
  margin-left: 1rem;
  opacity: 0;
  pointer-events: none;
  color: #ffffff;
  background: #2d43477a;
  padding: 10px;
  transition: 250ms ease all;
  border-radius: 6px;
  cursor: pointer;
}
.navbar__link :hover {
  cursor: pointer;
}
.navbar:not(:hover) .navbar__link:focus span, .navbar__link:hover span {
  opacity: 1;
  transform: translate(0);
}
.navbar__menu {
  position: relative;
}
.navbar__item:last-child:before {
  content: "";
  position: absolute;
  opacity: 0;
  z-index: -1;
  top: 0;
  left: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(90deg, rgba(0,148,112,1) 0%, rgba(0,186,198,1) 100%);
  border-radius: 30px;
  transition: 250ms cubic-bezier(1, 0.2, 0.1, 1.2) all;
}

.btn-check{
    display: none;
  }




@media (max-width: 700px) {

  .btn-check{
    display: none;
  }
  

  .main-label{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMiIgeT0iNSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIiIHJ4PSIxIiBmaWxsPSIjMzAzODQ0Ii8+CjxyZWN0IHg9IjIiIHk9IjExIiB3aWR0aD0iMjAiIGhlaWdodD0iMiIgcng9IjEiIGZpbGw9IiMzMDM4NDQiLz4KPHJlY3QgeD0iMiIgeT0iMTciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyIiByeD0iMSIgZmlsbD0iIzMwMzg0NCIvPgo8L3N2Zz4K) ;
    background-color: rgba(0, 0, 0, 0.055);
    width: 40px;
    height: 40px;
    margin-right: 5px;
    margin-top: 5px;
    position: fixed;
    right: 0;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 30px;
    transition: 250ms;

  }
 
  .btn-check:checked ~ .bar{
  left: 0px;
  transition: 250ms;
}
  


.bar {
  position: fixed;
  top: 0rem;
    left: -7rem;
    background: #fff;
    border-radius: 0;
    padding: 1rem 0;
    box-shadow: 0 0 40px rgb(0 0 0 / 12%);
    height: 100%;
    transition: 250ms;
}}
 
@media (min-width: 1572px) {
  .bar { 
    top: 1rem;
    bottom: 1rem;
    border-radius: 12px;
    left: 8rem;
  height: calc(100vh - 4rem);
  transition: 300ms;
  width: 85px;
  }
}


@media (min-width: 1800px) {
  .bar { 
    top: 1rem;
    bottom: 1rem;
    border-radius: 12px;
    left: 18rem;
    transition: 300ms;
    width: 85px;
  }
}
  • Вопрос задан
  • 52 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 2
beliyadm
@beliyadm
because open source matters
Нужно правила вводить, не публиковать миллионные листинги кода
Даже у нас в 2006 году писали Джумлу такого не было, ну пару строк, ну функция (выкинул лишнее и спрашиваешь)

Но - Каждые 9 месяцев они возрождаются, они приходят. Ходить нельзя, они монстры
Ответ написан
Комментировать
Комментировать
@Angelina207
на тот значок, который должен быть выделен, добавьте класс типа is-active и нужные стили для этого
класса. Если это должно быть интерактивным, то без JS не обойтись
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Спарсить ссылки на все товары конкретного продавца в озон
18 апр. 2024, в 20:13
2000 руб./за проект
Устранить проблемы с парсерами и отображением новостей
18 апр. 2024, в 20:08
7000 руб./за проект
Ещё заказы