Переходы между разделами страницы с использованием CSS3

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

Разметка HTML

Код HTML содержит пять основных разделов: заголовок и четыре секции с содержанием. Каждая секция содержания будет иметь ID и класс panel. Также мы добавим еще один раздел с классом content внутрь секции. Первая секция #home будет иметь класс content без дополнительного раздела:

Code
<!-- Главная -->
<div id="home" class="content">
  <h2>Главная</h2>
  <p>Содержание</p>
  <!-- ... -->
</div>
<!-- /Главная -->
   
<!-- Портфолио-->
<div id="portfolio" class="panel">
  <div class="content">
  <h2>Портфолио</h2>
  <p>Содержание</p>
  <!-- ... -->
  </div>
</div>
<!-- /Портфолио -->
   
<!-- Описание -->
<div id="about" class="panel">
  <div class="content">
  <h2>Описание</h2>
  <p>Содержание</p>
  <!-- ... -->
  </div>
</div>
<!-- /Описание -->
   
<!-- Контакт -->
<div id="contact" class="panel">
  <div class="content">
  <h2>Контакт</h2>
  <p>Содержание</p>
  <!-- ... -->
  </div>
</div>
<!-- /Контакт -->



В заголовке будет размещаться описание и навигация:

Code
<!-- Загловок с навигацией -->
<div id="header">
  <h1>Переходы между страницами на CSS3</h1>
  <ul id="navigation">
  <li><a id="link-home" href="#home">Главная</a></li>
  <li><a id="link-portfolio" href="#portfolio">Портфолио</a></li>
  <li><a id="link-about" href="#about">Описание</a></li>
  <li><a id="link-contact" href="#contact">Контакт</a></li>
  </ul>
</div>


Причина, по которой такая "неупорядоченная" структура размещается в конце, заключается в том, что навигация становится доступной с помощью общего селектора соседей (~) и можно устанавливать свой цвет для каждого пункта.

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

CSS

Сначала зададим стили для заголовка и навигации. Нужно сохранять их положение в одной точке, хотя все остальное будет двигаться.

Code
#header{
  position: absolute;
  z-index: 2000;
  width: 235px;
  top: 50px;
}
#header h1{
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
  padding: 20px;
  background: #000;
}
#navigation {
  margin-top: 20px;
  width: 235px;
  display:block;
  list-style:none;
  z-index:3;
}
#navigation a{
  color: #444;
  display: block;
  background: #fff;
  background: rgba(255,255,255,0.9);
  line-height: 50px;
  padding: 0px 20px;
  text-transform: uppercase;
  margin-bottom: 6px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  font-size: 14px;
}
#navigation a:hover {
  background: #ddd;
}


Для того, чтобы изменить цвет текущего элемента навигации будем использовать псевдо-класс :target с общим селектором соседей, чтобы получить соответствующий пункт:

Code
#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
  background: #000;
  color: #fff;
}


Готово!

  • FalleN

  • 2829

  • 1

  • 212
Теги: css3, Переходы

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!