Круговая навигация на CSS

Круговая навигация на CSS

От автора: Учебник о том, как создать круговую навигацию с помощью преобразований CSS.

В этом учебнике я собираюсь показать вам, как при помощи преобразований CSS создать круговую навигацию. Я проведу вас по этапам создания нужных стилей и объясню стоящую за ними математику (фу-у-у!) и простую логику, чтобы у вас сложилось ясное понимание этой методики. Как я уже говорил, при создании этих стилей задействуется немного базовой математики наряду с преобразованиями CSS. Но не беспокойтесь, математика на самом деле очень простая и я буду ее пошагово объяснять.

скачать исходникидемо

Также хочу отдать должное за исходное создание этой техники Ане Тюдор (Ana Tudor). Я слегка подкорректировал ее для получения нужных мне результатов, что, надеюсь, и вы сможете сделать к концу этого учебника: получить полное и четкое понимание этого метода и повозиться с ним, создавая собственные стили. Итак, давайте начнем без дальнейших проволочек!

РАЗМЕТКА

Мы собираемся строить навигацию, поэтому начнем с нормальной навигационной структуры. Нам понадобится div для содержания неупорядоченного списка элементов, кнопка запуска открытия и закрытия навигации, список элементов, а для первого демо-примера – дополнительный оверлей, чтобы прикрывать страницу при открытой навигации.

<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
   <ul>
       <li><a href="#"><span class="icon-picture"></span></a></li>
       <li><a href="#"><span class="icon-headphones"></span></a></li>
       <li><a href="#"><span class="icon-home"></span></a></li>
       <li><a href="#"><span class="icon-facetime-video"></span></a></li>
       <li><a href="#"><span class="icon-envelope-alt"></span></a></li>
   </ul>
</div>
<div id="cn-overlay" class="cn-overlay"></div>

Используемые в этом демо-примере иконки взяты из Font Awesome.

МАТЕМАТИКА, СТОЯЩАЯ ЗА ПРЕОБРАЗОВАНИЯМИ CSS

Объяснять математику лучше всего в зрительной, а не письменной форме. Поэтому начнем с логики, по мере продвижения вперед применим математику, а после окончания объяснений перейдем к кодированию, к этому моменту вы будете в точности знать, какое правило CSS что делает. Сначала давайте разберемся, что такое «центральный угол». Это – визуальное представление, за которым следует простое объяснение:

Предположим, вам нужно распределить все элементы навигации в полукруге, как в создаваемом нами примере, и у вас в списке навигации шесть пунктов, тогда у каждого угла будет центральный угол в: 180гр. / 6 = 30гр.

Если вы хотите, чтобы элементы заняли всю окружность целиком, и у вас их шесть, то центральный угол для каждого пункта составит: 360гр. / 6 = 60гр.

И так далее. Вы считаете значение нужного вам центрального угла, и с этого момента для фактического создания этих углов мы начинаем применять к преобразованиям CSS простую математику. Для построения угла со значением, равным нужному нам значению центрального угла, нам придется наклонить элементы (с помощью функции CSS skew()): 90гр. – x гр., где x – это значение нужного нам центрального угла.

Легко. Но в данном случае все содержимое внутри пунктов списка также наклонится, и контент будет смотреться беспорядочно, что нам не нужно, поэтому «устраним наклон» привязки внутри каждого пункта, чтобы контент хорошо выглядел, но до этого мы доберемся через минуту.

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

Сейчас вы, возможно, захотите просмотреть пошаговый демо-пример, чтобы получить четкое представление о наших дальнейших действиях. Я также добавил в демо разбор того, что происходит на каждом шаге, поэтому просмотр примера и получение об этом представления займет всего одну минуту. Демо-пример можно проиграть от начала до конца, воспользовавшись кнопкой «Начать демо» (Start Demo), или управлять передвижением от этапа к этапу с помощью кнопки «Следующий шаг» (Next Step), а перезапустить его можно в любой момент с кнопки «Возврат» (Reset).

Смотреть интерактивный демо-пример

Вот скриншоты этапов, которые вы увидите в примере:

Исходное состояние:

Шаг 1:

Шаг 2:

Шаг 3:

Шаг 4:

Шаг 5:

Шаг 6:

Итак, давайте еще раз по ним пройдемся:

Нам придется абсолютно расположить все элементы внутри их контейнера.

Мы установим началом преобразования каждого элемента нижний правый угол.

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

Далее вращаем элементы по часовой стрелке на их место с помощью следующей формулы: Каждый элемент с индексом i мы вращаем на: i * x , где x снова является значением центрального угла

Затем сдвигаем их для получения нужного центрального угла (применяя вышеприведенную формулу)

В нашем примере пять пунктов навигации, то есть пять центральных углов, где нам нужно прикрыть только верхнюю половину окружности, поэтому в соответствии с объясненной выше математикой каждый элемент получит центральный угол в 36 гр., но в нашем примере я установил значение центрального угла в 40гр. (потому что так обеспечивается увеличенная область щелчка), так что сумма всех углов будет равна 5 * 40 = 200гр., что больше 180гр. В данном случае все, что мы делаем – это вращаем элементы «обратно» против часовой стрелки на (200-180)/2 гр. для того, чтобы убедиться, что они уравновешены с обеих сторон.

На данный момент мы уже создали нужные центральные углы и позиционировали их. Но наклон пунктов списка также вызвал наклон их контента (тэгов-ссылок) и, таким образом – искажение их содержимого, поэтому последнее математическое правило, которое мы тут применим (фу!) – это то, которое гарантирует, что тэги-ссылки не исказятся и их контент будет видимым. Вот оно:

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

- [90 – (x/2) ] , где x является значением центрального угла

Итак, при значении центрального угла в 40гр. нам нужно наклонить ссылки на -40гр. и повернуть их на:

-[ 90 – (40/2) ] = -70 гр.

Ссылки расположены абсолютно внутри своих родительских элементов, и переполнение overflow элементов списка установлено на скрытое (hidden), то есть эта часть ссылок отсекается, поэтому для гарантии расположения текстового/иконного содержимого ссылок вне их видимой части мы установим выравнивание текста по центру.

Вот и вся математика, нужная вам для создания «ломтей» внутри навигации! Ну наконец-то, верно? Итак, давайте быстренько еще раз все повторим:

Поверните элементы в их положение: угол y = i * x (где i = указатель элемента, а x = значение центрального угла)

Наклоните их на 90гр. – x (где x – это опять значение центрального угла)

Разверните элементы в противоположном направлении, если/когда нужно их сбалансировать (этот шаг на самом деле объединен с предыдущим, вы вычитаете значение, на которое нужно развернуть углы обратно, из значения угла, на которое вы их вращаете)

«Устраните наклон» и «поверните обратно» ссыдки внутри них (и установите выравнивание текста по центру)

Конечно, я пропустил ту часть, где вы перемещаете пункты списка так, чтобы начало их преобразования совпало с центром контейнера (как показано в демо-примере). И это в общем все, что нужно для создания углов, но не все – для создания всей навигации. Остались несколько простых шагов, и они во многом являются обычным назначением стилей, поэтому давайте начнем работать с CSS и обсудим все по мере продвижения!

CSS

Сначала назначим стили первому демо-примеру.

Мы собираемся воспользоваться классами Modernizr‘а, применив их к тэгу body, чтобы выбрать поддерживающие и неподдерживающие браузеры, а также обеспечить простую общую альтернативу для старых браузеров, не поддерживающих преобразования CSS.

Начнем со стилей обертки навигации. Она получит фиксированное положение внизу в центре страницы и в исходном положении будет уменьшен, а затем при щелчке по кнопке «open» будет открываться/увеличиваться.

.csstransforms .cn-wrapper {
  font-size:1em;
  width: 26em;
  height: 26em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  bottom: -13em;
  left: 50%;
  border-radius: 50%;
  margin-left: -13em;
  transform: scale(0.1);
  transition: all .3s ease;
}
/* класс, примененный к контейнеру через JavaScript, который будет увеличивать навигацию*/
.csstransforms .opened-nav {
  border-radius: 50%;
  transform: scale(1);
}

Также назначим стиль и место кнопке, запускающей открытие и закрытие нашей навигации.

.cn-button {
  border:none;
  background:none;
  color: white;
  text-align: Center;
  font-size: 1.5em;
  padding-bottom: 1em;
  height: 3.5em;
  width: 3.5em;
  background-color: #111;
  position: fixed;
  left: 50%;
  margin-left: -1.75em;
  bottom: -1.75em;
  border-radius: 50%;
  cursor: pointer;
  z-index: 11
}
.cn-button:hover,
.cn-button:active,
.cn-button:focus{
  background-color: #222;
}

При открытой навигации оверлей покрывает страницу. Вот стили оверлея.

.cn-overlay{
  width:100%
  height:100%;
  background-color: rgba(0,0,0,0.6);
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  opacity:0;
  transition: all .3s ease;
  z-index:2;
  pointer-events:none;
}
 
/* Класс, добавленный к оверлею через JavaScript для того, чтобы показывать его при открытой навигации */
.cn-overlay.on-overlay{
  pointer-events:auto;
  opacity:1;
}

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

.csstransforms .cn-wrapper li {
  position: absolute;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
  transform-origin: 100% 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-top: -1.3em;
  margin-left: -10em;
  transition: border .3s ease;
}
 
.csstransforms .cn-wrapper li a {
  display: block;
  font-size: 1.18em;
  height: 14.5em;
  width: 14.5em;
  position: absolute;
  bottom: -7.25em;
  right: -7.25em;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  padding-top: 1.8em;
  text-align: center;
  transform: skew(-50deg) rotate(-70deg) scale(1);
  transition: opacity 0.3s, color 0.3s;
}
 
.csstransforms .cn-wrapper li a span {
  font-size: 1.1em;
  opacity: 0.7;
}
/* для центрального угла x пункты списка должны быть скошены на 90-x градусов
В нашем случае x=40гр., поэтому угол скоса составляет 50гр.
Элементы нужно повернуть на x минус (сумма углов - 180)2 (для данного примера) */
 
.csstransforms .cn-wrapper li:first-child {
  transform: rotate(-10deg) skew(50deg);
}
 
.csstransforms .cn-wrapper li:nth-child(2) {
  transform: rotate(30deg) skew(50deg);
}
 
.csstransforms .cn-wrapper li:nth-child(3) {
  transform: rotate(70deg) skew(50deg)
}
 
.csstransforms .cn-wrapper li:nth-child(4) {
  transform: rotate(110deg) skew(50deg);
}
 
.csstransforms .cn-wrapper li:nth-child(5) {
  transform: rotate(150deg) skew(50deg);
}
 
.csstransforms .cn-wrapper li:nth-child(odd) a {
  background-color: #a11313;
  background-color: hsla(0, 88%, 63%, 1);
}
 
.csstransforms .cn-wrapper li:nth-child(even) a {
  background-color: #a61414;
  background-color: hsla(0, 88%, 65%, 1);
}
 
/*активный стиль */
.csstransforms .cn-wrapper li.active a {
  background-color: #b31515;
  background-color: hsla(0, 88%, 70%, 1);
}
 
/*стиль при проведении мышью */
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
  background-color: #b31515;
  background-color: hsla(0, 88%, 70%, 1);
}

Мы обеспечим простую альтернативу для тех браузеров, которые не поддерживают преобразования CSS.

.no-csstransforms .cn-wrapper{
  font-size:1em;
  height:5em;
  width:25.15em;
  bottom:0;
  margin-left: -12.5em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  left:50%;
  border:1px solid #ddd;
}
 
.no-csstransforms .cn-button{
  display:none;
}
 
.no-csstransforms .cn-wrapper li{
  position:static;
  float:left;
  font-size:1em;
  height:5em;
  width:5em;
  background-color: #eee;
  text-align:center;
  line-height:5em;
}
 
.no-csstransforms .cn-wrapper li a{
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
  color:inherit;
  font-size:1.3em;
  border-right: 1px solid #ddd;
}
 
.no-csstransforms .cn-wrapper li a:last-child{
  border:none;
}
 
.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus{
  background-color: white;
}
 
.no-csstransforms .cn-wrapper li.active a {
  background-color: #6F325C;
  color: #fff;
}

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

@media screen and (max-width:480px){
  .csstransforms .cn-wrapper{
    font-size:.68em;
  }
  .cn-button{
    font-size:1em;
  }
  .csstransforms .cn-wrapper li {
    font-size:1.52em;
  }
}
 
@media screen and (max-width:320px){
  .no-csstransforms .cn-wrapper{
    width:15.15px;
    margin-left: -7.5em;
  }
  .no-csstransforms .cn-wrapper li{
    height:3em;
    width:3em;
  }
}

Вот и все, что касается первого демо-примера! Давайте перейдем к следующему.

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

Давайте снова возьмем вышеприведенный пример и изменим одно маленькое простое правило CSS, и посмотрим, какое отличие оно создаст в очертаниях элементов. Мы применим фон с радиальным градиентом к ссылкам с прозрачным фоновым цветом. Результат будет такой:

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

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

При проведении мышью над показанной на изображении красной областью, которая является нижней частью ссылок, запускается состояние проведения мышью, и это нормально, но так как нам нужно, чтобы выглядело все так, как будто ссылки – это только пурпурная область, то следует предотвратить запуск событий мыши в нижней части ссылок. Для этого мы воспользуемся «накладкой», которую поместим поверх центра навигационного контейнера, что будет представлять из себя фигуру в виде круга, покрывающую нижние части ссылок и, таким образом, блокирующую события мыши в этих областях. Мы применим для этого псевдоэлемент, чтобы не добавлять в свою разметку лишние пустые тэги.

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

.csstransforms .cn-wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  margin-top: -13em;
  margin-left: -13.5em;
  width: 27em;
  height: 27em;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  transition: all .3s ease 0.3s;
  transform: scale(0.1);
  pointer-events: none;
  overflow: hidden; 
}
 
/*закройте от щелчков лишнее пространство привязок*/
.csstransforms .cn-wrapper:after{
  color: transparent;
  content:".";
  display:block;
  font-size:2em;
  width:6.2em;
  height:6.2em;
  position: absolute;
  left: 50%;
  margin-left: -3.1em;
  top:50%;
  margin-top: -3.1em;
  border-radius: 50%;
  z-index:10;
}
 
.csstransforms .cn-wrapper li {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  margin-top: -1.3em;
  margin-left: -10em;
  width: 10em;
  height: 10em;
  font-size: 1.5em;
  transition: all .3s ease;
  transform: rotate(76deg) skew(60deg);
  transform-origin: 100% 100%;
  pointer-events: none;
}
 
.csstransforms .cn-wrapper li a {
  position: absolute;
  right: -7.25em;
  bottom: -7.25em;
  display: block;
  width: 14.5em;
  height: 14.5em;
  border-radius: 50%;
  background: #429a67;
  background: radial-gradient(transparent 35%, #429a67 35%);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
  line-height: 2;
  transition: all .3s ease;
  transform: skew(-60deg) rotate(-75deg) scale(1);
  pointer-events: auto;
}
 
.csstransforms .cn-wrapper li a span {
  position: relative;
  top: 1.8em;
  display: block;
  font-size: .5em;
  font-weight: 700;
  text-transform: uppercase;
}
 
.csstransforms .cn-wrapper li a:hover,
.csstransforms .cn-wrapper li a:active,
.csstransforms .cn-wrapper li a:focus {
    background: radial-gradient(transparent 35%, #449e6a 35%);
}

Нужно, чтобы элементы навигации во втором демо раскрывались при ее открытии с эффектом веера. Чтобы его добиться, мы позиционируем элементы в том же месте и с тем же поворотом/наклоном rotate(76deg) skew(60deg). С помощью приостановки преобразования мы даем элементам возможность раскрываться после того, как увеличим обертку. При закрытии навигации подождем, пока элементы вернутся обратно, перед тем, как снова уменьшить обертку. При щелчке по кнопке «open» мы раскроем элементы, повернув каждый из них в их окончательную позицию в окружности.

.csstransforms .opened-nav {
  border-radius: 50%;
  opacity: 1;
  transition: all .3s ease;
  transform: scale(1);
  pointer-events: auto;
}
 
.csstransforms .opened-nav li {
  transition: all .3s ease .3s;
}
 
.csstransforms .opened-nav li:first-child {
  transform: rotate(-20deg) skew(60deg);
}
 
.csstransforms .opened-nav li:nth-child(2) {
  transform: rotate(12deg) skew(60deg);
}
 
.csstransforms .opened-nav  li:nth-child(3) {
  transform: rotate(44deg) skew(60deg);
}
 
.csstransforms .opened-nav li:nth-child(4) {
  transform: rotate(76deg) skew(60deg);
}
 
.csstransforms .opened-nav li:nth-child(5) {
  transform: rotate(108deg) skew(60deg);
}
 
.csstransforms .opened-nav li:nth-child(6) {
  transform: rotate(140deg) skew(60deg);
}
 
.csstransforms .opened-nav li:nth-child(7) {
  transform: rotate(172deg) skew(60deg);
}

Конечно, мы также обеспечим неподдерживающие браузеры общим альтернативным вариантом.

.no-csstransforms .cn-wrapper{
  margin:10em auto;
  overflow:hidden;
  text-align:center;
  padding:1em;
}
.no-csstransforms .cn-wrapper ul{
  display:inline-block;
}
.no-csstransforms li{
  font-size:1em;
  width:5em;
  height:5em;
  float:left;
  line-height:5em;
  text-align:center;
  background-color: #fff;
}
.no-csstransforms li a{
  display:block;
  height:100%;
  width:100%;
  text-decoration: none;
  color: inherit;
}
.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus{
  background-color: #f8f8f8;
}
.no-csstransforms .cn-wrapper li.active a {
  background-color: #6F325C;
  color: #fff;
}
.no-csstransforms .cn-button{
  display:none;
}

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

@media only screen and (max-width: 620px) {
  .no-csstransforms li{
    width:4em;
    height:4em;
    line-height:4em;
  }
}
@media only screen and (max-width: 500px) {
  .no-ccstransforms .cn-wrapper{
    padding:.5em;
  }
  .no-csstransforms .cn-wrapper li{
    font-size:.9em;
    width:4em;
    height:4em;
    line-height:4em;
  }
}
@media only screen and (max-width: 480px) {
  .csstransforms .cn-wrapper{
    font-size: .68em;
  }
  .cn-button{
    font-size:1em;
  }
}
@media only screen and (max-width:420px){
  .no-csstransforms .cn-wrapper li{
    width:100%;
    height:3em;
    line-height:3em;
  }
}

Вот, в общем-то, и весь необходимый для создания этих стилей CSS!

JAVASCRIPT

В этих демо мы не пользуемся каркасами-фреймами JavaScript’а. Для добавления и удаления классов я применю Classie.js Давида Де Сандро (David De Sandro). И, наконец, для браузеров, не поддерживающих addEventListener и removeEventListener, мы воспользуемся полифилом EventListener Джонатана Нила (Jonathan Neal).

В обоих демо-примерах мы добавим к кнопке оператор события. Щелчок по кнопке и/или наведение на нее мыши запустит открытие/закрытие навигации. Кроме того, в первом демо при щелчке где угодно вне открытой навигации та закроется. Давайте начнем с JavaScript’а первого примера.

(function(){
 
  var button = document.getElementById('cn-button'),
    wrapper = document.getElementById('cn-wrapper'),
    overlay = document.getElementById('cn-overlay');
 
  // откройте и закройте меню при щелчке по кнопке
  var open = false;
  button.addEventListener('click', handler, false);
  button.addEventListener('focus', handler, false);
  wrapper.addEventListener('click', cnhandle, false);
 
  function cnhandle(e){
    e.stopPropagation();
  }
 
  function handler(e){
    if (!e) var e = window.event;
    e.stopPropagation();//чтобы событие щелчка не запускалось в документе
 
      if(!open){
        openNav();
      }
    else{
        closeNav();
      }
  }
  function openNav(){
    open = true;
      button.innerHTML = "-";
      classie.add(overlay, 'on-overlay');
      classie.add(wrapper, 'opened-nav');
  }
  function closeNav(){
    open = false;
    button.innerHTML = "+";
    classie.remove(overlay, 'on-overlay');
    classie.remove(wrapper, 'opened-nav');
  }
  document.addEventListener('click', closeNav);
 
})();

JavaScript для второго демо-примера похож на предыдущий, но для данного случая мы его модифицируем:

(function(){
 
  var button = document.getElementById('cn-button'),
    wrapper = document.getElementById('cn-wrapper');
 
    //откройте и закройте меню при щелчке по кнопке
  var open = false;
  button.addEventListener('click', handler, false);
  button.addEventListener('focus', handler, false);
 
  function handler(){
    if(!open){
      this.innerHTML = "Close";
      classie.add(wrapper, 'opened-nav');
    }
    else{
      this.innerHTML = "Menu";
    classie.remove(wrapper, 'opened-nav');
    }
    open = !open;
  }
  function closeWrapper(){
    classie.remove(wrapper, 'opened-nav');
  }
 
})();

Вот и все! Надеюсь, вам понравился и оказался полезным этот учебник!

Автор: Sara Soueidan

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree