Меню на чистом 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;
}
В результате получаем как бы ряд визуальных закладок, сформированных одним лишь бордером.
Не забывайте только в правилах прописывать отсутствие маркеров у списка list-style-type: none; и сами пункты вытягивать в линиюdisplay: inline;, а не в столбик .
