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

Полное раскрывающееся меню CSS с анимацией

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

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

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

Здесь видим по умолчанию, где кнопка установлена для раскрытие основного меню.

Так уже при раскрытие будет, но если при наведение клика ярче знаки становятся.

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

Давайте начнем с основного HTML:

Код

<nav>
  <button class="kilposantun"></button>
  <span></span>
  <ul>
  <li>ZORNET.TU</li>
  <li>СКРИПТЫ</li>
  <li>ШАБЛОНЫ</li>
  <li>ДИЗАЙН САЙТА</li>
  </ul>
  </nav>
  <article>
  <img src="http://zornet.ru/ABVUN/1283851710_wallpaper_battlefield_b-Jq8Gv.jpg" alt="ZorNet.Ru: Создание сайта самостоятельно" />
  <h1>ZORNET.RU</h1>
  <p>ZorNet: Создание сайта на uCoz <a href="#">ZORNET.RU</a> описание, где установлена ссылка.</p>
  <p>Второе описание, что можете разместить статью или то что считаете нужным, все будет под изображением.</p>
  </article>

CSS:

Код

*{margin:0;padding:0;border:0;outline:0;}
body,html{height:100%;}
body{
  width:100%;
  background:#f1e5e1;
  font-family: 'Lato', sans-serif;
  color: #1b252d;
}

.kilposantun {
  position: absolute;
  top: 19px;
  right: 19px;
  margin-right: 21px;
  width: 49px;
  height: 49px;
  border-radius: 73%;
  background: #0e3c58;
  opacity: 0.95;
  transform: translatez(0px);
  transition: transform .5s cubic-bezier(0.4, 0, 0.15, 0.88);
  visibility: visible;
  cursor: pointer;
  z-index: 0;
}
.kilposantun:focus{
  transform:scale(100) translatez(0px);
  cursor:default;
}

button + span {
  position: absolute;
  top:34px; right:45px;
  width: 20px; height: 2px;
  padding:10px;
  background-clip:content-box;
  background-color: #f2f2fb;
  pointer-events:none;
  transition: background-color .4s ease-in-out;
  visibility:visible;
  cursor:pointer;
}
button + span:before, button + span:after {
  position: absolute;
  background: #fff;
  content: '';
  width: 19px;
  height: 2px;
  transition: transform .4s ease-in-out;
}
button + span:before {
  top: 2px;
}
button + span:after {
  bottom: 2px;
}

button:focus + span {
  background-color: transparent;
  pointer-events:auto;
}
button:focus + span:before {
  transform: rotate(44deg) translate(5px, 6px);
}
button:focus + span:after {
  transform: rotate(-44deg) translate(5px, -6px);
}

nav{
  position:fixed;
  display:table;
  width:inherit; height:inherit;
  top:inherit; left:inherit;
  background:green;
  overflow:hidden;
  visibility:hidden;
}
ul{
  position:relative;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
li{
  list-style-type:none;
  font-size:2em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.7);
  margin:1em;
  opacity:0;
  cursor:pointer;
  transition:opacity .8s, color .2s;
}
button:focus ~ ul li:hover{
  color:rgba(255,255,255,1);
}
button:focus ~ ul li{
  visibility:visible;
  opacity: 0.7;
}

img{width:100%; display:block;}
h1, p{padding:0 5%;margin:40px 0;}
p{text-align:justify;margin:20px 0;}
article a, article a:active{color:#443E2D}

В этом предоставлено раскрывающееся меню, созданное только на CSS с анимацией.

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

28 Апреля 2018 Просмотров: 1218 Комментариев: (0)

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

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

Kosten

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