BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2013-05-23 / Вр:17:33 / просмотров: 5418

Недавно я, когда верстал один сайт для вордпресс (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-ленту. Я стараюсь регулярно добавлять интересные статьи.

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. SergeyAl

    Не получилось… Тема “Omega” по разному пробовал

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

  2. SergeyAl

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

    Ответить

    SergeyAl отвечает:

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

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо Сергей за комментарий!

    Ответить

  3. Ильгиз

    Cпасибо за сайт действительно current_page_item помогает :!: :!:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста! :!:

    Ответить

  4. Александр

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    <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;
    				}
    			
    

    Ответить

  5. Александр

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

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

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

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки: , ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 671
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3683