Задать вопрос
@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 не обойтись
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Верстальщик HTML
MST
от 450 $
Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер
BYTIME
от 130 000 ₽
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать запись в файл на ubuntu
27 дек. 2024, в 03:33
1500 руб./за проект
Сделать анимацию и отрисовать иллюстрации
27 дек. 2024, в 02:41
50000 руб./за проект
Нарисовать арты
26 дек. 2024, в 23:03
500 руб./в час
Ещё заказы