Хорошо бы загрузить Firebug или использовать инструменты разработчика Chrome для проверки CSS и разметки страницы.Это лучший способ точно узнать, как кто-то получает конкретный эффект.
При этом здесь есть пара моментов.
Фактическая форма вкладок создаетсяс аккуратным трюком, который использует границы для создания фигур .В этом случае разметка для вкладок - это просто неупорядоченный список с интервалами для текста вкладки.Используя border-bottom
и border-right
, создается форма вкладок:
border-bottom: 24px solid #3D3D3D;
border-right: 24px solid transparent;
Затем вкладкам присваивается отрицательное правое поле, чтобы они перекрывались друг с другом:
margin-right: -12px;
Наконец, все вкладки, кроме выбранной, имеют непрозрачность 0,35, что приводит к прозрачности, которую вы видите:
opacity: 0.35;
РЕДАКТИРОВАТЬ : Ух, я как-то полностью упустил из видуДело в том, что вы используете WordPress.Я не знаком с WP, но при условии, что nav может быть выведен в виде неупорядоченного списка с интервалами, содержащими текст, у вас все будет в порядке.Это довольно стандартный способ навигации, поэтому все, что вам действительно нужно, это CSS.