Меню в виде закладок без использования изображений

Меню в виде закладок, или выражаясь по буржуйски — табы (tabs), обычно изготавливают с применением различных фоновых картинок. Однако можно вполне обойтись и обычным набором правил в файле CSS. Особенно данный способ понравится любителям минимализма. Как говорится — дешево и сердито просто и со вкусом!

Принцип построения такого меню также достаточно прост. Идея в следующем: всему блоку меню задается нижний бордер толщиной в 1 пиксель какого-либо цвета. Далее каждому пункту списка задается таким же цветом верхний и оба боковых бордера. А нижнему задаем цвет, совпадающий с цветом фона. В нашем случае белый.

#menu {
list-style-type: none;
border-bottom: 1px solid #999;
}
#menu li {
display: inline;
padding: 5px 5px 0;
margin: 0 10px 0 0;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #fff;
}

В результате получаем как бы ряд визуальных закладок, сформированных одним лишь бордером.

tabsnoimg.gif

Не забывайте только в правилах прописывать отсутствие маркеров у списка (list-style-type: none;) и сами пункты вытягивать в линию, а не в столбик (display: inline;)

Смотреть пример

10.11.2009

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: