Эластичная навигация для сайта с помощью CSS3

Stats: 1381 1
Author: RUDEBOX
Category: Технології
Comments: Комментариев нет

Заказать рекламу: info@it-media.kiev.ua Звоните: +380934169249

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

HTML структура получилась довольно простой, класс nav.cd-stretchy-nav используется ,чтобы обернуть неупорядоченный список (содержащий элементы навигации) и a.cd-nav-trigger (значок меню). Дополнительный класс span.stretchy-nav-bg используется для создания эластичного фона.

&lt;nav class="cd-stretchy-nav"&gt;
&lt;a class="cd-nav-trigger" href="#0"&gt;
Меню
&lt;span aria-hidden="true"&gt;&lt;/span&gt;
&lt;/a&gt;</p>
&lt;ul&gt;
&lt;li&gt;&lt;a href="#0" class="active"&gt;&lt;span&gt;Домой&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#0"&gt;&lt;span&gt;Портфолио&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;!-- остальное содержание здесь --&gt;
&lt;/ul&gt;

&lt;span aria-hidden="true" class="stretchy-nav-bg"&gt;&lt;/span&gt;
&lt;/nav&gt;

Меню

</a>

<ul>

<li><a href="#0" class="active">Домой</a></li>

<li><a href="#0">Портфолио</a></li>

</ul>

</nav>

С разметкой не должно возникнуть проблем, если вы немного понимаете в HTML-разметке, так как в ней все просто и понятно, давайте перейдем к следующему шагу.

%d1%8d%d0%bb%d0%b0%d1%81%d1%82%d0%b8%d1%87%d0%bd%d0%b0%d1%8f-%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%bf%d0%be%d0%bc%d0%be

Шаг 2. CSS

Мы создали класс .cd-stretchy-nav, чтобы определить основной стиль для эластичной навигации. Затем мы использовали два дополнительных класса, .add-content и .edit-content, для настройки панелей инструментов и редактирования контента.

Основная идея анимации состоит в том, что мы присваиваем к классу span.stretchy-nav-bg фиксированную высоту и ширину; когда навигация открыта то мы используем класс .nav-is-visible, чтобы создать анимацию для высоты (или ширины, в случае со второй демонстрацией).

.cd-stretchy-nav {
position: fixed;
z-index: 2;
top: 40px;
right: 5%;
}
.cd-stretchy-nav .stretchy-nav-bg {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 60px;
height: 60px;
border-radius: 30px;
background: #9acd91;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
transition: height 0.2s, box-shadow 0.2s;
}
.cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {
height: 100%;
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}</span>

.cd-stretchy-nav {

position: fixed;

z-index: 2;

top: 40px;

right: 5%;

}

.cd-stretchy-nav .stretchy-nav-bg {

position: absolute;

z-index: 1;

top: 0;

right: 0;

width: 60px;

height: 60px;

border-radius: 30px;

background: #9acd91;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

transition: height 0.2s, box-shadow 0.2s;

}

.cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {

height: 100%;

box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);

}

Для пунктов навигации, мы определили две различные анимации CSS: scaleIn - для иконок пункта , и slideIn - для элементов содержания; свойство задержки используется для анимации разных дочерних элементов в разные моменты времени.

.cd-stretchy-nav ul {
position: relative;
z-index: 2;
visibility: hidden;
transition: visibility 0.3s;
}
.cd-stretchy-nav ul a {
position: relative;
}
.cd-stretchy-nav ul a::after {
/* навигация иконок */
content: '';
position: absolute;
height: 16px;
width: 16px;
transform: translateY(-50%) scale(0);
opacity: .6;
background: url(../img/cd-sprite-1.svg) no-repeat 0 0;
}
.cd-stretchy-nav ul span {
/* подпись для иконок */
display: block;
opacity: 0;
transform: translateX(-25px);
}</p>
.cd-stretchy-nav.nav-is-visible ul {
visibility: visible;
}
.cd-stretchy-nav.nav-is-visible ul a::after {
transform: translateY(-50%) scale(1);
animation: scaleIn 0.15s backwards;
}
.cd-stretchy-nav.nav-is-visible ul span {
opacity: 1;
transform: translateX(0);
animation: slideIn 0.15s backwards;
}

.cd-stretchy-nav.nav-is-visible ul li:first-of-type a::after,
.cd-stretchy-nav.nav-is-visible ul li:first-of-type span {
animation-delay: 0.05s;
}
/*анимация дочернего содержания здесь ...*/

@keyframes scaleIn {
from {
transform: translateY(-50%) scale(0);
}
to {
transform: translateY(-50%) scale(1);
}
}

@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-25px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

.cd-stretchy-nav ul {

position: relative;

z-index: 2;

visibility: hidden;

transition: visibility 0.3s;

}

.cd-stretchy-nav ul a {

position: relative;

}

.cd-stretchy-nav ul a::after {

/* навигация иконок */

content: '';

position: absolute;

height: 16px;

width: 16px;

transform: translateY(-50%) scale(0);

opacity: .6;

background: url(../img/cd-sprite-1.svg) no-repeat 0 0;

}

.cd-stretchy-nav ul span {

/* подпись для иконок */

display: block;

opacity: 0;

transform: translateX(-25px);

}

.cd-stretchy-nav.nav-is-visible ul {

visibility: visible;

}

.cd-stretchy-nav.nav-is-visible ul a::after {

transform: translateY(-50%) scale(1);

animation: scaleIn 0.15s backwards;

}

.cd-stretchy-nav.nav-is-visible ul span {

opacity: 1;

transform: translateX(0);

animation: slideIn 0.15s backwards;

}

.cd-stretchy-nav.nav-is-visible ul li:first-of-type a::after,

.cd-stretchy-nav.nav-is-visible ul li:first-of-type span {

animation-delay: 0.05s;

}

/*анимация дочернего содержания здесь ...*/

@keyframes scaleIn {

from {

transform: translateY(-50%) scale(0);

}

to {

transform: translateY(-50%) scale(1);

}

@keyframes slideIn {

from {

opacity: 0;

transform: translateX(-25px);

}

to {

opacity: 1;

transform: translateX(0);

}

Для панелей инструментов мы установили следующие правила: когда навигация открыта мы зададим отображение значков (используя scaleIn. анимацию), чтобы отображались метки при наведении курсора мы будем использовать CSS Transitions. Для панели инструментов (третья демонстрация), у нас получились следующие правила:

.cd-stretchy-nav.edit-content ul span {
position: absolute;
top: 0;
right: 35px;
height: 30px;
line-height: 30px;
opacity: 0;
visibility: hidden;
background-color: rgba(0, 0, 0, 0.55);
transition: opacity 0.2s, visibility 0.2s;
}
.cd-stretchy-nav.edit-content ul span::after {
/* треугольники для подсказки */
content: '';
position: absolute;
left: 100%;
top: 50%;
bottom: auto;
transform: translateY(-50%);
height: 0;
width: 0;
border: 4px solid transparent;
border-left-color: rgba(0, 0, 0, 0.55);
}</p>
.no-touch .cd-stretchy-nav.edit-content.nav-is-visible ul a:hover span {
opacity: 1;
visibility: visible;
}

.cd-stretchy-nav.edit-content ul span {

position: absolute;

top: 0;

right: 35px;

height: 30px;

line-height: 30px;

opacity: 0;

visibility: hidden;

background-color: rgba(0, 0, 0, 0.55);

transition: opacity 0.2s, visibility 0.2s;

}

.cd-stretchy-nav.edit-content ul span::after {

/* треугольники для подсказки */

content: '';

position: absolute;

left: 100%;

top: 50%;

bottom: auto;

transform: translateY(-50%);

height: 0;

width: 0;

border: 4px solid transparent;

border-left-color: rgba(0, 0, 0, 0.55);

}

.no-touch .cd-stretchy-nav.edit-content.nav-is-visible ul a:hover span {

opacity: 1;

visibility: visible;

}

Мы использовали JQuery для отслеживания события, когда вы нажимаете на a.cd-nav-trigger, и когда добавляете или удаляете событие с классом .nav-is-visible из nav.cd-stretchy-nav.