Как создать меню с вкладками с помощью CSS3

Навигация, зачастую, занимает множество места, если конечно у вас много в ней информации, но как создать такую навигацию, чтобы содержала множество информации, но при этом была элегантно оформлено и не занимала много места, в данном уроке мы рассмотрим как создать замечательную навигацию с помощью вкладок. Данный вариант отлично подойдет как в качестве простых вкладок, так и в качестве отличной навигационной панели. Все это будет осуществляться с помощью css3.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Заметка: здесь имеется поддержка для IE 7-8, но она всё еще ограничена тем, что стили наложения будут отображаться некорректно. Если бы не великолепные скрипты CSSPIE и Dean Edwards, то для этого меню не было бы поддержки в IE вплоть до 9-й версии. Ниже вы увидите объяснение процесса разработки, разделенное на этапы. Также не забудьте скачать исходник, приведенный выше.

Шаг 1. HTML

Начнем с того, что мы будем разрабатывать документ на базе doctype HTML5, внедрив собственные таблицы стилей и сообщив браузерам IE 7 и 8, что использовать CSS3 – это нормально.

<!--[if lt IE 9]>

<![endif]-->

После того, как вы завершили головную часть документа, внутри тэгов body нужно создать контейнеры для навигации с вкладками. Давайте сделаем это.

<a href="#c1" title="First">Первая</a>

<h3>Шапка сайта с parallax-эффектом на jQuery</h3>

<p>Описание. </p>

</div>

<a href="#c2" title="Second">Вторая</a>

<p>Описание.</p>

</div>

<a href="#c3" title="Third">Третья</a>

<h3>3D галерея для сайта с помощью jQuery и CSS3</h3>

<p>Описание. </p>

</div>

<a href="#c4" title="Fourth">Четвертая</a>

<h3>Создаем панель с регистрацией с помощью PHP</h3>

<p>Описание.</p>

</div>

Как видно, первый контейнер обозначен id=”container”. Он используется для создания навигационного меню, ширину и расположение которого можно будет регулировать вручную.

Последний контейнер обозначен class=”tab-container”, и он является оберткой для самих вкладок. Это очень важный класс, и его не нужно изменять, хотя далее в статье мы поговорим об этом.

Шаг 2. CSS

И так, для соответствия целям нашей сегодняшней статьи, мы будем использовать некоторые глобальные стили для тэгов типа: body, p tags, heading и так далее. Добавляя вкладки, вы уже, наверное, замечали эти стили в таблице. В данном случае вы можете либо удалить эти стили, либо указать .tab-container для создания обособленных стилей для вкладок, не переписывая при этом основной стиль вашего веб-сайта.

body {

font-size:13px;

font-family:Arial, Helvetica, sans-serif;

color:#E7E7E7;

}

p, .tab-content li, h1, h2, h3{

margin-bottom: 10px;

}

text-decoration:none;

color:#EFD24A;

}

a:hover{

color:#AF9B41;

}

.tab-container h3{

font-size:147%;

color:#EFDFB3;

}

Сейчас мы будем оформлять два наших контейнера. В нашей сегодняшней статье мы выравниваем по центру наш основной контейнер посредством margin: 0 auto, задаем ширину в 480 пикселей и немного оттесняем от верхней части приблизительно на 4%.

#container{

margin:0 auto;

width:480px;

margin-top:4%;

}

Что касается .tab-container, то здесь важно добавить относительное позиционирование для блока контента каждой вкладки, чтобы перекрыть их между собой, тем самым получив сплошную красивую линию. На надо, чтобы ширина совпадала с шириной основного контейнера (100%), а нулевой z-index поможет нам скрыть текст перекрытого контент-блока, потому что IE всегда норовит его всем показать.

.tab-container {

position: relative;

width: 100%;

z-index:0;

}

Итак, учитывая, что у нас уже есть работающие вкладки, первым делом нужно выстроить их в горизонтальную линию. Для того чтобы сделать это, просто нужно добавить параметр display:inline к первому div’у каждой вкладки.

.tab-container > div {

display: inline;

}

Мы также применим параметр display:inline-block, чтобы всё выравнивалось правильно относительно содержимого вкладки. Задав поля в 2 пикселя, мы можем добавить немного пространства вокруг каждой вкладки, чтобы немного «подчистить» её. Нам также надо добавить фоновую градацию для каждого браузера, а также закругленные углы и box-shadow, чтобы добавить шика! Так как мы используем CSSPIE для IE 7 и 8, нам даже не понадобятся специальные фильтры для градаций.

.tab-container > div > a {

position: relative !important;

text-decoration: none;

color: #D7D7D7;

display: inline-block;

padding: 4px 14px;

font-size:15px;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

font-weight:bold;

text-transform:uppercase;

margin:2px;

background: #4C4648;

background: -moz-linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%); /* firefox */

background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%); /* future browsers */

-pie-background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%); /* pie for ie */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(52%,#474344), color-stop(100%,#2F2D2E));

border:dashed 2px #CFA840;

padding: 4px 14px;

-moz-border-radius: 3px;

-webkit-border-radius: 0px;

border-radius: 3px;

text-shadow: 0 -1px 0 #000000;

-moz-box-shadow: 0 4px 10px -5px #000000;

box-shadow: 0 4px 10px -5px #000000;

-webkit-box-shadow: 0 4px 10px -5px #000000;

}

Итак, .tab-container > div:target > сообщает о том, когда первый div (т.е., div id=”c1” и т.д.) выбран или когда он является target, если мы уже перешли в другие вкладки.

.tab-container > div:target > a {

background: none repeat scroll 0 0 #948a81;

text-shadow: 0 1px 0 #4C4648;

}

Здесь мы будем обозначать следующий div внутри .tab-container, класс которого является div class=”tab-content”, и задавать ему min-height в 250px, что важно для того, чтобы все контент-div’ы за target-div’ом не перекрывались. Так как у нас есть контент с правильной высотой, нам нужно спрятать неактивные контент-div’ы, находящиеся за target-div’ом, и для того, чтобы сделать это, мы просто добавим z-index: -2. Нам также надо, чтобы IE 7 и 8 работали правильно, и для этого мы внесем параметр абсолютного позиционирования. Итак, со всем важным мы разобрались, и теперь нам остались лишь небольшие корректировки.

.tab-container > div > div {

background: #4C4648;

background: -moz-linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);

background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);

-pie-background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(84%,#474344), color-stop(100%,#2F2D2E));

-moz-box-shadow: 0 0 12px 1px #000000 inset;

-webkit-box-shadow: 0 0 12px 1px #000000 inset;

box-shadow: 0 0 12px 1px #000000 inset;

z-index: -2;

top: 50px;

padding: 20px;

border:solid 6px #4C4648;

outline: 2px dashed #CFA840;

outline-offset: -8px;

min-height:250px;

position:absolute;

}

После того, как мы оформили основную часть нашей разработки, нам надо вынести вперед target-div. Для этого можно просто использовать селектор target с подкрепленным z-index: 3. Также стоит воспользоваться указателем !important.

.tab-container > div:target > div {

position: absolute;

z-index: 3 !important;

}

Последнее, что нам осталось сделать, это добавить к контенту отступы, а также некоторое оформление по умолчанию, если вы, например, захотите добавить изображения во вкладки. Кстати, не забудьте импортировать файл reset.css в верхнюю часть таблицы стилей, так как нам надо сбросить стандартные параметры браузеров.

div.tab-content{

padding-bottom: 70px;

padding-left: 20px;

padding-right: 20px;

}

.tab-content img{

margin:0 auto;

display:block;

padding-bottom: 20px;

padding-top: 10px;

}

@import url('../../reset.css');

Нам надо сообщить браузерам IE 7 и 8, что вполне нормально использовать box-shadow, border-radius и так далее. Для этого мы просто добавим элементы в таблицу стилей со свойствами CSS3 (ie.css), а затем добавим это и к CSSPIE примерно так: