Как задать стиль в пункте меню для текущей страницы

Недавно я, когда верстал один сайт для вордпресс (WordPress), столкнулся с маленькой проблемкой, о которой сейчас вам и расскажу. Заказчик захотел, чтобы я сделал на его сайте такой фокус – если пользователь захотел почитать, например, страницу «о студии», то ее кнопка должна быть выделана другим стилем, показывая пользователю, что он находится именно на этой странице.  Вот так, как в примере:

Облазил я форумы, сайты, блоги, но так и не получил ответа. Многие предлагали использовать для такого эффекта JavaScript, PHP, так как в CSS такого фокуса сделать не возможно.  Но, что бы я ни ставил, у меня все равно ничего не получалось. Не знаю, по каким причинам. Тогда я решил просто посмотреть в браузере Google Chrome «код элемента». И тут меня озарило – я увидел, что к активной ссылке автоматически прописывается дополнительный класс «current-menu-item».

Вот и решил, используя класс «.current-menu-item», в CSS файле прописать к активной ссылке в меню другой стиль. То есть, достаточно просто в файле «style.css» вашей темы WordPress добавить вот такой код как у меня в примере. Естественно, правила для меню вы указываете свои.

#menu li.current-menu-item a
{
color:#fff;
background:url(images/knopka.png);
}

Эврика!!!! Получилось.

Теперь и у вас не будет никаких проблем при создании оформления ссылки в меню для открытой страницы.

Внимание, этот пример подходит для тех, кто использует движок CMS WordPress.

Вот и все. Будут вопросы, пишите в комментариях, отвечу. И не забывайте нажимать на кнопку социальных сетей, если вам понравилась статья. Таким образом, ваши друзья узнают, что вы сейчас читаете.
Хотите первыми узнавать о добавлении новых статей на моем блоге? Подпишитесь на обновление через RSS-ленту. Я стараюсь регулярно добавлять интересные статьи.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

14 Ответов на комментарий - Как задать стиль в пункте меню для текущей страницы

1. SergeyAl

   14.11.2013 в 19:18

   Ага! Есть готовый вариант. Правда не в вашем блоге нашел
   Вот готовое решение:

   /* Класс текущего элемента списка: */
   li.current_page_item {
       background-color:#565656;
       color:#FFFFFF;
   }
   /* Класс текущей гиперссылки элемента списка: */
   li.current_page_item a{
       text-decoration:underline;
       color:#767754;
   }
   
2. SergeyAl

   14.11.2013 в 18:59

   Не получилось… Тема “Omega” по разному пробовал
3. Степан => автор блога

   14.11.2013 в 19:06

   Сергей, попробуйте вот этот способ /effekty-dlya-sajta-2/kak-na-sajte-vydelit-aktivnuyu-ssylku-v-menyu-ispolzuya-javascript-i-css.html/.
   Там в конце есть готовые скрипт на Java Script
4. SergeyAl

   14.11.2013 в 19:09

   Спасибо ) Да, если с этим не получится буду тот пробовать. Хочу докопаться до решения в рамках CSS
5. Степан => автор блога

   14.11.2013 в 19:39

   Спасибо Сергей за комментарий!
6. Ильгиз

   02.02.2014 в 20:18

   Cпасибо за сайт действительно current_page_item помогает
7. Степан => автор блога

   02.02.2014 в 20:45

   Пожалуйста!
8. Александр

   10.05.2014 в 11:56

   Стёп я начинающий в cms а тем более в css и php… А как сделать так чтобы каждая кнопка подсвечивалась разными цветами, которые мог бы указать?
9. Степан => автор блога

   10.05.2014 в 18:59

   Александр, мне трудно определить, насколько Вы начинающий, к тому же, чтобы ответить на Ваш вопрос, нужно целая статья. Поэтому даю Вам кода, а Вы уж сами разбирайтесь, куда их вставить:

   <div id="menu">
   	<ul>
   		<li><a href="#" class="red">Главная</a></li>
   		<li><a href="#" class="orange">Автор</a></li>
   		<li><a href="#" class="yellow">Статьи</a></li>
   		<li><a href="#" class="green">Еще что-то</a></li>
   		<li><a href="#" class="blue">Контакты</a></li>								
   	</ul>
   </div>
   

   в CSS

   #menu{
   	width:100%;
   	margin:15px;
   }
   	#menu ul{
   		list-style:none;
   	}
   		#menu li{
   			list-style:none;
   			display:block;
   			float:left;
   			height:37px;
   			line-height:37px;
   			text-align:center;
   			margin:0 1px;
   		}
   			#menu li a{
   				display:block;
   				float:left;
   				font-weight:bold;
   				color:#fff;
   				text-decoration:none;
   				padding:5px 35px;
   				text-transform:uppercase;
   			}
   				#menu li a:hover{
   					text-decoration:none;
   				}
   			#menu li a.red{
   				background:#c40d0b;
   			}
   				#menu li a:hover.red{
   					background:#FF0000 none;
   				}
   			#menu li a.orange{
   				background:#f26522;
   			}
   				#menu li a:hover.orange{
   					background:#EE9A00 none;
   				}
   			#menu li a.yellow{
   				background:#e4c016;
   			}
   				#menu li a:hover.yellow{
   					background:#FFFF00;
   				}
   			#menu li a.green{
   				background:#219e0b;
   			}
   				#menu li a:hover.green{
   					background:#00FF00 none;
   				}
   			#menu li a.blue{
   				background:#2c88ce;
   			}
   				#menu li a:hover.blue{
   					background:#98F5FF none;
   				}
   			
   
10. Александр

    28.02.2016 в 22:32

    Спасибо!!! заработало
    я скопировал:

    #menu li .current-menu-item a{...}

    и вставил себе на сайт, а внутрь вставил свои стили.
    Замечу! сначала не работало пока не удалил пробел после li
    должно быть так:

    #menu li.current-menu-item a{...}
11. Степан => автор блога

    01.03.2016 в 15:14

    И Вам, Александр, спасибо за комментарий!
12. 3vgeny

    19.12.2018 в 23:27

    <li id="menu-item-208" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-208">

    Возможно в связи с обновлениями wordpress, а может зависит от темы шаблона не знаю. Но нету теперь current-menu-item в кодах браузера.
    Если пробовать писать стиль для menu-item-208 то не работает.
13. 3vgeny

    20.12.2018 в 00:11

    Ранее писал коммент, извиняюсь, проблему решил. Вместо #menu прописав своё название
14. Степан => автор блога

    20.12.2018 в 11:39

    Вот и отлично, что все ок

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: css, wordpress, эффекты для сайта