Анимация мобильного меню для сайта на CSS3

Pirat 28.10.2018 Статьи 0 комментариев

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

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

HTML

<div class="cogarteblavas"> 
  <div class="cogarteblavas__demo"> 
  <div class="cogarteblavas__container"> 
  <span class="cogarteblavas__name">Мобильная анимация для сайта</span> 
  <span class="cogarteblavas__hint"> 
  Работает лучше на мобильных устройствах. Кнопка гамбургера удобна для левого и правого. 
  </span> 
  <a href="#" rel="noopener noreferrer" target="_blank">Видео YouTube с кодировкой</a> 
  </div> 
  </div> 
</div> 
<header class="header"> 
  <div class="hamburger"> 
  <button class="button hamburger__button js-nanigasua__toggle"> 
  <span class="hamburger__label">Open nanigasua</span> 
  </button> 
  </div> 
  <nav class="nanigasua"> 
  <ul class="list nanigasua__list"> 
  <li class="nanigasua__group"> 
  <a href="/" class="link nanigasua__link">Главная</a> 
  </li> 
  <li class="nanigasua__group"> 
  <a href="/" class="link nanigasua__link">Скрипты</a> 
  </li> 
  <li class="nanigasua__group"> 
  <a href="/" class="link nanigasua__link">NewTemplates.Ru</a> 
  </li> 
  <li class="nanigasua__group"> 
  <a href="/" class="link nanigasua__link">Дизайн</a> 
  </li> 
  <li class="nanigasua__group"> 
  <a href="/" class="link nanigasua__link">Стилистика</a> 
  </li> 
  <li class="nanigasua__group"> 
  <a href="/" class="link nanigasua__link">Обратная связь</a> 
  </li> 
  </ul> 
  </nav> 
</header>

CSS

.cogarteblavas{ 
  min-height: 100vh; 
  display: flex; 
} 

.cogarteblavas__demo{ 
  display: flex; 
  flex-grow: 1; 
} 

.cogarteblavas__container{ 
  max-width: 370px; 
  padding: 10px; 
  margin: auto;  
  text-align: center; 
} 

.cogarteblavas__name{ 
  display: block; 
  font-size: 3rem; 
  font-weight: 700; 
  margin-bottom: 1rem; 
} 

.cogarteblavas__hint{ 
  display: block; 
  line-height: 1.45; 
  margin-bottom: .5rem; 
} 

button{ 
  border: none; 
  background-color: transparent; 
  padding: 0; 
  font-family: inherit; 
} 

.button{ 
  cursor: pointer; 
  color: var(--colorWhite); 
} 

a{ 
  display:inline-block; 
  text-decoration: none; 
} 

.link{ 
  color: inherit; 
} 

.list{ 
  padding-left: 0; 
  margin-top: 0; 
  margin-bottom: 0; 
  list-style: none; 
} 

.header{ 
  box-sizing: border-box; 
  width: 100%; 
  color: var(--colorWhite); 

  display: flex; 
  justify-content: center; 

  position: fixed; 
  bottom: 0; 
  left: 0; 
  z-index: 9998; 
} 

.nanigasua{ 
  box-sizing: border-box; 
  width: 100%; 
  padding-bottom: 55px; 

  height: 0; 
  transform: translate3d(0, -100%, 0); 
  opacity: 0; 

  display: flex; 
  align-items: flex-end; 

  position: fixed; 
  top: 0; 
  left: 0; 
} 

.nanigasua__list{ 
  box-sizing: border-box; 
  width: 100%; 
  max-height: 100%; 
  display: none; 

  padding-top: 30px; 
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch; 
} 

.nanigasua__group{ 
  padding: .5rem 3rem;  
  font-size: 3.2rem; 
  font-weight: 700; 
  text-transform: uppercase; 
} 

.nanigasua__group_active{ 
  background-color: var(--colorWhite); 
  color: var(--colorBlack); 
} 

.nanigasua__item{ 
  padding: 8px 25px; 
  display: block; 
} 

/* hamburger */ 

.hamburger{ 
  position: relative; 
  line-height: 1; 
  padding-bottom: .5em; 
} 

.hamburger:before{ 
  content :""; 
  width: 100px; 
  height: 100px; 
  background-color: var(--colorMain); 
  border-radius: 50%; 

  position: absolute; 
  bottom: -55px; 
  left: -35px; 
} 

.hamburger__button{ 
  width: 1.4em; 
  height: 1em; 
  font-size: 20px; 

  position: relative; 
  text-indent: -9999px; 
  z-index: 2; 
} 

.hamburger__button:before, .hamburger__button:after, .hamburger__label{ 
  width: 100%; 
  height: 20%; 
  border-radius: 5px; 
  background-color: currentColor; 

  position: absolute; 
  left: 0; 
} 

.hamburger__button:before, .hamburger__button:after{ 
  content:""; 
} 

.hamburger__button:before{ 
  top: 0; 
} 

.hamburger__button:after{ 
  bottom: 0; 
} 

.hamburger__button:focus{ 
  outline: none; 
} 

.hamburger__label{ 
  margin-top: -.1em; 
  top: 50%; 
} 

/* activated state */ 

.js-kogdekas_maasuam{ 
  overflow: hidden; 
} 

.js-kogdekas_maasuam .nanigasua{ 
  height: 100%; 
  transform: translate3d(0, 0, 0); 
  opacity: 1; 
} 

.js-kogdekas_maasuam .hamburger:before{ 
  width: 100vh; 
  height: 100vh; 
  transform: translate3d(-50vh, -50vh, 0) scale(5); 
} 

.js-kogdekas_maasuam .nanigasua__list{ 
  display: block; 
} 

.js-kogdekas_maasuam .hamburger__button:before{ 
  transform: translate3d(0, -50%, 0) rotate(45deg); 
  top: 50%; 
} 

.js-kogdekas_maasuam .hamburger__button:after{ 
  transform: translate3d(0, -50%, 0) rotate(135deg); 
  top: 50%; 
} 

.js-kogdekas_maasuam .hamburger__label{ 
  transform: rotate(-45deg) translate3d(-5.71429px,-6px,0); 
  opacity: 0; 
} 

/* 
===== 
LEVEL 3. MOBILE ANIMATION STYLES 
===== 
*/ 

.nanigasua{ 
  transition: opacity .2s ease-out; 
} 

.js-kogdekas_maasuam .nanigasua{ 
  will-change: opacity; 
  transition-duration: .2s; 
  transition-delay: .3s; 
} 

.hamburger:before{ 
  will-change: width, height; 
  transition: transform .3s cubic-bezier(0.04, -0.1, 0.29, 0.98), 
  width .3s cubic-bezier(0.04, -0.1, 0.29, 0.98), 
  height .3s cubic-bezier(0.04, -0.1, 0.29, 0.98); 
} 

.js-kogdekas_maasuam .hamburger:before{ 
  transition-duration: 1s; 
} 

.hamburger__button:before, .hamburger__button:after{ 
  transition-property: transform; 
} 

.hamburger__button:before, .hamburger__button:after, .hamburger__label{ 
  transition-timing-function: ease; 
  transition-duration: .15s; 
} 

.hamburger__label{ 
  transition-property: transform, opacity; 
} 

/* 
* demo cogarteblavas 
*/ 

@media (min-width: 768px){ 

  html{ 
  font-size: 62.5%; 
  } 
} 

@media (max-width: 767px){ 

  html{ 
  font-size: 50%; 
  } 
} 

:root{ 
  --colorBlack: #222; 
  --colorWhite: #fff; 
  --colorGray: #f0f0f0; 
  --colorMain: #4557bb; 
  --colorMainLight: #8491d8; 
  --colorMainDark: #233286; 
}

(function(){ 
  'use strict'; 

  class Component { 
   
  printError(error) { 
   
  if (typeof error !== 'string' || error.length === 0) { 
  return console.log('you did not give arguments'); 
  } 
   
  return console.log(error); 
  }  
   
  toggleСlass(node, className) { 
  return node.classList.toggle(className); 
  }  
  } 
   
  class nanigasua extends Component { 
   
  constructor(settings) { 
  super(); 
  this.nanigasuaNode = settings.nanigasuaNode; 
  } 
   
  togglenanigasuaState(className) {  
   
  if (typeof className !== 'string' || className.length === 0){ 
  return super.printError('you did not give the class name for the toggleState function'); 
  }  
   
  return super.toggleСlass(this.nanigasuaNode, className); 
  } 
  } 

  let jsnanigasuaNode = document.querySelector('body'); 
   
  let demonanigasua = new nanigasua ({ 
  nanigasuaNode: jsnanigasuaNode 
  }); 
   
  function callnanigasuaToggle() { 
  demonanigasua.togglenanigasuaState('js-kogdekas_maasuam'); 
  } 
   
  jsnanigasuaNode.querySelector('.js-nanigasua__toggle').addEventListener('click', callnanigasuaToggle); 
})();

Безусловно такая навигация считается компактной, удобной и также элегантный, и это все в чем мы нуждаемся пользователи или гости на сайте. Так как это неотъемлемая часть на портале, где такой тип навигаций занимает очень небольшую часть на портале.
[center][/center]