Фиксированная навигация

demosourse

Фиксированная навигация, которой пользователь сможет воспользоваться в любое время. Замена навигационной кнопке “Наверх”.

Удобство пребывания на крупных сайтах зависит от многих вещей, в том числе и от возможности быстро перейти в тот или иной раздел. Кнопка “наверх” какое-то время была решением. Вопрос: зачем пользователю отправлять к навигации на самый верх страницы, если он сможет до неё достучаться прямо из того места где находится?

Графическое представление идеи:

Структура

Навигацию помещаем в блок #cd-nav. Внутри <span> помещаем ссылку .cd-nav-trigger, которую задействуем для раскрытия навигации.

<header><!-- ... --></header>
<div id="cd-nav">
	<a href="#0" class="cd-nav-trigger">Menu<span></span></a>

	<nav id="cd-main-nav">
		<ul>
			<li><a href="#0">Homepage</a></li>
			<li><a href="#0">Services</a></li>
			<li><a href="#0">Portfolio</a></li>
			<li><a href="#0">Pricing</a></li>
			<li><a href="#0">Contact</a></li>
		</ul>
	</nav>
</div>
<main><!-- content here --></main>

Стили

Для мобильных устройств: зададим position: fixed ненумерованному списку внутри блока навигации #cd-nav. Данный элемент должен размещаться в нижнем правом углу страницы. При прикосновении или клике по .cd-nav-trigger прикрепляем класс .is-visible, который сменит значение свойства CSS3 Scale с 0 на 1 – а так же применит трансформацию.

#cd-nav ul {
  /* mobile first */
  position: fixed;
  width: 90%;
  max-width: 400px;
  right: 5%;
  bottom: 20px;
  visibility: hidden;
  overflow: hidden;
  z-index: 1;

  transform: scale(0);
  transform-origin: 100% 100%;
  transition: transform 0.3s, visibility 0s 0.3s;
}

#cd-nav ul.is-visible {
  visibility: visible;
  transform: scale(1);
  transition: transform 0.3s, visibility 0s 0s;
}

.cd-nav-trigger {
  position: fixed;
  bottom: 20px;
  right: 5%;
  width: 44px;
  height: 44px;

  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  z-index: 2;
}

На разрешений экрана свыше 1170px, сменим позицию навигации с фиксированного типа на абсолютный и поместим выше. При прокрутке страницы, воспользуемся jQuery для добавления класа .is-fixed элементу #cd-nav, сместив навигационный блок вправо – такой же эффект и для тач-устройств.

@media only screen and (min-width: 1170px) {
  #cd-nav ul {
    /* the navigation moves to the top */
    position: absolute;
    width: auto;
    max-width: none;
    bottom: auto;
    top: 36px;
    visibility: visible;
    transform: scale(1);
    transition: all 0s;
  }

  #cd-nav.is-fixed ul {
    position: fixed;
    width: 90%;
    max-width: 400px;
    bottom: 20px;
    top: auto;
    visibility: hidden;
    transform: scale(0);
  }
}

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

Определяем переменную для добавления/удаления класса .is-fixed элементу #cd-nav.

var offset = 300;

Функция checkMenu() будет отвечать за поведение основной навигации при прокрутке страницы:

var navigationContainer = $('#cd-nav'),
	mainNavigation = navigationContainer.find('#cd-main-nav ul');

$(window).scroll(function(){
	checkMenu();
});

function checkMenu() {

	if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
		//добавляем класс .is-fixed элементу #cd-nav
		//ждём окончания анимации
		//добавляем класс .has-transitions основной навигации
	} else if ($(window).scrollTop() <= offset) {

		//проверяем раскрыто ли меню при прокрутке вверх (если в браузере доступна анимация)
		if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
			//закрываем навигацию
			//ждём окончания навигации
			//убираем класс .is-fixed с элемента #cd-nav and
		}

		//проверяем раскрыто ли меню при прокрутке вверх (если в браузере не доступна анимация)
		else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
		}

		//прокрутка вверх, меню закрыто
		else {
			//убираем класс .is-fixed с формы #cd-nav и класс .has-transitions с основной навигации
		}
	}
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/smart-fixed-navigation/
Перевел: Станислав Протасевич
Урок создан: 28 Февраля 2016
Просмотров: 9547
Правила перепечатки

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

^ Наверх ^