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

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

Меню в виде закладок на чистом CSS, или выражаясь по буржуйски — табы (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;, а не в столбик .

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

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

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Загрузка...

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

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