Выделение текущего пункта меню на CSS

181

02 июля 2018, 12:10

Начал делать меню на сайте, и столкнулся с проблемой, не могу понять, как посредством CSS можно выделить категорию меню в которой я сейчас нахожусь, к примеру, есть такой код меню:

  <ul class="h-nav">
            <li><a href="/"class="is-active">главная</a></li>
            <li><a href="/kriminal">правовая база</a></li>
            <li><a href="#">истории из жизни</a></li>
            <li><a href="#">новости</a></li>
            <li><a href="#">контакты</a></li>
        </ul>

CSS:

.h-nav {height: 40px; background-color: #f3f3f3; border-bottom: 2px solid #1070b9;}
.h-nav li {display: inline-block;}
.h-nav a {display: block; padding: 0 20px; line-height: 40px; text-transform: uppercase; font-size:12px;}
.h-nav a:hover, .h-nav a.is-active {color: #fff; background: radial-gradient( #3daee7, #1070b9);}

Получается, что когда пользователь на главной, надпись в меню "Главная" выделена синим цветом, остальные пункты меняют цвет только при наведении курсором, вопрос состоит в том, как сделать, чтоб при переходе в другую категорию она становилась активной(выделялась синим) в то время как "главная" приобретала свой первостепенный вид? Я просмотрел кучу информации по этому поводу, и все предлагают реализацию посредством JS, что мне не подходит, существует ли решение на CSS?

Answer 1

Выглядит все примерно так:

[not-category=1-5]
         <ul class="h-nav ">
                <li><a href="/"class="is-active">главная</a></li>
                <li><a href="/kriminal">правовая база</a></li>
                <li><a href="#">истории из жизни</a></li>
                <li><a href="#">новости</a></li>
                <li><a href="#">контакты</a></li>
            </ul> 
      [/not-category]
              [category=5]
                       <ul class="h-nav ">
                <li><a href="/">главная</a></li>
                <li><a href="/kriminal"class="is-active">правовая база</a></li>
                <li><a href="#">истории из жизни</a></li>
                <li><a href="#">новости</a></li>
                <li><a href="#">контакты</a></li>
            </ul>
                [/category]
        [category=4]
                       <ul class="h-nav ">
                <li><a href="/">главная</a></li>
                <li><a href="/kriminal">правовая база</a></li>
                <li><a href="#" class="is-active">истории из жизни</a></li>
                <li><a href="#">новости</a></li>
                <li><a href="#">контакты</a></li>
            </ul>
                [/category]

и так все 5, благодарю за помощь

Answer 2

На CSS такое вряд ли сделаешь, поэтому и используют js, который смотрит текущий адрес страницы и подсвечивает нужный элемент списка. Но, если у вас код формируется через php, то можно сделать аналогично, чтобы при формировании меню автоматом прописывался класс is-active для текущей страницы.