Эта статья поможет вам сделать резиновые закладки с закругленными углами используя CSS и одно фоновое изображение для всех состояний закладки. Результат будет выглядеть примерно так:
Перед тем как рассматривать код, небольшое пояснение к нашим закладкам. Как видно на рисунке они имеют три состояния:
- Активный элемент (Главная)
- Обычная закладка (Сообщество, Сообщения, Контакты)
- Закладка при наведении указателя (Блог)
Каждый элемент имеет закругленные уголки, а его ширина зависит от содержимого.
Теперь, если все это ясно, перейдем к HTML и CSS. Оптимальным вариантом является использование тега <span> внутри ссылки <a> и применение к обоим элементам фонового изображения.
Как уже было сказано ранее, нам понадобится всего лишь одно фоновое изображение:
Чтобы фон изменялся мы будем использовать позиционирование фона для каждого состояния:
- Активное
- Обычное
- При наведении указателя
Как видите, 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; } .tab a:link, .tab a:visited{ float:left; height:30px; background:url(tab-round.png) no-repeat right -30px; color:#666; font-weight:bold; text-decoration:none; padding:0 14px 0 0; } .tab a span{ float:left; height:30px; background:url(tab-round.png) no-repeat left -30px; padding:0 0 0 14px; line-height:30px; cursor:pointer } .tab a:hover{ background-position:right -60px; } .tab a:hover span{ background-position:left -60px; } .active a:link, .active a:visited, .active a:visited, .active a:hover{ background-position:right 0; } .active a span, .active a:hover span{ background-postition:left 0; }
На этом все. Можете использовать это в своих проектах.
Оригинал: Clean Tab Bar Digg-like using CSS
Я как раз эту тему изучаю.
Минус такого подхода в том, что нельзя использовать прозрачность (в закруглённых уголках) — фоновые изображения наложатся и ничего не получится, жаль что в css нельзя задавать область показывания фона, только top/right а не до куда оно идёт.
Поэтому я использую sliding doors..
sliding doors оч хороший прием — никаких миганий, ничего такого
Артём Курапов, ну и рассказал бы что за sliding doors, или хоть подскажите, где хорошо описана тема.
UNCIA, вот например http://www.id-as.com/arts/ala/slidingdoors/
Артём Курапов, а как же png alpha-канал или css opacity
Выглядит оригинально, осталось немного поработать над прозрачностью и готово!
спасибо попробую
И снова ваш блог мне помог в работе с CSS, у меня получилось сделать такие же закладочки, спасибо за подробное разъяснение, хороший маериал.
просто и красиво. Использование списков интересное. «Нестандартное», что ли…
Спасибо большое. Нашла много для себя интересного — и в этой статье, и в самом блоге.
Здорого. Ничего сложного вроде, а смотрится очень симпатично.
Большое спасибо. Просто, наглядно и красиво!!!
Спасибо за статью! Я здесь впервые и только начал изучать CSS, наверно я у вас еще на долго останусь. Спасибо!
Спасибо большое за статью!.
Да, очень удобный способ. Вот только если в css убрать фон для
border-bottom:solid 1px #DEDEDE;
, то нижестоящий не переносится на следующую строчку. Почему?
Владимир, не понял, что у вас не получается.
Ребята а в Експлорере такое чудо показыватеся((( а не закладки. Может кто то подскажет как CSS подправить что бы в Експлорере работало нормально? Буду благодарен. С ув. Дмитрий
Дима, спасибо что заставили обратить внимание. Как оказалось ошибку в IE вызывал плагин для корректировки полупрозрачных png. Теперь всё нормально должно быть. К тому же немного поправил код самого примера.
Благодарен. А я думал ошибка в позиционировании и пробывал, разбить одну на три «картинки-состояния» но это не давало результата. Как обычно Експлорер отличился. Еще раз спасибо.
+1 к посетителю
Закладки понравились, очень круто! Вот только такой вопрос:
Если используется одна страница, внутри фрейм, так вот: Как сделать что бы при нажатии на закладку, class=»active» пермещался на неё и соответственно снимался class=»active» с той что было до этого нажато…
проблема в 6 эксплорере, если за закладками в тексте идет список, он наследует стиль и отталкивает все строки в право. если присваивать этим элементам в css дополнительный класс, например ul.zakladki, li.zakladki, то как раз в 6 версии оно всё лесенкой становится) т.к. видимо каждой новой закладке присваивается заново стиль… такой же эффект при присваивании id. как с этим бороться?
Используйте уникальный класс для списка.
Помогите разобраться с ИЕ6 и 7. Первая закладка активная, ушла немного вверх, вторая закладка не активная. стоит правее и ниже первой. Что не делал, никак не получается исправить.
ul и li назвать отдельным названием класса (типа ul.zakladka , li.zakladka). Каскад из-за заранее объявленных в стиде стандартных классов для ul и li
Пасибо за совет. Как раз искал резиновые закладки, хотел кое-что подправить и нашел. =)
Атстойная менюшка. Часть таба слева непрорисовывает, избыточный код css
Проблема с левым табом из-за того, что неправильно последний стиль прописан — синтаксическая ошибка в «background-postition:left 0;»