29 дек 2016
Навигация для сайта на CSS3 и JS
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Навигация для сайта на CSS3 и JS

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Навигация для сайта на CSS3 и JS

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



Шаг 1. HTML

HTML структура состоит из двух основных элементов: nav.main-nav, для верхних элементов навигации и div.morph-dropdown-wrapper. Для каждого элемента списка в элементах nav.main-nav и li.dropdown создается .morph-dropdown-wrapper.

<header class="cd-morph-dropdown">
<a href="#0" class="nav-trigger">Открыть навигацию<span aria-hidden="true"></span></a>
<nav class="main-nav">
<ul>
<li class="has-dropdown gallery" data-content="about">
<a href="#0">О нас</a>
</li></p>
<li class="has-dropdown links" data-content="pricing">
<a href="#0">Работа</a>
</li>

<li class="has-dropdown button" data-content="contact">
<a href="#0">О Нас</a>
</li>
</ul>
</nav>
<div class="morph-dropdown-wrapper">
<div class="dropdown-list">
<ul>
<li id="about" class="dropdown gallery">
</li>

<li id="pricing" class="dropdown links">
</li>

<li id="contact" class="dropdown button">
</li>
</ul>
<div class="bg-layer" aria-hidden="true"></div>
</div>
</div>
</header>


Дополнительным классом стал div.bg-layer, который был создан внутри div.morph-dropdown-wrapper и используется для создания фона выпадающей навигации.


Шаг 2. СSS

На небольших устройствах правило div.morph-dropdown-wrapper будет скрыто по умолчанию; когда пользователь нажимает на значок меню, то .nav-open класс добавляется к .cd-morph-dropdown, чтобы раскрыть навигацию.

.cd-morph-dropdown {
position: relative;
}
.cd-morph-dropdown .morph-dropdown-wrapper {
display: none;
position: absolute;
top: 60px;
left: 0;
width: 100%;
}
.cd-morph-dropdown.nav-open .morph-dropdown-wrapper {
display: block;
}


На больших устройствах (если экран более 1000px в ширине), то .dropdown-list и li.dropdown элементы скрыты по умолчанию.

@media only screen and (min-width: 1000px) {
.cd-morph-dropdown .dropdown-list {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
.cd-morph-dropdown .dropdown {
position: absolute;
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
width: 100%;
transition: opacity .3s, visibility .3s;
}
}


Когда пользователь водит курсором над одним из элементов внутри класса nav.main-nav, то .is-dropdown-visible класс добавляется к .cd-morph-dropdown и .dropdown-list элементы становятся видимыми. На данный момент, выпадающая часть видна, но его содержание до сих пор скрыты.

Для того, чтобы выявить контент ,выбранный пользователем, класс .active добавляется к выбранному li.dropdown элементу (с идентификатором , равным данным содержанием навигационного элемента когда пользователь водит курсором над ним).

@media only screen and (min-width: 1000px) {
.cd-morph-dropdown .dropdown.active {
opacity: 1;
visibility: visible;
}
}


Чтобы создать раскрывающейся фон, мы используем div.bg-layer. Он имеет абсолютную позицию, ширину и высоту , равную высоте 1px и непрозрачность нуля. Когда .is-dropdown-visible класс добавляется к .cd-morph-dropdown его непрозрачность изменяется на один и масштабируется вверх ( с использованием JavaScrip) , чтобы соответствовать видимой область содержимого.

@media only screen and (min-width: 1000px) {
.cd-morph-dropdown .bg-layer {
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 1px;
background: #FFFFFF;
opacity: 0;
transition: opacity .3s;
transform-origin: top left;
}
.cd-morph-dropdown.is-dropdown-visible .bg-layer {
opacity: 1;
transition: transform .3s, opacity .3s;
}
}


Когда пользователь переходит от одного элемента навигации к другому, то Scalex и значения ScaleY из div.bg-layer изменяются ( с помощью javascript) для создания эффекта морфинга.


Шаг 3. jQuery


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

function morphDropdown( element ) {
this.element = element;
this.mainNavigation = this.element.find('.main-nav');
this.mainNavigationItems = this.mainNavigation.find('.has-dropdown');
this.dropdownList = this.element.find('.dropdown-list');
this.bindEvents();
}


bindEvents Метод используется для обнаружения MouseEnter / MouseLeave событий на .has-dropdown и .dropdown элементов.

morphDropdown.prototype.bindEvents = function() {
var self = this;
this.mainNavigationItems.mouseenter(function(event){
self.showDropdown($(this));
}).mouseleave(function(){
if( self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) self.hideDropdown();
});
};


Метод showDropdown позаботится об изменении значения высоты, ширины и translateX для .dropdown-list и масштабирования вверх / вниз элемента .bg-layer.

morphDropdown.prototype.showDropdown = function(item) {
var selectedDropdown = this.dropdownList.find('#'+item.data('content')),
selectedDropdownHeight = selectedDropdown.innerHeight(),
selectedDropdownWidth = selectedDropdown.children('.content').innerWidth(),
selectedDropdownLeft = item.offset().left + item.innerWidth()/2 - selectedDropdownWidth/2;

};
morphDropdown.prototype.updateDropdown = function(dropdownItem, height, width, left) {
this.dropdownList.css({
'-moz-transform': 'translateX(' + left + 'px)',
'-webkit-transform': 'translateX(' + left + 'px)',
'-ms-transform': 'translateX(' + left + 'px)',
'-o-transform': 'translateX(' + left + 'px)',
'transform': 'translateX(' + left + 'px)',
'width': width+'px',
'height': height+'px'
});
this.dropdownBg.css({
'-moz-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
'-webkit-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
'-ms-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
'-o-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
'transform': 'scaleX(' + width + ') scaleY(' + height + ')'
});
};


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

Вот и все. Готово!

Скачивание файлов доступно только зарегистрированным пользователям









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.