Как создать меню с вкладками с помощью CSS3
Навигация, зачастую, занимает множество места, если конечно у вас много в ней информации, но как создать такую навигацию, чтобы содержала множество информации, но при этом была элегантно оформлено и не занимала много места, в данном уроке мы рассмотрим как создать замечательную навигацию с помощью вкладок. Данный вариант отлично подойдет как в качестве простых вкладок, так и в качестве отличной навигационной панели. Все это будет осуществляться с помощью css3.
Заметка: здесь имеется поддержка для IE 7-8, но она всё еще ограничена тем, что стили наложения будут отображаться некорректно. Если бы не великолепные скрипты CSSPIE и Dean Edwards, то для этого меню не было бы поддержки в IE вплоть до 9-й версии. Ниже вы увидите объяснение процесса разработки, разделенное на этапы. Также не забудьте скачать исходник, приведенный выше.
Шаг 1. HTML
Начнем с того, что мы будем разрабатывать документ на базе doctype HTML5, внедрив собственные таблицы стилей и сообщив браузерам IE 7 и 8, что использовать CSS3 – это нормально.
1 2 3 4 5 6 7 |
<meta charset="utf-8"> <!-- Styles !--> <link rel="stylesheet" href="styles/themes/jean/darkwash.css" media="screen"> <!--[if lt IE 9]> <link rel="stylesheet" href="styles/ie.css" media="screen" /> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> |
После того, как вы завершили головную часть документа, внутри тэгов body нужно создать контейнеры для навигации с вкладками. Давайте сделаем это.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<div id="container"> <div class="tab-container"> <div id="c1"> <a href="#c1" title="First">Первая</a> <div class="tab-content"> <h3>Шапка сайта с parallax-эффектом на jQuery</h3> <p>Описание. </p> </div> </div> <div id="c2"> <a href="#c2" title="Second">Вторая</a> <div class="tab-content"> <p>Описание.</p> </div> </div> <div id="c3"> <a href="#c3" title="Third">Третья</a> <div class="tab-content"> <h3>3D галерея для сайта с помощью jQuery и CSS3</h3> <p>Описание. </p> </div> </div> <div id="c4"> <a href="#c4" title="Fourth">Четвертая</a> <div class="tab-content"> <h3>Создаем панель с регистрацией с помощью PHP</h3> <p>Описание.</p> </div> </div> </div> </div> |
Как видно, первый контейнер обозначен id=”container”. Он используется для создания навигационного меню, ширину и расположение которого можно будет регулировать вручную.
Последний контейнер обозначен class=”tab-container”, и он является оберткой для самих вкладок. Это очень важный класс, и его не нужно изменять, хотя далее в статье мы поговорим об этом.
Шаг 2. CSS
И так, для соответствия целям нашей сегодняшней статьи, мы будем использовать некоторые глобальные стили для тэгов типа: body, p tags, heading и так далее. Добавляя вкладки, вы уже, наверное, замечали эти стили в таблице. В данном случае вы можете либо удалить эти стили, либо указать .tab-container для создания обособленных стилей для вкладок, не переписывая при этом основной стиль вашего веб-сайта.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
body { font-size:13px; font-family:Arial, Helvetica, sans-serif; color:#E7E7E7; } p, .tab-content li, h1, h2, h3{ margin-bottom: 10px; } a{ text-decoration:none; color:#EFD24A; } a:hover{ color:#AF9B41; } .tab-container h3{ font-size:147%; color:#EFDFB3; } |
Сейчас мы будем оформлять два наших контейнера. В нашей сегодняшней статье мы выравниваем по центру наш основной контейнер посредством margin: 0 auto, задаем ширину в 480 пикселей и немного оттесняем от верхней части приблизительно на 4%.
1 2 3 4 5 |
#container{ margin:0 auto; width:480px; margin-top:4%; } |
Что касается .tab-container, то здесь важно добавить относительное позиционирование для блока контента каждой вкладки, чтобы перекрыть их между собой, тем самым получив сплошную красивую линию. На надо, чтобы ширина совпадала с шириной основного контейнера (100%), а нулевой z-index поможет нам скрыть текст перекрытого контент-блока, потому что IE всегда норовит его всем показать.
1 2 3 4 5 |
.tab-container { position: relative; width: 100%; z-index:0; } |
Итак, учитывая, что у нас уже есть работающие вкладки, первым делом нужно выстроить их в горизонтальную линию. Для того чтобы сделать это, просто нужно добавить параметр display:inline к первому div’у каждой вкладки.
1 2 3 |
.tab-container > div { display: inline; } |
Мы также применим параметр display:inline-block, чтобы всё выравнивалось правильно относительно содержимого вкладки. Задав поля в 2 пикселя, мы можем добавить немного пространства вокруг каждой вкладки, чтобы немного «подчистить» её. Нам также надо добавить фоновую градацию для каждого браузера, а также закругленные углы и box-shadow, чтобы добавить шика! Так как мы используем CSSPIE для IE 7 и 8, нам даже не понадобятся специальные фильтры для градаций.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.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, если мы уже перешли в другие вкладки.
1 2 3 4 |
.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 работали правильно, и для этого мы внесем параметр абсолютного позиционирования. Итак, со всем важным мы разобрались, и теперь нам остались лишь небольшие корректировки.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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.
1 2 3 4 |
.tab-container > div:target > div { position: absolute; z-index: 3 !important; } |
Последнее, что нам осталось сделать, это добавить к контенту отступы, а также некоторое оформление по умолчанию, если вы, например, захотите добавить изображения во вкладки. Кстати, не забудьте импортировать файл reset.css в верхнюю часть таблицы стилей, так как нам надо сбросить стандартные параметры браузеров.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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 примерно так:
1 |
.tab-container > div > div, .tab-container > div > a{behavior: url(../styles/csspie/PIE.htc);} |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 30.05.2012 в 16:18, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |