Меню в виде закладок, или выражаясь по буржуйски — табы (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;)
И даже забронировать отели в одессе.
Но вот пластическая хирургия — это вам не шутки.
К большому сожалению данная реализация не имеет права на существования. Ибо ни один из ослов не смог корректно отобразить табы. Хотя за идею спасибо, как раз возникла необходимость в созданиях закладок без картинок.
Ответить
Данный код, кроме того неправильно отображается в Сhrome. Для эксплорера этот код будет работать, если например добавить margin:
#menu {
list-style-type: none;
border-bottom: 1px solid #999;
margin: 10px;
}
в этом случае border ul не совпадает вверху с border li, почему-то когда они совпадают border вверху исчезает в эксплорере.
Ответить