» »

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

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

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

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

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

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

Цветное выпадающее меню на CSS

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

Красивое выпадающее меню на CSS3

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

Плавно выпадающее меню

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

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.

Демонстрация
2018-12-05 Загрузок: 2 Просмотров: 254 Комментарий: (0)

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

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

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