Задать вопрос
@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;
  }
}
  • Вопрос задан
  • 60 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 2
beliyadm
@beliyadm
because open source matters
Нужно правила вводить, не публиковать миллионные листинги кода
Даже у нас в 2006 году писали Джумлу такого не было, ну пару строк, ну функция (выкинул лишнее и спрашиваешь)

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Редизайн и доработка интернет магазина на wordPress
25 нояб. 2024, в 23:42
50000 руб./за проект
Разработка мобильного приложения с дополненной реальностью (AR)
25 нояб. 2024, в 23:32
200000 руб./за проект
Правка вёрстки Wordpress
25 нояб. 2024, в 23:17
1000 руб./за проект
Ещё заказы