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

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

Шаг 1. HTML

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

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

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

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

Шаг 2.  CSS

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

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

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

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

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

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

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

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

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

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: