Полноэкранная pop-out навигация

demosourse

В данном примере мы представим навигацию, которая раскрывается на весь экран пользователя.

Становится модным не отображать всю навигацию сайта целиком. Всё чаще владельцы сайтов отображают лишь несколько важных элементов, которым стоит уделить первоначальное внимание, а всю остальную навигацию сайта отображают при клике по соответствующему элементу.

Структура

Мы создали элемент <header>, где поместим логотип, вторичную навигацию, а так же кнопку для отображения первичной навигации (.cd-primary-nav-trigger). Само содержимое вторичной навигации будет находиться вне элемента header, что позволит в полной мере применить CSS трансформации. Первичная и вторичная навигация будут представлены в виде ненумерованных списков, помещённых в элемент <nav>.

<header class="cd-header">
	<div class="cd-logo"><!-- ... --></div>

	<nav>
		<ul class="cd-secondary-nav">
			<li><a href="#0">Log In</a></li>
			<li><a href="#0">Register</a></li>
		</ul>
	</nav> <!-- cd-nav -->

	<a class="cd-primary-nav-trigger" href="#0">
		<span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span>
	</a> <!-- cd-primary-nav-trigger -->
</header>

<nav>
	<ul class="cd-primary-nav">
		<li class="cd-label">About us</li>

		<li><a href="#0">The team</a></li>
		<li><a href="#0">Our services</a></li>
		<li><a href="#0">Our projects</a></li>
		<li><!-- ... --></li>
	</ul>
</nav>

<main>
	<!-- content -->
</main>

Стили

По умолчанию навигация скрыта от пользовательского взгляда (translateY(-100%)). При клике по элементу (.cd-primary-nav-trigger), через jQuery добавим навигации класс .is-visible.

.cd-primary-nav {
  /* by default it's hidden - on top of the viewport */
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transform: translateY(-100%);
  transition-property: transform;
  transition-duration: 0.4s;
}

.cd-primary-nav.is-visible {
  transform: translateY(0);
}

При прокрутке страницы снизу-вверх мы хотим отобразить шапку с навигацией — для этого нужно будет создать ещё парочку классов и поработать с ними через jQuery. По умолчанию header позиционируется абсолютно: прокручивается вместе с контентом (что позволяет создать фоновое изображение). Как только шапка скрывается из области видимости, мы добавляем ей класс .is-fixed class, что сменит его позиционирование на fixed, и поместит чуть выше области видимости (top: -80px). Как только пользователь будет двигаться к началу страницы будет применено свойство (translate3d(0, 100%, 0)).

.cd-header {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  height: 80px;
  width: 100%;
  transition: background-color 0.3s;
}

.cd-header.is-fixed {
  position: fixed;
  top: -80px;
  background-color: rgba(2, 23, 37, 0.96);
  transition: transform 0.3s;
}

.cd-header.is-visible {
  transform: translate3d(0, 100%, 0);
}

Обработка событий

Нам нужно научиться определять в каком направлении двигается пользователь:

$(window).on('scroll',
	{
	    previousTop: 0
	},
	function () {
	    var currentTop = $(window).scrollTop();
	    //если пользователь двигается вверх
	    if (currentTop < this.previousTop ) {
	    	//добавляем класс 'is-visible' основной навигации
	    } else {
	    	//прокрутка вниз...
	    	//добавляем класс 'is-fixed' основной навигации
	    	//добавляем класс 'is-visible' основной навигации
	    }
	    this.previousTop = currentTop;
	}
);

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/full-screen-pop-out-navigation/
Перевел: Станислав Протасевич
Урок создан: 18 Марта 2016
Просмотров: 6945
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^