В последнее время увеличивается количество одностраничных сайтов. которые используют JavaScript для формирования различных эффектов для переходов между разделами. В данном уроке мы рассмотрим как построить такой шаблон, но будем использовать средства CSS для формирования перехода между разделами. Разметка HTML Код HTML содержит пять основных разделов: заголовок и четыре секции с содержанием. Каждая секция содержания будет иметь ID и класс panel. Также мы добавим еще один раздел с классом content внутрь секции. Первая секция #home будет иметь класс content без дополнительного раздела: 01 <!-- Главная --> 02 <div id="home" class="content"> 03 <h2>Главная</h2> 04 <p>Содержание</p> 05 <!-- ... --> 06 </div> 07 <!-- /Главная --> 08 09 <!-- Портфолио--> 10 <div id="portfolio" class="panel"> 11 <div class="content"> 12 <h2>Портфолио</h2> 13 <p>Содержание</p> 14 <!-- ... --> 15 </div> 16 </div> 17 <!-- /Портфолио --> 18 19 <!-- Описание --> 20 <div id="about" class="panel"> 21 <div class="content"> 22 <h2>Описание</h2> 23 <p>Содержание</p> 24 <!-- ... --> 25 </div> 26 </div> 27 <!-- /Описание --> 28 29 <!-- Контакт --> 30 <div id="contact" class="panel"> 31 <div class="content"> 32 <h2>Контакт</h2> 33 <p>Содержание</p> 34 <!-- ... --> 35 </div> 36 </div> 37 <!-- /Контакт --> В заголовке будет размещаться описание и навигация: 01 <!-- Загловок с навигацией --> 02 <div id="header"> 03 <h1>Переходы между страницами на CSS3</h1> 04 <ul id="navigation"> 05 <li><a id="link-home" href="#home">Главная</a></li> 06 <li><a id="link-portfolio" href="#portfolio">Портфолио</a></li> 07 <li><a id="link-about" href="#about">Описание</a></li> 08 <li><a id="link-contact" href="#contact">Контакт</a></li> 09 </ul> 10 </div> Причина, по которой такая "неупорядоченная" структура размещается в конце, заключается в том, что навигация становится доступной с помощью общего селектора соседей (~) и можно устанавливать свой цвет для каждого пункта. Основная идея заключается в использовании псевдо-класса :target для того, чтобы организовать переход к текущей секции. В описанном примере используется выскальзывание панелей сверху. В демонстрации построено еще два разных эффекта перехода. CSS Сначала зададим стили для заголовка и навигации. Нужно сохранять их положение в одной точке, хотя все остальное будет двигаться. 01 #header{ 02 position: absolute; 03 z-index: 2000; 04 width: 235px; 05 top: 50px; 06 } 07 #header h1{ 08 font-size: 30px; 09 font-weight: 400; 10 text-transform: uppercase; 11 color: rgba(255,255,255,0.9); 12 text-shadow: 0px 1px 1px rgba(0,0,0,0.3); 13 padding: 20px; 14 background: #000; 15 } 16 #navigation { 17 margin-top: 20px; 18 width: 235px; 19 display:block; 20 list-style:none; 21 z-index:3; 22 } 23 #navigation a{ 24 color: #444; 25 display: block; 26 background: #fff; 27 background: rgba(255,255,255,0.9); 28 line-height: 50px; 29 padding: 0px 20px; 30 text-transform: uppercase; 31 margin-bottom: 6px; 32 box-shadow: 1px 1px 2px rgba(0,0,0,0.2); 33 font-size: 14px; 34 } 35 #navigation a:hover { 36 background: #ddd; 37 } Все секции, кроме #home, имеют класс panel. Здесь будет использоваться переход, когда элемент получает класс “targeted”. Трюк заключается в использовании отрицательного значения для поля в классе “normal” и отказ от поля в псевдо-классе :target. Добавлением перехода мы заставляем панель выскальзывать сверху, когда ее выбирают: 01 .panel{ 02 min-width: 100%; 03 height: 98%; 04 overflow-y: auto; 05 overflow-x: hidden; 06 margin-top: -150%; 07 position: absolute; 08 background: #000; 09 box-shadow: 0px 4px 7px rgba(0,0,0,0.6); 10 z-index: 2; 11 -webkit-transition: all .8s ease-in-out; 12 -moz-transition: all .8s ease-in-out; 13 -o-transition: all .8s ease-in-out; 14 transition: all .8s ease-in-out; 15 } 16 .panel:target{ 17 margin-top: 0%; 18 background-color: #ffcb00; 19 } Теперь определим стиль класса content: 01 .content{ 02 right: 40px; 03 left: 280px; 04 top: 0px; 05 position: absolute; 06 padding-bottom: 30px; 07 } 08 .content h2{ 09 font-size: 110px; 10 padding: 10px 0px 20px 0px; 11 margin-top: 52px; 12 color: #fff; 13 color: rgba(255,255,255,0.9); 14 text-shadow: 0px 1px 1px rgba(0,0,0,0.3); 15 } 16 .content p{ 17 font-size: 18px; 18 padding: 10px; 19 line-height: 24px; 20 color: #fff; 21 display: inline-block; 22 background: black; 23 padding: 10px; 24 margin: 3px 0px; 25 } Для того, чтобы изменить цвет текущего элемента навигации будем использовать псевдо-класс :target с общим селектором соседей, чтобы получить соответствующий пункт: 1 #home:target ~ #header #navigation #link-home, 2 #portfolio:target ~ #header #navigation #link-portfolio, 3 #about:target ~ #header #navigation #link-about, 4 #contact:target ~ #header #navigation #link-contact{ 5 background: #000; 6 color: #fff; 7 } Готово!