Форум АНТИЧАТ - [CSS] Табы как в Windows Vista

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

http://www.nnm.ru/filez/vista/1.jpg

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

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

PHP код:


		
			
<ul id='tabs'>

  <li><a href=''>Formats</a></li>

  <li><a href=''>Location</a></li>

  <li><a href=''>Keyboards and Languages</a></li>

  <li><a href=''>Administrative</a></li>

</ul>

Замечательно.

http://www.nnm.ru/filez/vista/2.jpg

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

PHP код:


		
			
<style>

#tab, #tab li, #tab a{

  float:left;

}

#tab{

  padding-left:2px;

  width:300px;

}

Замечательно.

http://www.nnm.ru/filez/vista/3.jpg

Теперь играемся с "a"... Пару бордеров, пару отступов итп:

PHP код:


		
			
<style>

#tab, #tab li, #tab a{

  float:left;

}

#tab{

  padding-left:2px;

  width:500px;

  list-style:none;

}

#tab a{

  padding:0 5px;

  height:17px;

  line-height:17px;

  color:black;

  text-decoration:none;

  border:1px solid #8B8C91;

  border-bottom:0;

  font-family:tahoma, verdana, arial;

  font-size:12px;

  background:#EDECF4;

}

</style>

замечательно =)))

http://www.nnm.ru/filez/vista/4.jpg

Теперь используем обычный трюк с class='active'. Элементу, который в данный момент активный, присваивается class='active' и пишется несколько другой CSS код.

PHP код:


		
			
<ul id='tab'>

  <li><a href=''>Formats</a></li>

  <li class='active'><a href=''>Location</a></li>

  <li><a href=''>Keyboards and Languages</a></li>

  <li><a href=''>Administrative</a></li>

</ul>

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

PHP код:


		
			
#tab .active a{

  height:19px;

  line-height:19px;

  color:black;

  background:#fff;

}

Заметим, что активный элемент сполз вниз, а не возвысился над остальными, как было задумано.

http://www.nnm.ru/filez/vista/5.jpg

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

http://www.nnm.ru/filez/vista/6.jpg

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

PHP код:


		
			
#tab li{

  margin-right:-1px;

}

мы просто "сдвигаем" все элементы li списка на один пиксель влево, причем их абсолютная позиция не меняется. Т.е. элементы как бы наезжают друг на друга, но зато мы видим то, что хотели добиться

http://www.nnm.ru/filez/vista/7.jpg

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

http://www.nnm.ru/filez/vista/8.jpg

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

PHP код:


		
			
<style type='text/css'>

#tab, #tab li, #tab a{

  float:left;

}

#tab{

  padding-left:2px;

  width:500px;

  list-style:none;

  background:url('1px.gif') repeat-x left bottom;

}

#tab a{

  padding:0 5px;

  height:17px;

  line-height:17px;

  color:black;

  text-decoration:none;

  border:1px solid #8B8C91;

  font-family:tahoma, verdana, arial;

  font-size:12px;

  background:#EDECF4;

  margin-top:2px;

}

#tab .active a{

  height:19px;

  line-height:19px;

  color:black;

  background:#fff;

  margin-top:0;

  border-bottom:1px solid #fff;

}

#tab li{

  margin-right:-1px;

}

</style>

<ul id='tab'>

  <li><a href=''>Formats</a></li>

  <li class='active'><a href=''>Location</a></li>

  <li><a href=''>Keyboards and Languages</a></li>

  <li><a href=''>Administrative</a></li>

</ul>

http://www.nnm.ru/filez/vista/9.jpg

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