3D-навигация на CSS3 и jQuery

Смелая навигация, слайд-шоу, когда активна, заменяет текущий контент в трехмерном пространстве.

 

ДЕМО
ИСХОДНИКИ

 

Сегодняшний ресурс - это сильный подход к показу навигации по сайту. Однако имейте в виду, что это не должно быть «основной» навигацией. Например, вы могли бы иметь галерею продуктов, и вы хотели бы создать плавный переход при переходе из одной категории продукта в другую.

Чтобы увеличить фокус на меню, мы нажали основное содержимое вдоль оси 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, чтобы правильно обрабатывать ошибки, запрос Отправить и т. д. В соответствии с вашим проектом.

 

Вот и всё!


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!