В данном уроке мы сделаем систему навигации по сайту с использованием только CSS3. Идея заключается в организации нескольких слайдов или слоев с содержанием, которые будут выводиться и скрываться с помощью псевдо-класса :target. C помощью переходов CSS можно сделать отличные визуальные эффекты появления слайдов. Также наша навигация будет адаптивной. Примечание: результат урока полноценно работает в браузерах, поддерживающих CSS3. Разметка HTML Для каждого отдельного слайда, который будет содержать либо набор ссылок, либо информацию, либо подслайд, создадим элемент div с классом cn-slide. Для подслайдов, которые содержат две ссылки в строке, будем использовать другой класс cn-slide-sub. Слайд с информацией просто будет иметь класс cn-slide. В нашем примере будет один основной слайд, который содержит три подслайда. Каждый подслайд содержит четыре ссылки, которые указывают на слайд с информацией. Вся структура будет представлять собой конструкцию из одного основного слайда, трех подслайдов и двенадцати слайдов с информацией: 01 <section class="cn-container"> 02 03 <div class="cn-slide" id="slide-main"> 04 <h2>Описание</h2> 05 <nav> 06 <a href="#slide-1">Философия</a> 07 <a href="#slide-2">Наука</a> 08 <a href="#slide-3">Литература</a> 09 </nav> 10 </div> 11 12 <!-- Слайд 1 с подслайдами --> 13 <div class="cn-slide cn-slide-sub" id="slide-1"> 14 <h2>Философоия</h2> 15 <a href="#slide-main" class="cn-back">Назад</a> 16 <nav> 17 <a href="#slide-1-1">Эпистемология</a> 18 <a href="#slide-1-2">Метафизика</a> 19 <a href="#slide-1-3">Эстетика</a> 20 <a href="#slide-1-4">Этика</a> 21 </nav> 22 </div> 23 24 <div class="cn-slide" id="slide-1-1"> 25 <h2>Эпистемология</h2> 26 <a href="#slide-1" class="cn-back">Назад</a> 27 <div class="cn-content"> 28 <p>Текст...</p> 29 </div> 30 <span class="cn-note">Держите левую клавишу, чтобы увидеть фон</span> 31 </div> 32 33 <div class="cn-slide" id="slide-1-2"> 34 <h2>Метафизика</h2> 35 . . . 36 </div> 37 38 <div class="cn-slide" id="slide-1-3"> 39 <h2>Эстетика</h2> 40 . . . 41 </div> 42 43 <div class="cn-slide" id="slide-1-4"> 44 <h2>Этика</h2> 45 . . . 46 </div> 47 48 <!-- Слайд 2 с подслайдами --> 49 . . . 50 <!-- --> 51 </section> Подслайды и слайды с информацией содержат ссылки на предыдущий слой. CSS Основной контейнер имеет свойства min-width и max-width, которые позволяют нам использовать для задания ширины проценты в условиях ганатии, что элемнет не станет слишком большим или маленьким: 1 .cn-container{ 2 width: 60%; 3 min-width: 300px; 4 max-width: 820px; 5 margin: 10px auto 0 auto; 6 text-align: left; 7 position: relative; 8 } Основной заголовок будет позиционироваться абсолютно и выводиться с использованием эффектов при "открывании" слайда. Переходы устанавливаются с задержкой, чтобы заголовок появлялся после вывода блоков ссылок: 01 .cn-container h2{ 02 font-family: 'PT Sans Narrow', 'Arial Narrow', Arial, sans-serif; 03 font-variant: small-caps; 04 font-weight: 700; 05 color: #fff; 06 position: absolute; 07 z-index: 1000; 08 text-shadow: 0 0 1px rgba(255,255,255,0.8), 1px 1px 1px rgba(0,0,0,0.2); 09 font-size: 80px; 10 line-height: 80px; 11 top: 0px; 12 right: 200px; 13 white-space: nowrap; 14 opacity: 0; 15 -webkit-transition: all 0.3s linear 0.4s; 16 -moz-transition: all 0.3s linear 0.4s; 17 -o-transition: all 0.3s linear 0.4s; 18 -ms-transition: all 0.3s linear 0.4s; 19 transition: all 0.3s linear 0.4s; 20 } 21 .cn-container .cn-slide:target h2{ 22 right: 0px; 23 opacity: 1; 24 } Слайды также позиционируются абсолютно. Начальная непрозрачность слайдов устанавливается равной 0. Они выводятся только тогда, когда являются целью: 01 .cn-slide{ 02 text-align: center; 03 position: absolute; 04 left: -100%; 05 padding-top: 80px; 06 margin: 0 5%; 07 width: 90%; 08 opacity: 0; 09 -webkit-transition: left 0.4s linear, opacity 0.4s linear; 10 -moz-transition: left 0.4s linear, opacity 0.4s linear; 11 -o-transition: left 0.4s linear, opacity 0.4s linear; 12 -ms-transition: left 0.4s linear, opacity 0.4s linear; 13 transition: left 0.4s linear, opacity 0.4s linear; 14 } 15 .cn-slide:target{ 16 left: 0px; 17 opacity: 1; 18 } Обратите внимание на другие файлы демонстрации. Там используются другие последовательности переходов для формирования визуальных эффектов. Теперь посмотрим на элементы ссылок. Они будут иметь одно фоновое изображение, которое позже будет переопределено для каждого элемента. По умолчанию используется файл 1.jpg. При наведении курсора мыши на элемент будет изменяться цвет тени текста и самого блока: 01 .cn-slide nav a{ 02 text-align: left; 03 display: block; 04 font-family: 'PT Sans Narrow', 'Arial Narrow', Arial, sans-serif; 05 font-variant: small-caps; 06 font-weight: 700; 07 border: 8px solid #fff; 08 padding: 2%; 09 font-size: 66px; 10 letter-spacing: 7px; 11 text-shadow: 0px 0px 10px rgba(255,255,255,0.9); 12 color: rgba(255,255,255,0.1); 13 line-height: 66px; 14 margin: 0 0 10px 0; 15 outline: none; 16 box-shadow: 1px 1px 3px rgba(0,0,0,0.1); 17 background: #fff url(../images/1.jpg) no-repeat center center; 18 -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; 19 background-clip: padding-box; 20 -webkit-transition: all 0.3s ease-in-out; 21 -moz-transition: all 0.3s ease-in-out; 22 -o-transition: all 0.3s ease-in-out; 23 -ms-transition: all 0.3s ease-in-out; 24 transition: all 0.3s ease-in-out; 25 } 26 .cn-slide nav a:hover{ 27 box-shadow: 1px 3px 7px rgba(0,0,0,0.25); 28 text-shadow: 1px 1px 1px rgba(0,0,0,0.1); 29 color: rgba(255,255,255,0.9); 30 } Элемент ссылки в подслайде будет иметь ширину 42%, так как нам нужно, что в строке помещалось два таких блока: 1 .cn-slide-sub nav a{ 2 width: 42%; 3 display: inline-block; 4 font-size: 40px; 5 } Для создания небольшого зазора между элементами установим правое поле для нечетных потомков: 1 .cn-slide-sub nav a:nth-child(odd){ 2 margin-right: 5px; 3 } Слайд с информацией является конечной точкой переходов: 01 .cn-content{ 02 background: #80B8CE url(../images/1.jpg) no-repeat center center; 03 -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; 04 text-align: left; 05 padding: 20px 20px 5px; 06 box-shadow: 1px 1px 3px rgba(0,0,0,0.1); 07 border: 8px solid #fff; 08 margin-top: 5px; 09 cursor: pointer; 10 } Каждая область с содержанием соответствует блоку ссылки. Фоновое изображение будет установлено позже: Параграф также будет иметь переходы. С помощью псевдо-класса :active мы даем возможность пользователю посмотреть на фон, удерживая левую клавишу мыши. 01 .cn-content:active p{ 02 opacity: 0; 03 } 04 .cn-content p{ 05 line-height: 24px; 06 text-shadow: 1px 1px 1px rgba(255,255,255,0.9); 07 color: rgba(103,59,77,0.9); 08 padding: 15px 20px; 09 margin-bottom: 10px; 10 background: rgba(255,255,255,0.96); 11 font-style: italic; 12 border-top: 7px solid rgba(103,59,77,0.6); 13 -webkit-transition: opacity 0.3s linear; 14 -moz-transition: opacity 0.3s linear; 15 -o-transition: opacity 0.3s linear; 16 -ms-transition: opacity 0.3s linear; 17 transition: opacity 0.3s linear; 18 -webkit-touch-callout: none; 19 -webkit-user-select: none; 20 -khtml-user-select: none; 21 -moz-user-select: none; 22 -ms-user-select: none; 23 user-select: none; 24 } Стрелка возврата выскальзывает слева . Сначала она имеет положение -100px, а при активации слайда выдвигается в положение 3px: 01 .cn-back{ 02 outline: none; 03 text-indent: -9000px; 04 width: 49px; 05 height: 42px; 06 background: transparent url(../images/arrow.png) no-repeat center center; 07 position: absolute; 08 top: 22px; 09 left: -100px; 10 cursor: pointer; 11 opacity: 0; 12 -webkit-transition: all 0.4s ease-in-out 0.5s; 13 -moz-transition: all 0.4s ease-in-out 0.5s; 14 -o-transition: all 0.4s ease-in-out 0.5s; 15 -ms-transition: all 0.4s ease-in-out 0.5s; 16 transition: all 0.4s ease-in-out 0.5s; 17 } 18 .cn-slide:target .cn-back{ 19 left: 3px; 20 opacity: 1; 21 } Теперь определим фоновое изображение для каждого элемента ссылки. С помощью удобного селектора атрибутов мы можем указать конкретный элемент. Смотрим на значение атрибута href и определяем изображение: 01 /* Основные пункты */ 02 .cn-slide nav a[href="#slide-1"]{ 03 background-image: url(../images/1.jpg); 04 } 05 .cn-slide nav a[href="#slide-2"]{ 06 background-image: url(../images/2.jpg); 07 } 08 .cn-slide nav a[href="#slide-3"]{ 09 background-image: url(../images/3.jpg); 10 } 11 12 /* Пункты и подпункты для слайда 1*/ 13 .cn-slide nav a[href="#slide-1-1"], 14 #slide-1-1 .cn-content { 15 background-image: url(../images/4.jpg); 16 } 17 .cn-slide nav a[href="#slide-1-2"], 18 #slide-1-2 .cn-content { 19 background-image: url(../images/5.jpg); 20 } 21 .cn-slide nav a[href="#slide-1-3"], 22 #slide-1-3 .cn-content { 23 background-image: url(../images/6.jpg); 24 } 25 .cn-slide nav a[href="#slide-1-4"], 26 #slide-1-4 .cn-content { 27 background-image: url(../images/7.jpg); 28 } 29 30 /* Пункты и подпункты для слайда 2*/ 31 .cn-slide nav a[href="#slide-2-1"], 32 #slide-2-1 .cn-content { 33 background-image: url(../images/8.jpg); 34 } 35 .cn-slide nav a[href="#slide-2-2"], 36 #slide-2-2 .cn-content { 37 background-image: url(../images/9.jpg); 38 } 39 .cn-slide nav a[href="#slide-2-3"], 40 #slide-2-3 .cn-content { 41 background-image: url(../images/10.jpg); 42 } 43 .cn-slide nav a[href="#slide-2-4"], 44 #slide-2-4 .cn-content { 45 background-image: url(../images/11.jpg); 46 } 47 48 /* Пункты и подпункты для слайда 3*/ 49 .cn-slide nav a[href="#slide-3-1"], 50 #slide-3-1 .cn-content { 51 background-image: url(../images/12.jpg); 52 } 53 .cn-slide nav a[href="#slide-3-2"], 54 #slide-3-2 .cn-content { 55 background-image: url(../images/13.jpg); 56 } 57 .cn-slide nav a[href="#slide-3-3"], 58 #slide-3-3 .cn-content { 59 background-image: url(../images/14.jpg); 60 } 61 .cn-slide nav a[href="#slide-3-4"], 62 #slide-3-4 .cn-content { 63 background-image: url(../images/15.jpg); 64 } В завершение определяем несколько медиа запросов для формирования шаблона на маленьких размерах экрана. Лучше всего определить точки разлома шаблона и установить для них правила изменения. В нашем случае таких точек две: 1060 px и 900 px. Изменим размер шрифта, а в подслайдах дуем использовать только один элемент в строке. 01 @media screen and (max-width: 1060px){ 02 .cn-slide-sub nav a{ 03 font-size: 28px; 04 } 05 } 06 @media screen and (max-width: 900px){ 07 .cn-container h2{ 08 font-size: 48px; 09 line-height: 95px; 10 } 11 .cn-slide nav a{ 12 font-size: 38px; 13 } 14 .cn-slide-sub nav a{ 15 width: auto; 16 font-size: 36px; 17 display: block; 18 } 19 .cn-slide-sub nav a:nth-child(odd){ 20 margin-right: 0px; 21 } 22 } Готово!