Автор

Умная фиксированная навигация

Умная фиксированная навигация


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

 

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

 

Веб-страницы с большим количеством контента требуют быстрого доступа к пользователю, чтобы вернуться к началу, где навигация (в большинстве случаев). Отсюда старая кнопка «назад к началу». Но почему пользователь должен прокручивать назад вверх, если мы сможем сделать навигацию доступной в любое время прямо там, где должна быть кнопка «назад к вершине»? Нет причин в 90% случаев. Для остальных 10% мы все еще покрыты, так как мы создали как фиксированный самозахват заголовка, так и фрагмент back-to-top ;)

 

Создание структуры

Структура проста: навигация и ее «триггер» находятся внутри одного и того же #cd-nav div. <span> внутри тега привязки .cd-nav-trigger будет использоваться для создания значка меню только с помощью CSS.

<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 от 0 до 1 - с переходом CSS3, чтобы сгладить преобразование.

#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;
}

Когда область просмотра больше 1170 пикселей, мы меняем положение навигации с фиксированного на абсолютный, и мы перемещаем его вверх. Когда пользователь прокручивается вниз, мы используем 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.

// browser window scroll (in pixels) after which the "menu" link is shown
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')) {
		//add .is-fixed class to #cd-nav 
		//wait for the animation to end  
		//add the .has-transitions class to main navigation (used to bring back transitions)
	} else if ($(window).scrollTop() <= offset) {
		
		//check if the menu is open when scrolling up - for browser that supports transition
		if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
			//close the menu 
			//wait for the transition to end 
			//remove the .is-fixed class from the #cd-nav and the .has-transitions class from main navigation
		} 
 
		//check if the menu is open when scrolling up - fallback if transitions are not supported
		else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
			//no need to wait for the end of transition - close the menu and remove the .is-fixed class from the #cd-nav
		} 
 
		//scrolling up with menu closed
		else {
			//remove the .is-fixed class from the #cd-nav and the .has-transitions class from main navigation
		}
	} 
}

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Умная фиксированная навигация

Сегодня мы решили подготовить хорошиую css3 галерею. Без использования javascript. Да, да, вы правильно поняли. Сегодня мы не будем использовать скрипты. Это будет чистая CSS3 фото галерея. Фотографии в галерее будет увеличиваться, если мы будем нажимать на них мышью.


Умная фиксированная навигация

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


Умная фиксированная навигация

Буквально перед новым годом задался целью автоматизировать свой сайт, а именно сделать так чтобы с 15 декабря до 15 января работал один стиль CSS, а в остальное время другой!


Умная фиксированная навигация

Форма поиска с расширенными параметрами фильтрации и быстрыми ссылками.


75 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close