Создание сайта с нуля. Урок 14 - Верстка. Адаптивная шапка и меню

Это 14-й урок по созданию сайта с нуля под ключ на заказ и сегодня мы адаптируем шапку сайта под все разрешения экрана (адаптив).

Смотреть урок на YouTube

Файлы для прохождения урока: Скачать

Что использовали в данном уроке:

Mouse Wheel Animation CSS Icon:

/* ---------------------------------------------- /*
  * Mouse animate icon
/* ---------------------------------------------- */
.mouse-icon {
  border: 2px solid #000;
  border-radius: 16px;
  height: 40px;
  width: 24px;
  display: block;
  z-index: 10;
  opacity: 0.7;
}
.mouse-icon .wheel {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  -webkit-animation-name: drop;
          animation-name: drop;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.mouse-icon .wheel {
  position: relative;
  border-radius: 10px;
  background: #000;
  width: 2px;
  height: 6px;
  top: 4px;
  margin-left: auto;
  margin-right: auto;
}
@-webkit-keyframes drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}
@keyframes drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}

<!-- HTML -->
<div class="mouse-icon"><div class="wheel"></div></div>

Mobile Menu Toggle Button:

<!-- HTML -->
<a href="#" class="toggle-mnu hidden-lg"><span></span></a>

// SASS
.toggle-mnu 
  display: block
  width: 28px
  height: 28px
  margin-top: 14px

  span:after, span:before 
    content: ""
    position: absolute
    left: 0
    top: 9px

  span:after
    top: 18px

  span 
    position: relative
    display: block

  span, span:after, span:before
    width: 100%
    height: 2px
    background-color: #fff
    transition: all 0.3s
    backface-visibility: hidden
    border-radius: 2px

  &.on span 
    background-color: transparent

  &.on span:before 
    transform: rotate(45deg) translate(-1px, 0px)

  &.on span:after 
    transform: rotate(-45deg) translate(6px, -7px)

// jQuery
$(".toggle-mnu").click(function() {
  $(this).toggleClass("on");
  $(".main-mnu").slideToggle();
  return false;
});

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Большой комплексный курс по современному веб-дизайну

Веб-дизайн с нейросетями для начинающих

Я - фрилансер! Базовый курс для начинающих

Создание сайта с нуля. Урок 14 - Верстка. Адаптивная шапка и меню

Что использовали в данном уроке:

Mouse Wheel Animation CSS Icon:

Mobile Menu Toggle Button:

Премиум уроки от WebDesign Master

Другие уроки по теме «CMS/Framework»