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

demosourse

В данном примере навигация второго уровня предназначена для быстрого перехода по различным секциям страницы.

Структура

Мы поместили интро-изображение и другие элементы в секцию section#cd-intro.

Сама навигация будет представлена в виде ненумерованного списка с классом .cd-secondary-nav. Весь остальной контент помещён в элемент .cd-main-content.

<section id="cd-intro">
	<div id="cd-intro-tagline">
		<h1><!-- your tagline here --></h1>
		<a href="#0" class="cd-btn"><!-- your action button text here --></a>
	</div>
</section>

<div class="cd-secondary-nav">
	<a href="#0" class="cd-secondary-nav-trigger">Menu<span></span></a> <!-- button visible on small devices -->
	<nav>
		<ul>
			<li>
				<a href="#cd-placeholder-1">
					<b>Services</b>
					<span></span><!-- icon -->
				</a>
			</li>
			<!-- other items here -->
		</ul>
	</nav>
</div> <!-- .cd-secondary-nav -->
<main class="cd-main-content">
	<section id="cd-placeholder-1" class="cd-section cd-container">
		<!-- your section content here-->
	</section> <!-- #cd-placeholder-1 -->

	<section id="cd-placeholder-2" class="cd-section cd-container">
		<!-- your section content here-->
	</section> <!-- #cd-placeholder-2 -->

	<!-- other sections here -->
</main> <!-- .cd-main-content -->

Стили

Поскольку мы хотим добиться адаптивности, то изначально нашему списку .cd-secondary-nav назначим position: fixed и поместим в нижний левый угол. При нажатии по .cd-secondary-nav-trigger, добавим класс .is-visible, изменив свойство scale с 0 на 1.

Если размер экрана будет выше 1170px, спрячем .cd-secondary-nav-trigger и поменяем позиционирования списка с fixed на static.

.cd-secondary-nav ul {
  position: fixed;
  right: 5%;
  bottom: 20px;
  visibility: hidden;
  transform: scale(0);
  transform-origin: 100% 100%;
  transition: transform 0.3s, visibility 0s 0.3s;
}
.cd-secondary-nav ul.is-visible {
  visibility: visible;
  transform: scale(1);
  transition: transform 0.3s, visibility 0s 0s;
}

@media only screen and (min-width: 1170px) {
  .cd-secondary-nav ul {
    /* reset navigation values */
    position: static;
    width: auto;
    max-width: 100%;
    visibility: visible;
    transform: scale(1);
  }
}

.cd-secondary-nav-trigger {
  position: fixed;
  bottom: 20px;
  right: 5%;
  width: 44px;
  height: 44px;
}
@media only screen and (min-width: 1170px) {
  .cd-secondary-nav-trigger {
    display: none;
  }
}

Как только из поля зрения страницы исчезнет элемент section#cd-intro, то мы добавляем класс .is-fixed элементу .cd-secondary-nav. Так же для анимации добавим класс .animate-children.

@media only screen and (min-width: 1170px) {
  .cd-secondary-nav.is-fixed {
    position: fixed;
    left: 0;
    top: 0;
    height: 70px;
    width: 100%;
  }
  .cd-secondary-nav li a {
    padding: 58px 40px 0 40px;
    transition: padding 0.2s;
  }
  .cd-secondary-nav li a span {
    transition: opacity 0.2s;
  }
  .cd-secondary-nav.animate-children li a {
    padding: 26px 30px 0 30px;
  }
  .cd-secondary-nav.animate-children li a span {
    opacity: 0;
  }
}

Тут же мы не хотим терять из виду логотип. Для этого определим несколько классов: .is-hidden и .slide-in (один добавляется, если пользователь будет ниже элемента #cd-intro-tagline; второй выше .cd-secondary-nav).

@media only screen and (min-width: 1170px) {
  #cd-logo.is-hidden {
    opacity: 0;
    position: fixed;
    left: -20%;
    transition: left 0.3s, opacity 0.3s;
  }
  #cd-logo.is-hidden.slide-in {
    /* slide in when the secondary navigation gets fixed */
    left: 5%;
    opacity: 1;
  }

  .cd-btn.is-hidden {
    /* assign a position fixed and move outside the viewport (on the right) */
    opacity: 0;
    position: fixed;
    right: -20%;
    transition: right 0.3s, opacity 0.3s;
  }
  .cd-btn.is-hidden.slide-in {
    /* slide in when the secondary nav gets fixed */
    right: 5%;
    opacity: 1;
  }
}

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

При прокрутке страницы, меняем позиционирование навигации, путём добавления класса .is-fixed. Анимация обеспечивается путём добавления класса .animate-children.

var secondaryNav = $('.cd-secondary-nav'),
	secondaryNavTopPosition = secondaryNav.offset().top;

$(window).on('scroll', function(){

	if($(window).scrollTop() > secondaryNavTopPosition ) {
		secondaryNav.addClass('is-fixed');
		setTimeout(function() {
            secondaryNav.addClass('animate-children');
            $('#cd-logo').addClass('slide-in');
			$('.cd-btn').addClass('slide-in');
        }, 50);
	} else {
		secondaryNav.removeClass('is-fixed');
		setTimeout(function() {
            secondaryNav.removeClass('animate-children');
            $('#cd-logo').removeClass('slide-in');
			$('.cd-btn').removeClass('slide-in');
        }, 50);
	}
});

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

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

^ Наверх ^