Добрый день!
Помогите, пож-та, решить.
Есть Рубрика "Страны" и подрубрики "Греция", Турция, Бали и т.д. Каждая подрубрика содержит 5-10 записей (постов).
Нужно реализовать боковой колонке (сайдбаре):
1. Вывод Только списка подрубрик, т.е. "Греция", Турция, Бали и т.д в АЛФАВИТНОМ ПОРЯДКЕ.
2. Вывести этот список подрубрик в виде КАРТИНОК (jpg или png). Каждая картинка соответствует определенной подрубрики. (Т.к. клиенту понравился определенный шрифт, то реализовать меню как картинка – единственный выход).
3. Сделать этот список активным. Т.е. чтобы при наведении мыши картинка изменялась (пример, свойство a:hover), и самое главное, если выбрана рубрика или запись в этой рубрике, например запись в рубрике Греция, то в списке рубрик она должна быть выделенна (т.е. заменена на другую картинку). Чтобы было видно в какой рубрике находишься.
1 и 2 реализовать можно просто (например через Произвольное меню). Но вот с 3-м активным пунктом загвоздка.
Я бы делал через CSS: картинки – бэкграунд, ссылка – невидимый текст.
Хорошо. А как "прикрепить" ссылку к рубрики и постам? И если посетитель посмотрел несколько рубрик и постов, то для определения текущей рубрики св-ва a:visitet, hover, link – не выход.
А классы зачем существуют? Их в 3.1 генерируется тьма тьмущая чуть ли не для каждого элемента.
А можно, хотя бы 1 пример, а то я пробовал – не получалось.
.menu-item a {color: transparent}
.menu-item-84 {background: url(img/cat-4.png)}
.menu-item-84:hover {background: url(img/cat-4-hover.png)}
.menu-item-84.current-menu-item {background: url(img/cat-4-current.png)}
.menu-item-84.current-post-parent {background: url(img/cat-4-current.png)}
Последний вопрос. "84" – это Id рубрики?
Что еще нужно сделать, чтобы заработало? Т.к. КСС прописал, но изменений никаких.
И ВП версии 3.0.2
ID элемента меню. У меня.
Изучить матчасть. htmlbook.ru в помощь!
В итоге заработало вот так
#menu-item-458 {background: url(/img/turs/chehia.png); font-size: 0px; background-position: center; background-repeat: no-repeat; list-style-type: none;}
#menu-item-458:hover {background: url(/img/turs/chehia_cur.png); font-size: 0px; background-position: center; background-repeat: no-repeat; list-style-type: none;}
#menu-item-458.current-menu-item {background: url(/img/turs/chehia_cur.png); font-size: 0px; background-position: center; background-repeat: no-repeat; list-style-type: none;}
#menu-item-458.current-post-parent {background: url(/img/turs/chehia_cur.png); font-size: 0px; background-position: center; background-repeat: no-repeat; list-style-type: none;}
color: transparent не захотел работать…