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

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

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

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

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

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

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

Установка:

HTML

Код

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 Просмотров: 1002 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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