Сдеалем-ка меню в стиле висты.



Да, вот именно такое =))) Не знаю зачем оно может пригодится, но в данной статье я хотел рассказать небольшой трюк, который недавно использовал. Лучшим примером будет как раз такое Tab-меню.

Начнем. Для начала нам нужен обычный список:
Замечательно.



Теперь разберемся с CSS кодом. Для начала я позиционирую как список, так и все его элементы по левому борту, т.к. нам нужно горизонтальное меню. Одновременно немного настраиваю отображение списка. в частности делаю отступ от левого борта для первого таба и прописываю общую длинну списка:
Замечательно.



Теперь играемся с "a"... Пару бордеров, пару отступов итп:
замечательно =)))



Теперь используем обычный трюк с class='active'. Элементу, который в данный момент активный, присваивается class='active' и пишется несколько другой CSS код.
код списка. Как вы могли заметить, li для "Location" приобрел class='active' (вы уж простите что так разжевываю, просто чтоб вопросов менье было у начинаюих =))
и пишем CSS для него:
Заметим, что активный элемент сполз вниз, а не возвысился над остальными, как было задумано.



Чтобы поправить это достаточно присвоить margin-top:2px для всех элементов a, кроме активного. Т.е. опустить все элементы на 2 пикселя, кроме активного.



куда лучше =))) ну а теперь тот самый трюк, о котором я и хотел поведать. Как можно заметить, каждый элемент a имеет бордеры справа и слева. Поэтому на стыке получается линия в 2 пикселя, что не очень красиво. Теоритически можно задать только левый или только правый бордер и конечному\начальному элементу присвоить другой класс и заливать оба бордера. Но у нас с вами один из элементов выше других, а значит он должен иметь оба бордера. Какзалось бы ситуация сложная, но все оказалось проще.
мы просто "сдвигаем" все элементы li списка на один пиксель влево, причем их абсолютная позиция не меняется. Т.е. элементы как бы наезжают друг на друга, но зато мы видим то, что хотели добиться




Дело за малым. Осталось прорисовать горизонтальную черту списку и все будет готово. Тут я уже воспользуюсь не своим трюком, а трюком известного немецкого дизайнера Дэна (simplebits.com)
Ведь если мы просто проведем border-bottom для списка, то получим такую картину



Как видим, линия проходит и под активным элементом. Я долго марался с этим но понял что кроссбраузерно проблему решить нельзя с помощью border-bottom. Трюк Дэна прост - мы заливаем в бэкграунд списка эту линию и активный элемент смещаем чуть вниз. А точнее мы смещаем вниз все элементы, просто у остальных a элементов появляется нижний бордер. Но это не суть, для начала нам нужен 1 пиксель гифом нужного цвета - цвета линии, чтобы залить бэкграунд. делаем. Конечный код выглядит примерно так:



посмотреть вживую можно тут:
http://exot.ru/trin/vista.php