Trinux
24.08.2006, 04:01
Сдеалем-ка меню в стиле висты.
http://www.nnm.ru/filez/vista/1.jpg
Да, вот именно такое =))) Не знаю зачем оно может пригодится, но в данной статье я хотел рассказать небольшой трюк, который недавно использовал. Лучшим примером будет как раз такое Tab-меню.
Начнем. Для начала нам нужен обычный список:
<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 кодом. Для начала я позиционирую как список, так и все его элементы по левому борту, т.к. нам нужно горизонтальное меню. Одновременно немного настраиваю отображение списка. в частности делаю отступ от левого борта для первого таба и прописываю общую длинну списка:
<style>
#tab, #tab li, #tab a{
float:left;
}
#tab{
padding-left:2px;
width:300px;
}
Замечательно.
http://www.nnm.ru/filez/vista/3.jpg
Теперь играемся с "a"... Пару бордеров, пару отступов итп:
<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 код.
<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 для него:
#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 пикселя, что не очень красиво. Теоритически можно задать только левый или только правый бордер и конечному\начальному элементу присвоить другой класс и заливать оба бордера. Но у нас с вами один из элементов выше других, а значит он должен иметь оба бордера. Какзалось бы ситуация сложная, но все оказалось проще.
#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 пиксель гифом нужного цвета - цвета линии, чтобы залить бэкграунд. делаем. Конечный код выглядит примерно так:
<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
http://www.nnm.ru/filez/vista/1.jpg
Да, вот именно такое =))) Не знаю зачем оно может пригодится, но в данной статье я хотел рассказать небольшой трюк, который недавно использовал. Лучшим примером будет как раз такое Tab-меню.
Начнем. Для начала нам нужен обычный список:
<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 кодом. Для начала я позиционирую как список, так и все его элементы по левому борту, т.к. нам нужно горизонтальное меню. Одновременно немного настраиваю отображение списка. в частности делаю отступ от левого борта для первого таба и прописываю общую длинну списка:
<style>
#tab, #tab li, #tab a{
float:left;
}
#tab{
padding-left:2px;
width:300px;
}
Замечательно.
http://www.nnm.ru/filez/vista/3.jpg
Теперь играемся с "a"... Пару бордеров, пару отступов итп:
<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 код.
<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 для него:
#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 пикселя, что не очень красиво. Теоритически можно задать только левый или только правый бордер и конечному\начальному элементу присвоить другой класс и заливать оба бордера. Но у нас с вами один из элементов выше других, а значит он должен иметь оба бордера. Какзалось бы ситуация сложная, но все оказалось проще.
#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 пиксель гифом нужного цвета - цвета линии, чтобы залить бэкграунд. делаем. Конечный код выглядит примерно так:
<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