ZorNet.Ru — сайт для вебмастера » HTML и CSS » Всплывающее цветное меню для сайта на CSS

Всплывающее цветное меню для сайта на CSS

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

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

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

Все проверялось на тестовой площадке, где при раскрытии идет такой вид.

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

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

Приступаем к установке:

HTML

Код

CSS

Код

.komenege-sanvepsa-garnudsa,
.komenege-sanvepsa-sumopeg-button {
  background: #EEEEEE;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  color: #FFFFFF;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.komenege-sanvepsa-sumopeg {
  display: none;
}

.garnitudsa {
  width: 24px;
  height: 4px;
  background: #596778;
  display: block;
  position: absolute;
  top: 49%;
  left: 49%;
  margin-left: -12.7px;
  margin-top: -1.7px;
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
}

.kugepsa-1 {
  -webkit-transform: translate3d(0, -8px, 0);
  transform: translate3d(0, -8px, 0);
}

.kugepsa-2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.kugepsa-3 {
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
}

.komenege-sanvepsa-sumopeg:checked + .komenege-sanvepsa-sumopeg-button .line-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.komenege-sanvepsa-sumopeg:checked + .komenege-sanvepsa-sumopeg-button .line-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.komenege-sanvepsa-sumopeg:checked + .komenege-sanvepsa-sumopeg-button .line-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.komenege-sanvepsa {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 75px;
  height: 75px;
  text-align: center;
  box-sizing: border-box;
  font-size: 30px;
}

.komenege-sanvepsa-garnudsa:hover {
  background: #f3eded;
  color: #2a8caf;
}

.komenege-sanvepsa-garnudsa:nth-child(3) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.komenege-sanvepsa-garnudsa:nth-child(4) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.komenege-sanvepsa-garnudsa:nth-child(5) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.komenege-sanvepsa-garnudsa:nth-child(6) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.komenege-sanvepsa-garnudsa:nth-child(7) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.komenege-sanvepsa-garnudsa:nth-child(8) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.komenege-sanvepsa-garnudsa:nth-child(9) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.komenege-sanvepsa-sumopeg-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
  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;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.komenege-sanvepsa-sumopeg-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.komenege-sanvepsa-sumopeg:checked + .komenege-sanvepsa-sumopeg-button {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.komenege-sanvepsa-sumopeg:checked ~ .komenege-sanvepsa-garnudsa {
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.komenege-sanvepsa-sumopeg:checked ~ .komenege-sanvepsa-garnudsa:nth-child(3) {
  transition-duration: 180ms;
  -webkit-transition-duration: 180ms;
  -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
  transform: translate3d(0.08361px, -104.99997px, 0);
}

.komenege-sanvepsa-sumopeg:checked ~ .komenege-sanvepsa-garnudsa:nth-child(4) {
  transition-duration: 300ms;
  -webkit-transition-duration: 300ms;
  -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
  transform: translate3d(90.9466px, -52.47586px, 0);
}

.komenege-sanvepsa-sumopeg:checked ~ .komenege-sanvepsa-garnudsa:nth-child(5) {
  transition-duration: 400ms;
  -webkit-transition-duration: 400ms;
  -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
  transform: translate3d(90.9466px, 52.47586px, 0);
}

.komenege-sanvepsa-sumopeg:checked ~ .komenege-sanvepsa-garnudsa:nth-child(6) {
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
  transform: translate3d(0.08361px, 104.99997px, 0);
}

.komenege-sanvepsa-sumopeg:checked ~ .komenege-sanvepsa-garnudsa:nth-child(7) {
  transition-duration: 600ms;
  -webkit-transition-duration: 600ms;
  -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
  transform: translate3d(-90.86291px, 52.62064px, 0);
}

.komenege-sanvepsa-sumopeg:checked ~ .komenege-sanvepsa-garnudsa:nth-child(8) {
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
  transform: translate3d(-91.03006px, -52.33095px, 0);
}

.komenege-sanvepsa-sumopeg:checked ~ .komenege-sanvepsa-garnudsa:nth-child(9) {
  transition-duration: 800ms;
  -webkit-transition-duration: 800ms;
  -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
  transform: translate3d(-0.25084px, -104.9997px, 0);
}

.renosam {
  background-color: #5789ce;
  box-shadow: 3px 3px 0 0 rgba(14, 14, 14, 0.14);
  text-shadow: 1px 1px 0 rgba(12, 12, 12, 0.12);
}

.renosam:hover {
  color: #5991dc;
  text-shadow: none;
}

.komunesab {
  background-color: #64c766;
  box-shadow: 3px 3px 0 0 rgba(14, 14, 14, 0.14);
  text-shadow: 1px 1px 0 rgba(12, 12, 12, 0.12);
}

.komunesab:hover {
  color: #70CC72;
  text-shadow: none;
}

.krasnumig {
  background-color: #FE4365;
  box-shadow: 3px 3px 0 0 rgba(14, 14, 14, 0.14);
  text-shadow: 1px 1px 0 rgba(12, 12, 12, 0.12);
}

.krasnumig:hover {
  color: #FE4365;
  text-shadow: none;
}

.salopetub {
  background-color: #ac75d0;
  box-shadow: 3px 3px 0 0 rgba(14, 14, 14, 0.14);
  text-shadow: 1px 1px 0 rgba(12, 12, 12, 0.12);
}

.salopetub:hover {
  color: #8960a5;
  text-shadow: none;
}

.samilkoged {
  background-color: #e07d2c;
  box-shadow: 3px 3px 0 0 rgba(14, 14, 14, 0.14);
  text-shadow: 1px 1px 0 rgba(12, 12, 12, 0.12);
}

.samilkoged:hover {
  color: #90501b;
  text-shadow: none;
}

.lightrenosam {
  background-color: #449ab9;
  box-shadow: 3px 3px 0 0 rgba(14, 14, 14, 0.14);
  text-shadow: 1px 1px 0 rgba(12, 12, 12, 0.12);
}

.lightrenosam:hover {
  color: #337e98;
  text-shadow: none;
}

.ckrasnumigit {
  margin: 25px 18px 115px 0;
  text-align: right;
  color: #f4f6f7;
}

.ckrasnumigit a {
  padding: 8px 0;
  color: #a374c1;
  text-decoration: none;
  transition: all 0.5s ease 0s;
}

.ckrasnumigit a:hover {
  text-decoration: underline;
}

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

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

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

05 Декабря 2018 Загрузок: 2 Просмотров: 1017 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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