Главная / Блог технологий продвижения и разработки сайтов / Вертикальные закладки

Пытаясь два года назад сверстать вертикальные вкладки для сайта дизайнера Штукатуровой Светланы (она создала дизайн моего сайта), я не нашёл способа повернуть текст на 90 градусов по часовой стрелке, однако придумал идею как оживить закладки.

К сожалению, не могу встроить демонстрацию эффекта в данную страницу, однако, даю ссылку на шаблон сайта. Открыв макет, наведите мышь на вкладки справа.

Пример fade в вертикальных вкладках

Жёлтая подсветка — это вовсе не демонстрация моего дурного вкуса. Просто так заметнее эффект. Скрипт используется всё тот же: вертикальное меню с fade эффектом. Принцип работы: в графическом редакторе создаём подсветку текста отдельным слоем, затем из него делаем выделение. Удаляем выделенную область из фона. Сохраняем в формате png-24. Чистим chunk gamma утилитой pngout (ищите в Яше). В вёрстке изображение вставляем как png, применяя плагин, который делает png читабельным для ИЕ 6 и ниже. Скрипт fade применяем к заднему фону div'а или td, в который вставлено изображение.

К своему стыду, на тот момент я не мог реализовать вёрстку блоками. Поэтому не рекомендую копировать код вкладок с того макета. Ценна сама идея применения. При использовании jquery.pngFix.js (а не моего самописного плагина) ссылки будут читабельными для поисковых систем, плавная смена цветов станет максимально совместимой с различными браузерами. Опять же, исчезнет необходимость прибегнуть к услугам флэшера.