Переходы между разделами страницы с использованием CSS3
В последнее время увеличивается количество одностраничных сайтов. которые используют JavaScript для формирования различных эффектов для переходов между разделами. В данном уроке мы рассмотрим как построить такой шаблон, но будем использовать средства CSS для формирования перехода между разделами.
Разметка HTML
Код HTML содержит пять основных разделов: заголовок и четыре секции с содержанием. Каждая секция содержания будет иметь ID и класс panel. Также мы добавим еще один раздел с классом content внутрь секции. Первая секция #home будет иметь класс content без дополнительного раздела:
<!-- Главная --> <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> <!-- /Контакт -->
В заголовке будет размещаться описание и навигация:
<!-- Загловок с навигацией --> <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
Сначала зададим стили для заголовка и навигации. Нужно сохранять их положение в одной точке, хотя все остальное будет двигаться.
#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; }
Все секции, кроме #home, имеют класс panel. Здесь будет использоваться переход, когда элемент получает класс “targeted”. Трюк заключается в использовании отрицательного значения для поля в классе “normal” и отказ от поля в псевдо-классе :target. Добавлением перехода мы заставляем панель выскальзывать сверху, когда ее выбирают:
.panel{ min-width: 100%; height: 98%; overflow-y: auto; overflow-x: hidden; margin-top: -150%; position: absolute; background: #000; box-shadow: 0px 4px 7px rgba(0,0,0,0.6); z-index: 2; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .panel:target{ margin-top: 0%; background-color: #ffcb00; }
Теперь определим стиль класса content:
.content{ right: 40px; left: 280px; top: 0px; position: absolute; padding-bottom: 30px; } .content h2{ font-size: 110px; padding: 10px 0px 20px 0px; margin-top: 52px; color: #fff; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); } .content p{ font-size: 18px; padding: 10px; line-height: 24px; color: #fff; display: inline-block; background: black; padding: 10px; margin: 3px 0px; }
Для того, чтобы изменить цвет текущего элемента навигации будем использовать псевдо-класс :target с общим селектором соседей, чтобы получить соответствующий пункт:
#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; }
Готово!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/UChrUPzUlvI/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.