—»     —»   Разрабатываем меню навигации с вкладками на CSS3
  Раздел: Меню и Навигация, Руководства, CSS/Style Sheets   Комментариев: 1  

Разрабатываем меню навигации с вкладками на CSS3



* Языки: HTML/CSS3
* Сложность: Средняя
* Время на выполнение: 30 минут
* Совместимость: все браузеры за исключением IE 5-8

Скачать исходник | Посмотреть он-лайн демо
Внимание! У вас нет прав для просмотра скрытого текста.


Привет, друзья! Сегодня мы расскажем вам о разработке навигационного меню с вкладками на CSS3. В нашем сегодняшнем примере мы будем разрабатывать версию с шаблоном «darkwash jean». Этот вариант мы выбрали среди множества других и вот почему: 1. Потому что мы можем это сделать и 2. Здесь вовлечено больше стилей, за счет чего мы сможем рассказать вам о большем количестве различных трюков с оформлением CSS3. Если вам захочется, то существуют более простые шаблоны в предложенном исходном файле, так что можете использовать их. А структура, описанная в статье очень похожая для всех шаблонов.

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

Итак, теперь можно начинать. Давайте приступим.

Пошаговое руководство

Ниже вы увидите объяснение процесса разработки, разделенное на этапы. Также не забудьте скачать исходник, приведенный выше.

Этап 1: Разработка каркаса

Шапка документа

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


<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 нужно создать контейнеры для навигации с вкладками. Давайте сделаем это.

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

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

<!-- Start Tab Area. Use the container for positioning and to increase the tab content width !-->
<div id="container">

<!-- Start Tabs !-->
<div class="tab-container">

Tabs will go here
</div>

<!-- Tab Container !-->
</div>

<!-- Container !-->

<!-- End Tab Area !-->

Разработка первой вкладки

Последнее, что мы сделаем для каркаса – это напишем код для самих кладок и их наполнения.

Для начала нам нужно создать div с id, чтобы мы могли знать, какой контент отображать при нажатии по соответствующей вкладке. Это выглядит примерно так:

<div id="c1">
//Next markup will go here
</div>

Далее нам надо создать вкладку с обозначенным Id, а затем сообщить ей, чтобы нам отображался div с id “c1”. Это можно реализовать следующим образом: дописать #c1 после ссылки. Итак, теперь наша разработка должна выглядеть примерно так:

<div id="c1">
        <a href="http://webdesign.tutsplus.com/videos/how-to-create-a-css3-tabbed-navigation/#c1" title="First">First</a> <!-- This is your actual tab and the content is below it !-->
        //Next Markup will go here
</div>

Теперь давайте создадим пространство, где будет размещен наш контент. Для того чтобы сделать это, нам надо создать div с классом “.tab-content” и внести туда текст-наполнитель, что делает нашу страницу такой:

<div id="c1">
        <a href="http://webdesign.tutsplus.com/videos/how-to-create-a-css3-tabbed-navigation/#c1" title="First">First</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab-content">  <!-- tab-container > div > div in the CSS !-->
<h3>This is the first tab</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus.Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus ipsum nunc.

Suspendisse at aliquet turpis. Phasellus eu libero euismod leo imperdiet sagittis elementum ut erat. Nam euismod risus at sem consequat vestibulum.
</div>
</div>

Давайте заканчивать с каркасом

И на этом всё. Совсем немного кода для такого серьезного меню! Дальше идут остальные вкладки, которые вы будут выглядеть одинаково. Просто добавьте следующий код под вашей первой вкладкой (т.е., под c1).

Заметка: Последняя вкладка всегда будет скрытой, а её содержимое будет перемещено вверх, представляя собой нечто вроде предисловия.

<div id="c2">
        <a href="http://webdesign.tutsplus.com/videos/how-to-create-a-css3-tabbed-navigation/#c2" title="Second">Second</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<h3>Add as many tabs as you like</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.

Suspendisse at aliquet turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.
</div>
</div>
<div id="c3">
        <a href="http://webdesign.tutsplus.com/videos/how-to-create-a-css3-tabbed-navigation/#c3" title="Third">Third</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<h3>5 Preset Styles & Color Themes</h3>

Consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.

Suspendisse at aliquet turpis. Phasellus eu libero euismod leo imperdiet sagittis elementum ut erat. Nam euismod risus at sem consequat vestibulum.
</div>
</div>
<div id="c4">
        <a href="http://webdesign.tutsplus.com/videos/how-to-create-a-css3-tabbed-navigation/#c4" title="Fourth">Fourth</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<h3>NO javascript!  NO Images!</h3>

Consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.

Suspendisse at aliquet turpis. Phasellus eu libero euismod leo imperdiet sagittis elementum ut erat.
</div>
</div>
<div id="c5">
<div class="tab-content"> <!-- Having a hidden or opening tab is ideal when you don't want last tab to always show first when loading the page !-->
<h3>2 Tab Types - Regular and Newsreel</h3>

If you have an opening tab like this, it should always be last in the list of tabs otherwise it won't show first when the page loads.

Text sometimes overlaps with hidden tabs in IE7 & 8
</div>
</div>

Сейчас ваше меню должно выглядеть примерно так. Выглядит приятно даже в таком виде. Но теперь нам нужно поработать над оформлением.

Разрабатываем меню навигации с вкладками на CSS3

Этап 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{ /* This insures that there's enough space between your paragraphs, headings, etc */
    margin-bottom: 10px;
}

a{
    text-decoration:none;
    color:#EFD24A;
}

a:hover{
    color:#AF9B41;
}

.tab-container h3{ /* Effects only the h3 headings inside the tabs */
    font-size:147%;
    color:#EFDFB3;
}

Оформление контейнеров

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

#container{ /* Use this to position the entire tab module */
    margin:0 auto;
    width:480px;
    margin-top:4%;
}

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

.tab-container {  
    position: relative;  
    width: 100%;  
    z-index:0;  
}

На данном этапе у нас уже должно быть работающее навигационное меню. Оно не совсем привлекательно выглядит пока что, но всё же, оно работает.

Разрабатываем меню навигации с вкладками на CSS3

Оформляем вкладки и их наполнение

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

.tab-container > div {  
    display: inline;  
}

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

.tab-container > div > a {
    position: relative !important; /* Keeps the tabs in line with each other */
    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; /* old browsers */
    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)); /* webkit */
    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;
}

Далее по списку нам надо дать пользователю знать, в какой вкладке он находится. Для того чтобы сделать это, мы будем использовать селектор target, а также скрипт Dean Edwards IE9.js для того, чтобы с этим могли справиться IE версий 7 и 8.

Итак, .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 { /* This is the container which holds the tab content */
    background: #4C4648; /* old browsers */
    background: -moz-linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%); /* firefox */
    background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%); /* future browsers */
    -pie-background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%); /* pie for ie */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(84%,#474344), color-stop(100%,#2F2D2E)); /* webkit */
    -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; /*Delete if you don't want an offset*/
    min-height:250px; /* Change this value if you need more or less content space */
    position:absolute; /* Fixes IE 7 & 8 */
}

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

.tab-container > div:target > div {
    position: absolute;
    z-index: 3 !important; /* Brings the content to the front depending on the tab that was clicked */
}

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

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

div.tab-content{ /* Styles the inner content of the tabs */
    padding-bottom: 70px;
    padding-left: 20px;
    padding-right: 20px;
}

.tab-content img{
    margin:0 auto;
    display:block;
    padding-bottom: 20px;
    padding-top: 10px;
}

/******  This imports other stylesheets so you don't have to call them in an html file *****/
@import url('../../reset.css');

После того, как всё это мы закончили, нам осталось закончить чем-то вроде нижеприведенного изображения. Если у вас всё выглядит отлично от того, что вы видите на картинке, то, вероятно, вы что-то упустили, либо решили сделать по-своему.

Разрабатываем меню навигации с вкладками на CSS3

Ещё кое-что…

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

.tab-container > div > div, .tab-container > div > a{behavior: url(../styles/csspie/PIE.htc);}

Отлично! Теперь мы закончили!

Если вы дошли до этого абзаца, это означает, что вы закончили! Поздравляем вас! Надеемся, что вам понравилась наша сегодняшняя статья, так как нам понравилось её составлять!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 8321   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 16 февраля 2012 @ 17:40
Написал: aleks1309 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
отличная разработка!навигационное меню для сайта вещь не заменимая
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930