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

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

Создайте новую папку, в которую мы поместим наши файлы HTML, CSS и JavaScript. Вам нужно будет добавить Font Awesome CDN в документ, чтобы использовать значок полос.

Давайте начнем писать реальный код для нашего отзывчивого заголовка. Откройте редактор кода и добавьте это в свой HTML-документ:

<header>
  <div class="header-inner">
    <h2 class="logo">LO<span>GO</span></h2>
    <i id="bars" class="fas fa-bars bars"></i>
    <nav class="nav-menu">
      <a href="#" class="nav-link">Home</a>
      <a href="#" class="nav-link">About</a>
      <a href="#" class="nav-link">Services</a>
      <a href="#" class="nav-link">Contact</a>
    </nav>
  </div>
</header>
<nav id="mobileMenu" class="mobile-menu">
  <a href="#" class="nav-link">Home</a>
  <a href="#" class="nav-link">About</a>
  <a href="#" class="nav-link">Services</a>
  <a href="#" class="nav-link">Contact</a>
</nav>

Я создал заголовок с div, который содержит другие элементы заголовка. Я использовал div, чтобы содержимое занимало только 80% ширины (мы вернемся к этому позже в CSS). У нас также есть логотип и значок с полосами от Font Awesome и, наконец, меню навигации как для настольных компьютеров, так и для мобильных пользователей.

Теперь, когда у нас есть HTML-код, нам нужно придать ему несколько стилей. Так что давай так и сделаем :D

Вот стили, я объясню самые важные части:

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  height: 1000px;
}
header{
  position: relative;
  z-index: 2;
  background-color: #333;
}
.header-inner{
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo{
  color: #fff;
  cursor: default;
}
.logo span{
  color: #FFFF00;
}
.bars{
  font-size: 26px;
  color: #fff;
  display: none;
  cursor: pointer;
  transition: color 0.6s ease;
}
.bars:hover{
  color: #FFFF00;
}
.nav-link{
  margin-left: 30px;
  color: #fff;
  text-decoration: none;
  transition: color 0.6s ease;
}
.nav-link:hover{
  color: #FFFF00;
}
.mobile-menu{
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #222;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  pointer-events: none;
}
@media screen and (max-width: 768px){
  .bars{
    display: block;
  }
  
  .nav-menu{
    display: none;
  }
  
  .active{
  left: 0;
  opacity: 1;
  pointer-events: auto;
  transition: left 0.6s ease-in-out;
  }
  
  .nav-link{
    font-size: 24px;
    margin: 30px 0;
  }
}
  • Прежде всего, я удалил отступы и поля по умолчанию и установил размер поля на рамку.
  • Я установил для заголовка position: relative и z-index: 2, чтобы сделать его над меню мобильной навигации.
  • Я добавил display none к барам, потому что нам нужно, чтобы они отображались только на небольших устройствах.
  • Я также добавил класс под названием active, который мы будем использовать для отображения мобильного меню всякий раз, когда кто-то нажимает на панели.
  • Я использовал медиа-запросы, чтобы отобразить значок полосы, когда ширина меньше 768 пикселей, и добавил 'left: -100%'и 'opacity: 0'в мобильное меню, которое сделает его невидимым, пока кто-нибудь не щелкнет значок полосы, мы также задаем для 'pointer-events' значение 'none', который предотвратит все щелчки (это на всякий случай, потому что opacity: 0 не означает, что вы не можете видеть указатель, если наводите курсор на навигационные ссылки…)

Это самый важный код CSS, который вам нужно понять. Давайте теперь перейдем к JavaScript:

const bars = document.getElementById('bars');
const mobileMenu = document.getElementById('mobileMenu');
bars.addEventListener('click', function() {
  mobileMenu.classList.toggle('active')
})

Я использовал JavaScript, чтобы переключить активный класс, который удалит 'left: -100%' и'opacity: 0'а также 'события указателя: нет', которые мы присваиваем мобильному меню. Для этого все, что вам нужно, это выбрать полосы так, чтобы всякий раз, когда мы нажимали на них, мы переключали активный класс.

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