Содержание

Анимированный индикатор активного пункта меню на CSS

Анимированный индикатор активного пункта меню на CSS

От автора: в этой статье по созданию индикатора для меню на чистом CSS я расскажу про необычные способы применения смежных селекторов и псевдо-классов. Вы можете подумать, что тут не обошлось без JavaScript. На самом деле тут нет никакого JS, а просто по-умному использованы возможности CSS. С другой стороны, проще было бы сделать это с помощью JS.

Ниже представлен результат:

Процесс создания разобьем в три этапа:

Основная структура и стили

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Создание индикатора

Заставляем индикатор двигаться

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

Шаг 1: Основная структура и стили

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

<ul>
<li>Home</li>
<li>About</li>
<li>Writing</li>
<li>Clients</li>
<li>Contact</li>
</ul>

<ul>

  <li>Home</li>

  <li>About</li>

  <li>Writing</li>

  <li>Clients</li>

  <li>Contact</li>

</ul>

Не так и мудрено. У нас есть ul с классом PrimaryNav. Данный тег служит контейнером для элементов списка, каждый элемент с классом Nav-item.

Задаем переменные

Одна из ключевых особенностей меню это максимальная ширина, занимаемая элементами меню. Элементы меню растягиваются на всю ширину контейнера. В нашем случае мы зададим переменную $menu-items, которую будем использовать для расчетов ширины каждого элемента .Nav-item. Также мы добавим переменную $indicator-color – угадали – она отвечает за цвет индикатора при наведении на него мыши.

// Переменные пунктов меню
// Количество элементов меню
$menu-items: 5;
// Умножаем на 1% чтобы перевести в проценты
$width: (100/$menu-items) * 1%;

// Цвета
$background-color: #121212;
$indicator-color: #e82d00;

// Переменные пунктов меню

// Количество элементов меню

$menu-items: 5;

// Умножаем на 1% чтобы перевести в проценты

$width: (100/$menu-items) * 1%;

 

// Цвета

$background-color: #121212;

$indicator-color: #e82d00;

Теперь, добавим базовые стили меню:

// Родительский контейнер
.PrimaryNav {
// Удаляем маркеры
list-style: none;
// Центрируем!
margin: 50px auto;
// nav никогда не превысит эту ширину и рассчитанное нами значение в процентах
max-width: 720px;
padding: 0;
width: 100%;
}

// Пункты меню
.Nav-item {
background: #fff;
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
// По нашим расчетам пунктов 5, а значит ширина будет 20%
width: $width;

// Первый пункт меню
&:first-child {
border-radius: 3px 0 0 3px;
}

// Последний пункт меню
&:last-child {
border-radius: 0 3px 3px 0;
}

// Если пункт активный, задаем ему цвет индикатора
&.is-active a {
color: $indicator-color;
}

a {
color: $background-color;
display: block;
padding-top: 20px;
padding-bottom: 20px;
text-decoration: none;

&:hover {
color: $indicator-color;
}
}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

// Родительский контейнер

.PrimaryNav {

  // Удаляем маркеры

  list-style: none;

  // Центрируем!

  margin: 50px auto;

  // nav никогда не превысит эту ширину и рассчитанное нами значение в процентах

  max-width: 720px;

  padding: 0;

  width: 100%;

}

 

// Пункты меню

.Nav-item {

  background: #fff;

  display: block;

  float: left;

  margin: 0;

  padding: 0;

  text-align: center;

  // По нашим расчетам пунктов 5, а значит ширина будет 20%

  width: $width;

 

  // Первый пункт меню

  &:first-child {

    border-radius: 3px 0 0 3px;

  }

 

  // Последний пункт меню

  &:last-child {

    border-radius: 0 3px 3px 0;

  }

 

  // Если пункт активный, задаем ему цвет индикатора

  &.is-active a {

    color: $indicator-color;

  }

 

  a {

    color: $background-color;

    display: block;

    padding-top: 20px;

    padding-bottom: 20px;

    text-decoration: none;

 

    &:hover {

      color: $indicator-color;

    }

  }

}

Шаг 2: Создание индикатора

Нам необходимо добавить еще один класс. Можно было бы обойтись одним классом .PrimaryNav, но подход с двумя классами более гибкий. У нас уже есть класс .PrimaryNav, в нем содержатся основные стили меню. Создадим класс .width-indicator – это будет наш индикатор:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<ul>

</ul>

<ul>

 

</ul>

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

Основная сложность в получении каждого пункта меню для последующей коммуникации между ними. В маркированном списке первый элемент (:first-child) может взаимодействовать со вторым через смежный селектор + или ~. Но второй уже не может общаться с первым (в CSS нельзя ходить по DOM в обратном направлении).

Выходит, что лучше всего работать с псевдо-классом :last-child. Данный псевдо-класс работает со всеми состояниями соседних элементов, как :hover, так и :active. Поэтому это идеальный кандидат для установки индикатора. Индикатор создается с помощью :before и :after в псевдо-классе :last-child. Элемент :before это CSS треугольник, центрированный отрицательным значением margin’а.

// Индикатор наведения мыши
.with-indicator {
// Контейнер меню задается относительным, а псевдо-класс last-child задается абсолютно.
position: relative;

.Nav-item:last-child {
&:before, &:after {
content: »;
display: block;
position: absolute;
}

// CSS Треугольник
&:before {
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: $color-indicator;
top: 0;
left: 12.5%;
// Фиксим смещение – может немного изменяться
margin-left: -3px;
}

// блок за текстом
&:after {
width: $width;
background: $indicator-color;
top: -6px;
bottom: -6px;
left: 0;
z-index: -1;
}
}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

// Индикатор наведения мыши

.with-indicator {

  // Контейнер меню задается относительным, а псевдо-класс last-child задается абсолютно.

  position: relative;

 

.Nav-item:last-child {

  &:before, &:after {

    content: »;

    display: block;

    position: absolute;

  }

  

  // CSS Треугольник

  &:before {

    width: 0;

    height: 0;

    border: 6px solid transparent;

    border-top-color: $color-indicator;

    top: 0;

    left: 12.5%;

    // Фиксим смещение – может немного изменяться

    margin-left: -3px;

  }

 

  // блок за текстом

  &:after {

    width: $width;

    background: $indicator-color;

    top: -6px;

    bottom: -6px;

    left: 0;

    z-index: -1;

  }

}

}

Шаг 3: Заставляем индикатор двигаться

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

На данный момент списку ul задано позиционирование position: relative по умолчанию. Это означает, что наш индикатор установлен на первый пункт меню. Передвигать индикатор можно, изменяя значение left. Так как все пункты одинаковой ширины, то один сдвиг для псевдо-классов :before и :after в :last-child должен быть равен ширине .Nav-item. Помните нашу переменную $widths? Ее можно использовать для атрибута left. Вот так это будет выглядеть в vanilla CSS:

.with-indicator .Nav-item:nth-child(1).is-active ~ .Nav-item:last-child:after {
left: 0;
}
.with-indicator .Nav-item:nth-child(2).is-active ~ .Nav-item:last-child:after {
left: 20%;
}
.with-indicator .Nav-item:nth-child(3).is-active ~ .Nav-item:last-child:after {
left: 40%;
}
.with-indicator .Nav-item:nth-child(4).is-active:after {
left: 60%;
}
.with-indicator .Nav-item:nth-child(5).is-active:after {
left: 80%;
}

.with-indicator .Nav-item:nth-child(1).is-active ~ .Nav-item:last-child:after {

  left: 0;

}

.with-indicator .Nav-item:nth-child(2).is-active ~ .Nav-item:last-child:after {

  left: 20%;

}

.with-indicator .Nav-item:nth-child(3).is-active ~ .Nav-item:last-child:after {

  left: 40%;

}

.with-indicator .Nav-item:nth-child(4).is-active:after {

  left: 60%;

}

.with-indicator .Nav-item:nth-child(5).is-active:after {

  left: 80%;

}

Добавим динамики с помощью Sass:

// Переменный пунктов меню
// Количество пунктов меню плюс 1 для сдвига
$menu-items: 5;
// Настоящее число пунктов меню
$menu-items-loop-offset: $menu-items — 1;
// Умножаем на 1% чтобы перевести в проценты
$width: (100/$menu-items) * 1%;

.with-indicator {
@for $i from 1 through $menu-items-loop-offset {
// Когда .Nav-item активен,сдвигаем индикатор к активному пункту.
.Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:after {
left:($width*$i)-$width;
}

.Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before {
left:($width*$i)+($width/2)-$width; /* сдвигаем треугольник на активный пункт меню. */
}
} // конец цикла @for

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

// Переменный пунктов меню

// Количество пунктов меню плюс 1 для сдвига

$menu-items: 5;

// Настоящее число пунктов меню

$menu-items-loop-offset: $menu-items — 1;

// Умножаем на 1% чтобы перевести в проценты

$width: (100/$menu-items) * 1%;

 

.with-indicator {

  @for $i from 1 through $menu-items-loop-offset {

    // Когда .Nav-item активен,сдвигаем индикатор к активному пункту.

    .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:after {

      left:($width*$i)-$width;

    }

    

   .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before {

      left:($width*$i)+($width/2)-$width; /* сдвигаем треугольник на активный пункт меню. */

    }

  } // конец цикла @for

Заметим, что у треугольника :before дополнительный сдвиг на полширины. Добавим ко всему этому анимации и еще один цикл for для определения местоположения индикатора. Метод основан на определении текущей страницы. При наведении мыши на пункт меню, т.е. :hover, индикатор будет двигаться. Но как только вы уберете мышь, состояние элемента снова станет is-active. Красивый и аккуратный способ сделать индикатор меню без JavaScript.

// Когда :last-child is-active или :hover необходимо использовать !important для перезаписи значения
@for $i from 1 through $menu-items-loop-offset {
// Когда пункт :hover, сдвигаем на него индикатор.
.Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:after {
left:($width*$i)-$width !important;
}

.Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before{
left:($width*$i)+($width/2)-$width !important;
}
} // конец цикла @for

// Убедимся, что значения возвращаются на last-child
.Nav-item {
&:last-child {
&:hover, &.is-active {
&:before {
left: (100%-$width)+($width/2) !important;
}
&:after{
left: 100%-$width !important;
}
}
}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

// Когда :last-child is-active или :hover необходимо использовать !important для перезаписи значения

@for $i from 1 through $menu-items-loop-offset {

  // Когда пункт :hover, сдвигаем на него индикатор.

  .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:after {

    left:($width*$i)-$width !important;

  }

 

  .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before{

    left:($width*$i)+($width/2)-$width !important;

  }

} // конец цикла @for

 

// Убедимся, что значения возвращаются на last-child

.Nav-item {

  &:last-child {

    &:hover, &.is-active {

      &:before {

        left: (100%-$width)+($width/2) !important;

      }

      &:after{

        left: 100%-$width !important;

      }

    }        

  }

}

Результат

Вот и все! Анимированный индикатор меню без JavaScript.

Источник: https://css-tricks.com/

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Делаем активный пункт меню с помощью JavaScript

Ваш сайт может быть продуман до мелочей, но если Вы не стали уделять внимание максимально удобному оформлению меню, то сайт едва ли можно назвать комфортным. Итак, для того чтобы оформить активный пункт меню, обратимся за помощью к CSS и одному простому коду JavaScript. С ними можно легко и просто сделать меню более удобным  в использовании.

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

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

С чего начать?

Первым делом необходимо подключить JQuery библиотеку. Сделаем это с помощью этого кода (вставлять между <head> и </head>):



<script type=»text/javascript» src=»<a href=»http://code.jquery.com/jquery-latest.js»>http://code.jquery.com/jquery-latest.js</a>»>

</script>

Понять суть процесса будет легче, если Вы самостоятельно создадите какое-либо меню между <body></body>.  Например:



<ul>

           <li> <a href=»#» >1</a></li>

           <li><a href=»#»>1</a></li>

           <li><a href=»#» >1</a></li>

           <li><a href=»#» >1</a></li>

           <li><a href=»#» >1</a></li>

</ul>

В этом образце приводится самое простое меню. В данном случае ему был присвоен класс “menu”, но по сути можно задать любой класс. Присвоив различные классы, Вы убережете себя от путаницы в дальнейшем, и работать станет гораздо удобнее.

Теперь у нас есть меню. На следующем этапе необходимо четко понять, какого результата мы хотим добиться – как именно будет представлен активный пункт меню в тот момент, когда пользователь находится на данной странице. Тут обратимся к CSS: присвоим новый класс непосредственно активному пункту меню. Допустим, имя класса будет active ( опять же, вы вольны в выборе имени класса). Код должен выглядеть следующим образом:



.active {

font-family: Trajan Pro, Times New Roman;

color: #ffffff;

font-variant: small-caps;

font-size:16px;

padding-left:7px;

word-spacing: 1px;

}

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

Следующим шагом станет скрипт: его задача — определить, какая страница активна у пользователя. Далее, если данная страница соответствует запрошенной, необходимо присвоить  заданному пункту  его класс active.  Соответственно, пункт изменит  цвет, шрифт и задний фон.  Код необходимо заключать в теги <head></head>:



$(function () { 

    $(‘.menu a’).each(function () {

        var location = window.location.href;

        var link = this.href; 

        if(location == link) {

            $(this).addClass(‘active’);

        }

    });

});

Как уже было сказано выше, это — JavaScript код. Он выполняет следующее: вызванная функция загружает данные из меню, а именно — из тега. Адрес страницы, на которой находится пользователь, функция присваивает переменной location. Далее функция обращается к атрибуту ссылки под тегом, которой присваивает значение переменной link. Если пользователь находится на нужной странице, эти функции будут равны. Тогда функция addClass даст возможность присвоить ссылке новый класс  active. А сам стиль уже был ранее прописан в CSS.

Так можно сделать любое меню с активной ссылкой. В целом, на этом задача считается выполненной.


Возможно, Вам будет интересно ↓↓↓

Подсветка активного подпункта Главного меню сайта на Joomla

Сразу напомню, что у себя на сайте я работаю со стандартным шаблоном сайта Protostar, но информация, предложенная ниже поможет разобраться с тем, как подсветить активный пункт или подпункт Главного меню сайта на Joomla. Для этого нужно немного поправить файл со стилями css шаблона. А если точнее, то прописать элементу меню со атрибутом active нужные свойства его фона и текста (если текст будет сливаться с фоном).

Изначальный вид активного пункта подменю Главного меню сайта

Для того, чтобы было проще понять, рассмотри всё на живом примере. Имеем стандартный пункт главного меню со следующей структурой вложенности:

  • Фреймворки (главный пункт)
    • Yii2 (первый уровень вложенности)
      • Полное руководство по Yii 2.0 (второй уровень вложенности)

Когда мы выбираем подпункт меню первого или второго уровня вложенности, например «Полное руководство по Yii 2.0», то основной пункт Главного меню подсвечивается, а вложенные как были бесцветными и неактивными, так и остаются. Что не есть правильно и хорошо:

Меняем код стиля шаблона в css файле

И снова и ещё ))) Шаблон у меня Protostar, но это не имеет особого значения, так как активный пункт меню Joomla выделяет в класс active:

<li>
 <a href="/frameworks/yii2/yii2-guide-ru.html">
  <img src="/./images/icon/yii.svg" alt=" Полное руководство по Yii 2.0">
  <span> Полное руководство по Yii 2.0</span>
 </a>
</li>

Как видно из кода, атрибут active присваивается тегу списка li. Именно его свойство и нужно изменить в файле шаблона:

/templates/protostar/css/template.css

А конкретно, нужно прописать строчку в позиции 7464:

.navigation .nav-child li.active > a {background-color: #8888cc; color: #fff;}

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

Конечный результат подсветки активного подпункта Главного меню сайта

Ну и после внесения одной строчки в файл css шаблона сайта можно наблюдать, на сколько интерактивным стало Главное меню сайта на Joomla:

Как-то так и никакого волшебства. =)

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Подсветка текущего пункта навигационного меню

  • Главная

  • ->

  • Материалы

  • ->

  • Подсветка текущего пункта навигационного меню

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.


Назад
Вперед

Подсветка текущего пункта навигационного меню

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

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

В этом видеоуроке мы разберем, как можно реализовать такую возможность.

Основная идея при создании подобного «живого» меню заключается в следующем:

У нас есть несколько страниц (разделов и т.п.), находящихся в меню.

Как правило, сайт «собирается» из отдельных кусочков кода — эдаких «блоков», каждый из которых содержит какую-то логически завершенную часть сайта: хэдер, футер, боковую панель и т.п.

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

Именно это и позволяет нам поступить следующим образом:


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

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

Само оформление, разумеется, задается в файле стилей.

Как все это работает в деталях Вы узнаете, просмотрев данное видео.

Для ознакомления с содержанием урока Вы можете просмотреть видео ниже. Скачать видеоурок в высоком качестве можно по ссылке выше.


P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая программирование на PHP, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить этот мощный язык веб-разработки:

Понравился материал и хотите отблагодарить?

Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх

javascript — выделение пункта меню при нажатии и активном

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.

css — Как выделить активный элемент в меню при нажатии в плитках Struts2?

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.

javascript — выделить активный пункт меню в строке меню

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

Загрузка…

  2. Авторизоваться
    зарегистрироваться

  3. текущее сообщество

.

html — Как выделить активную страницу в меню главной страницы?

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.