Автор

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

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


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

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


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

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

Меня зовут Сергей Целовальников, я являюсь руководителем студии «Studio Dtsign», в простонародье и в поисковых системах «Студия Целовальникова Сергея». Также я являюсь оффициальным партнером компании UMI.CMS в области разработки сайтов и веб дизайна, с богатым портфолио работ, созданных на этой системе управления сайтами.

О… UMI.CMS

Работа со многими бесплатными и иже с ними CMS-системами управления сайтов, коих я повидал немало до UMI, часто приходил к констатации фактов о наличии всяческих недостатков и пожинанию «плодов» бесплатного софта. И самый безобидный из них – «костность», негибкость, стандартная блочная систем и необходимость создания всех последующих страниц в единственном шаблоне дизайна сайта.......

 


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

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


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

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


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

Очередная выдвижная панель с любым необходимым для вас контентом! В примерах 3 варианта: фиксированная, выезжающая с лева и третья выезжающая с права. В исходных файлах есть все варианты СSS. Мы рассмотрим один с фиксированной кнопкой и панелью.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close