« Выпадающие иконки социальных сетей на чистом CSS »

Описание материала:

В данном материале мы бы хотели с вами поделится выпадающими иконками социальных сетей, они сделаны с использованием CSS и HTML кодов, с подключением библиотеки Font-Awesome. В нашем примере мы используем пять социальных сетей, таких как - Facebook, Twetter, Insatgram, ВКонтакте и Одноклассники, но вы сможете изменить их под себя, для этого нужно будет заменить в HTML коде иконку из библиотеки Font-Awesome. Цветовая гамма иконок - это бежевый (#f3be81) и темно-серый (#393939) цвет, изменить их под себя можно в CSS стиле.

Выпадающие иконки социальных сетей на чистом CSS

Установка:

Подключаем библиотеку иконок Font-Awesome:
Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">


HTML код:
Код
<nav class="social-menu">
  <input type="checkbox" href="#" class="social-menu-open" name="social-menu-open" id="social-menu-open" />
  <label class="social-menu-open-button" for="social-menu-open">
  <span class="hamburger hamburger-1"></span>
  <span class="hamburger hamburger-2"></span>
  <span class="hamburger hamburger-3"></span>
  </label>
  <a href="#" class="social-menu-item"><i class="fab fa-facebook-f"></i></a>
  <a href="#" class="social-menu-item"><i class="fab fa-twitter"></i></a>
  <a href="#" class="social-menu-item"><i class="fab fa-instagram"></i></a>
  <a href="#" class="social-menu-item"><i class="fab fa-vk"></i></a>
  <a href="#" class="social-menu-item"><i class="fab fa-odnoklassniki"></i></a>
</nav>


CSS код:
Код
.social-menu {
  position: absolute;
  left: 50%;
  margin-left: -190px;
  padding-top: 20px;
  padding-left: 190px;
  width: 380px;
  height: 250px;
  box-sizing: border-box;
  font-size: 30px;
  text-align: left;
}
.social-menu-item,
.social-menu-open-button {
  background: #f3be81;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  top: 20px;
  color: #393939;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.social-menu-open {
  display: none;
}
.hamburger {
  width: 25px;
  height: 3px;
  background: #393939;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
  -webkit-transform: translate3d(0, -8px, 0);
  transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.hamburger-3 {
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
}
.social-menu-open:checked + .social-menu-open-button .hamburger-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
  transform: translate3d(0, 0, 0) rotate(45deg);
}
.social-menu-open:checked + .social-menu-open-button .hamburger-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.social-menu-open:checked + .social-menu-open-button .hamburger-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
  transform: translate3d(0, 0, 0) rotate(-45deg);
}
.social-menu-item:hover {
  background: #393939;
  color: #f3be81;
}
.social-menu-item:nth-child(3) {
  transition-duration: 70ms;
}
.social-menu-item:nth-child(4) {
  transition-duration: 130ms;
}
.social-menu-item:nth-child(5) {
  transition-duration: 190ms;
}
.social-menu-item:nth-child(6) {
  transition-duration: 250ms;
}
.social-menu-item:nth-child(7) {
  transition-duration: 310ms;
}
.social-menu-open-button {
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}
.social-menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.social-menu-open:checked + .social-menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.social-menu-open:checked ~ .social-menu-item {
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.social-menu-open:checked ~ .social-menu-item:nth-child(3) {
  transition-duration: 160ms;
  -webkit-transform: translate3d(114.42548px, 11.48084px, 0);
  transform: translate3d(114.42548px, 11.48084px, 0);
}
.social-menu-open:checked ~ .social-menu-item:nth-child(4) {
  transition-duration: 240ms;
  -webkit-transform: translate3d(77.18543px, 85.2491px, 0);
  transform: translate3d(77.18543px, 85.2491px, 0);
}
.social-menu-open:checked ~ .social-menu-item:nth-child(5) {
  transition-duration: 320ms;
  -webkit-transform: translate3d(0.09158px, 114.99996px, 0);
  transform: translate3d(0.09158px, 114.99996px, 0);
}
.social-menu-open:checked ~ .social-menu-item:nth-child(6) {
  transition-duration: 400ms;
  -webkit-transform: translate3d(-77.04956px, 85.37192px, 0);
  transform: translate3d(-77.04956px, 85.37192px, 0);
}
.social-menu-open:checked ~ .social-menu-item:nth-child(7) {
  transition-duration: 480ms;
  -webkit-transform: translate3d(-114.40705px, 11.66307px, 0);
  transform: translate3d(-114.40705px, 11.66307px, 0);
}

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 432
Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
Войдите:
avatar