ZorNet.Ru — сайт для вебмастера » Меню для сайта » Мобильное меню на CSS3 социальных сетей

Мобильное меню на CSS3 социальных сетей

Мобильное меню на CSS3 социальных сетей
Это стильное по своему дизайну мобильное меню на CSS, где изначально выставлены социальные кнопки под уникальный вид с красивым переключателем. Само меню выполнено при помощи CSS, где задействован формат svg, который выводит знаки и участвует в оригинальном переходе при клике на кнопку. Как заметили, что такой формат можно сделать под форму входа, что останется изменить основные кнопки, что также по своей фактуре на любом сайте идет в современном стиле.

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

Сам принцип работы:

Открываем по умолчанию:

Меню для сайта на HTML и CSS

Здесь переключили выбранную функцию:

Мобильное меню для сайта на CSS3

Установка:

HTML

Код
<div class="mobile_menu">
  <input type="radio" name="s" id="pervaya">
  <input type="radio" name="s" id="vtoraya" checked="checked">
  <input type="radio" name="s" id="tretiya">
  <label for="pervaya"><img src="http://zornet.ru/Images/izobrazheniye/facebook.svg" alt=""></label>
  <label for="vtoraya"><img src="http://zornet.ru/Images/izobrazheniye/twitter.svg" alt=""></label>
  <label for="tretiya"><img src="http://zornet.ru/Images/izobrazheniye/instagram.svg" alt=""></label>
  <div class="kusokan"></div>
  <div class="mobile_menu_content">
  <div class="mobile_menu_bottom">
  <span class="ukazatelen"></span>
  </div>
  </div>
</div>

CSS

Код
.mobile_menu {
  width: 336px;
  height: 258px;
  margin: auto;
  display: flex;
  align-items: flex-end;
  position: relative;
  justify-content: center;
}
.mobile_menu::before {
  content: '';
  position: absolute;
  width: 84%;
  height: 0px;
  bottom: -10px;
  box-shadow: 0 0 25px 9px rgba(26, 209, 247, 0.33), 50px 10px 25px 8px rgba(26, 29, 245, 0.33), -40px 8px 25px 9px rgba(16, 247, 208, 0.33);
  left: 0;
  right: 0;
  margin: auto;
}
.mobile_menu::after {
  content: '';
}
.mobile_menu_content {
  filter: contrast(20);
  width: 100%;
  background-color: white;
  overflow: hidden;
  position: absolute;
}
.mobile_menu_bottom {
  width: 100%;
  height: 66px;
  background: black;
  display: flex;
  justify-content: center;
  filter: blur(10px);
}

input {
  display: none;
}

label {
  cursor: pointer;
  display: flex;
  width: 33%;
  height: 66px;
  position: relative;
  z-index: 2;
  align-items: center;
  justify-content: center;
}
label > img {
  width: 30px;
  top: 0px;
  bottom: 0;
  margin: auto;
  position: absolute;
  z-index: 3;
  transition: 200ms 100ms cubic-bezier(0.14, -0.08, 0.74, 1.4);
}
label::before {
  content: '';
  position: absolute;
}

.kusokan {
  width: 60px;
  height: 60px;
  background: black;
  position: absolute;
  top: 148px;
  z-index: 1;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transition: 200ms cubic-bezier(0.14, -0.08, 0.74, 1.4);
  box-shadow: 0px 82px 20px 0px rgba(128, 128, 128, 0.29);
}

.ukazatelen {
  width: 70px;
  height: 70px;
  background-image: linear-gradient(0deg, #f7b0b0, rgba(183, 255, 154, 0)), linear-gradient(0deg, rgba(158, 255, 151, 0.75), rgba(183, 255, 154, 0)), linear-gradient(0deg, #b4fffb, rgba(183, 255, 154, 0));
  background-size: cover;
  background-position: 0 10px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: -42px;
  right: 0;
  margin: auto;
  transition: 200ms cubic-bezier(0.14, -0.08, 0.74, 1.4);
}

#pervaya:checked ~ [for="pervaya"] > img {
  top: -90px;
}
#pervaya:checked ~ .kusokan,
#pervaya:checked ~ div div .ukazatelen {
  left: -66%;
}

#vtoraya:checked ~ [for="vtoraya"] > img {
  top: -90px;
}
#vtoraya:checked ~ .kusokan,
#vtoraya:checked ~ div div .ukazatelen {
  left: 0;
}

#tretiya:checked ~ [for="tretiya"] > img {
  top: -90px;
}
#tretiya:checked ~ .kusokan,
#tretiya:checked ~ div div .ukazatelen {
  left: 66%;
}

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

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

Демонстрация
28 Апреля 2020 Загрузок: 5 Просмотров: 866 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar