Автор

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

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


Фиксированная навигация, которая позволяет вашим пользователям получать доступ к меню в любое время, пока они испытывают ваш веб-сайт. Он меньше фиксированного заголовка полной ширины и заменяет кнопку «назад к началу» более умным решением 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
		}
	} 
}

 

Вот и всё!


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



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

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

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


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

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

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


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

Если вы решили использовать защищенный протокол на страницах своего сайта, вы молодец. Используя HTTPS-соединение, вы заботитесь о конфиденциальности данных своих пользователей.


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close