Смелая навигация, слайд-шоу, когда активна, заменяет текущий контент в трехмерном пространстве.
Сегодняшний ресурс - это сильный подход к показу навигации по сайту. Однако имейте в виду, что это не должно быть «основной» навигацией. Например, вы могли бы иметь галерею продуктов, и вы хотели бы создать плавный переход при переходе из одной категории продукта в другую.
Чтобы увеличить фокус на меню, мы нажали основное содержимое вдоль оси z (с помощью преобразований CSS мы фактически уменьшаем размер содержимого, мы не используем 3D-переводы, но результат тот же).
Интересное решение:
Когда вы выбираете новую категорию, мы переключаем содержимое в фоновом режиме, а затем переводим его обратно в исходное положение, скрывая навигацию.
Теперь давайте погрузимся в код!
Создание структуры
HTML структурирован в 3 основных элемента: .cd-nav-trigger
, используемый для создания значка меню, элемент .cd-section
, содержащий основное содержимое страницы и .cd-nav-container
для основной навигации.
<a href="#cd-nav" class="cd-nav-trigger">
Menu<span><!-- used to create the menu icon --></span>
</a> <!-- .cd-nav-trigger -->
<main>
<section class="cd-section index cd-selected">
<header>
<div class="cd-title">
<h2><!-- title here --></h2>
<p><!-- brief description here --></p>
</div> <!-- .cd-title -->
</header>
<div class="cd-content">
<!-- your content here -->
</div>
</section> <!-- .cd-section -->
</main>
<nav class="cd-nav-container" id="cd-nav">
<header>
<h3>Navigation</h3>
<a href="#0" class="cd-close-nav">Close</a>
</header>
<ul class="cd-nav">
<li class="cd-selected" data-menu="index">
<a href="index.html">
<span>
<!-- svg icon here -->
</span>
<em><!-- title here --></em>
</a>
</li>
<li data-menu="projects">
<!-- .... -->
</li>
<!-- other list items here -->
</ul> <!-- .cd-3d-nav -->
</nav>
Для создания теневого слоя используется дополнительный div.cd-overlay
, видимый только при активной навигации.
Добавление стиля
Чтобы реализовать нашу анимацию, мы использовали CSS3 Transformations, применяемые к элементам <main>
и <nav>
.
По умолчанию навигация имеет фиксированную позицию и переведена вправо, за пределы области просмотра (translateX(100%)
). Когда пользователь нажимает значок меню, класс .is-visible
добавляется к элементу <nav>
, который перемещается обратно в окно просмотра (translateX(0)
), а класс .scale-down
добавляется в элемент <main>
уменьшить масштаб (scale(.9)
). И, конечно же, мы использовали CSS3 Transitions для достижения плавной анимации!
.cd-nav-container {
position: fixed;
top: 0;
right: 0;
width: 80%;
height: 100%;
transform: translateX(100%);
transition: transform 0.4s;
}
.cd-nav-container.is-visible {
transform: translateX(0);
}
main {
transition: transform 0.4s;
}
main.scale-down {
transform: scale(0.9);
}
Когда пользователь выбирает элемент из навигации, создается новый элемент .cd-section
и добавляется в DOM (более подробная информация содержится в разделе «Обработка событий»).
Затем выбранному классу .cd-selected
присваивается этот новый вставленный элемент .cd-section
, в то время как он удаляется из старого .cd-section
(содержимое, которое первоначально отображается на странице). Таким образом, новый элемент раздела (который первоначально переведен вправо, вне области просмотра) перемещается назад (translateX(0)
), покрывая старый контент (z-index: 2
).
Одна заметка: во время этой анимации вы не видите, что старый раздел перемещается вправо (translateX(100%)
), потому что мы устанавливаем задержку перехода .cd-section
при преобразованиях (он будет двигаться после 0,4 с).
.cd-section {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0s 0.4s;
}
.cd-section.cd-selected {
position: relative;
z-index: 2;
transform: translateX(0);
transition: transform 0.4s 0s;
}
Обработка событий
Файл index.html содержит только содержимое «Intro». Для каждого раздела (projects.html, careers.html, ..) был создан другой html-файл с точно такой же структурой, но с другим содержимым .cd-section
.
Когда пользователь выбирает новый элемент из навигации, создается новый элемент <section>
и вставляется в функцию DOM loadNewContent
.
Функция load()
затем используется для загрузки содержимого конкретного раздела (мы использовали атрибут data-menu
, назначенный элементу списка навигации, чтобы определить загружаемый файл).
Когда новое содержимое html будет вставлено, мы назначим выбранный класс .cd-selected
и закроем навигацию.
$('.cd-nav li').on('click', function(event){
event.preventDefault();
var target = $(this),
//detect which section user has chosen
sectionTarget = target.data('menu');
if( !target.hasClass('cd-selected') ) {
//if user has selected a section different from the one alredy visible
//update the navigation -> assign the .cd-selected class to the selected item
target.addClass('cd-selected').siblings('.cd-selected').removeClass('cd-selected');
//load the new section
loadNewContent(sectionTarget);
} else {
// otherwise close navigation
toggleNav(false);
}
});
function loadNewContent(newSection) {
//create a new section element and insert it into the DOM
var section = $('').appendTo($('main'));
//load the new content from the proper html file
section.load(newSection+'.html .cd-section > *', function(event){
//add the .cd-selected to the new section element -> it will cover the old one
section.addClass('cd-selected').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//close navigation
toggleNav(false);
});
section.prev('.cd-selected').removeClass('cd-selected');
});
$('main').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//once the navigation is closed, remove the old section from the DOM
section.prev('.cd-section').remove();
});
if( $('.no-csstransitions').length > 0 ) {
//detect if browser supports transitions
toggleNav(false);
section.prev('.cd-section').remove();
}
}
Одно важное замечание:
Мы выполнили простую функцию load()
, чтобы загрузить новый html-контент, но вы можете заменить его правильным вызовом $ .ajax
, чтобы правильно обрабатывать ошибки, запрос Отправить и т. д. В соответствии с вашим проектом.