%d0%bd%d0%b0%d0%b2%d0%b8%d0%b3%d0%b0%d1%86%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d1%81%d0%b0%d0%b9%d1%82%d0%b0-%d0%bf%d1%80%d0%b8-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d0%b8-css3-%d0%b8-jsНесколько недель назад ресурс stripe.com запустил новый дизайн сайта. Ресурс получился, по нашему мнению, удивительным. Одна особенность,которая первая нам бросилась в глаза, это морфинг выпадающей навигации. Вместо того , чтобы скрывать, а затем показывать новый выпадающий "контейнер"  пользователю предлагается переключается с одного элемента навигации к другому,при помощи анимации и плавного изменения контента во вкладке. Пользователю не нужно нажимать на навигацию, ему достаточно навести курсор.

 

Мы решили, что было бы интересно, показать и объяснить вам, каким образом достигается этот эффект, поэтому мы создали нашу собственную версию Stripe навигации.

Шаг 1. HTML

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

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

%d0%bd%d0%b0%d0%b2%d0%b8%d0%b3%d0%b0%d1%86%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d1%81%d0%b0%d0%b9%d1%82%d0%b0-%d1%81-%d0%b0%d0%bd%d0%b8%d0%bc%d0%b0%d1%86%d0%b8%d0%b5%d0%b9-%d0%b8-%d0%bc%d0%be%d1%80%d1%84

Шаг 2. СSS

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

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

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

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

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

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

Шаг 3. jQuery

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

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

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

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

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

Читайте также: