Эта
статья поможет вам сделать резиновые закладки с закругленными углами
используя CSS и одно фоновое изображение для всех состояний закладки.
Результат будет выглядеть примерно так:
Перед тем как рассматривать код, небольшое пояснение к нашим закладкам. Как видно на рисунке они имеют три состояния:
- Активный элемент (Главная)
- Обычная закладка (Сообщество, Сообщения, Контакты)
- Закладка при наведении указателя (Блог)
Каждый элемент имеет закругленные уголки, а его ширина зависит от содержимого.
Теперь, если все это ясно, перейдем к HTML и CSS. Оптимальным вариантом является использование тега <span> внутри ссылки <a> и применение к обоим элементам фонового изображения.
Фоновое изображение
Как уже было сказано ранее, нам понадобится всего лишь одно фоновое изображение:
Чтобы фон изменялся мы будем использовать позиционирование фона для каждого состояния:
- Активное (background top position: top)
- Обычное (background top position: 30px)
- При наведении указателя (background top position: 60px)
HTML код
Как видите код очень простой:
<ul class="tab">
<li class="active"><a href="home.html"><span>Главная</span></a></li>
<li><a href="community.html"><span>Сообщество</span></a></li>
<li><a href="blog.html"><span>Блог</span></a></li>
<li><a href="messages.html"><span>Сообщения</span></a></li>
<li><a href="contact.html"><span>Контакты</span></a></li>
</ul>
Для того чтобы сделать закладку активной нужно добавить класс «active» элементу списка в котором находится закладка.
CSS код
ul, li {border:0; margin:0; padding:0; list-style:none;}
ul{
border-bottom:solid 1px #DEDEDE;
height:29px;
padding-left:20px;
}
li{float:left;margin-right:2px;height:30px;overflow:hidden}
.tab a:link, .tab a:visited{
background:url(tab-round.png) right 60px;
color:#666;
display:block;
font-weight:bold;
line-height:30px;
text-decoration:none;
}
.tab a span{
background:url(tab-round.png) left 60px;
display:block;
margin-right:14px;
padding-left:14px;
}
.tab a:hover{
background:url(tab-round.png) right 30px;
display:block;
}
.tab a:hover span{
background:url(tab-round.png) left 30px;
display:block;
}
.active a:link, .active a:visited, .active a:visited, .active a:hover{
background:url(tab-round.png) right 0 no-repeat;
}
.active a span, .active a:hover span{
background:url(tab-round.png) left 0 no-repeat;
}
На этом все. Теперь вы можете использовать это в своих проектах.
Оригинал: Clean Tab Bar Digg-like using CSS
