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

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

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

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

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

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

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

HTML

<nav class="komenege-sanvepsa"> 
  <input type="checkbox" href="#" class="komenege-sanvepsa-sumopeg" name="komenege-sanvepsa-sumopeg" id="komenege-sanvepsa-sumopeg" /> 
  <label class="komenege-sanvepsa-sumopeg-button" for="komenege-sanvepsa-sumopeg"> 
  <span class="garnitudsa kugepsa-1"></span> 
  <span class="garnitudsa kugepsa-2"></span> 
  <span class="garnitudsa kugepsa-3"></span> 
  </label> 

  <a href="#" class="komenege-sanvepsa-garnudsa renosam"> <i class="fa fa-university"></i> </a> 
  <a href="#" class="komenege-sanvepsa-garnudsa komunesab"> <i class="fa fa-car"></i> </a> 
  <a href="#" class="komenege-sanvepsa-garnudsa krasnumig"> <i class="fa fa-cloud-download"></i> </a> 
  <a href="#" class="komenege-sanvepsa-garnudsa salopetub"> <i class="fa fa-exclamation-triangle"></i> </a> 
  <a href="#" class="komenege-sanvepsa-garnudsa samilkoged"> <i class="fa fa-thumbs-up"></i> </a> 
  <a href="#" class="komenege-sanvepsa-garnudsa lightrenosam"> <i class="fa fa-diamond"></i> </a> 
</nav>

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.
[center][/center]