В последние годы использование мобильных устройств росло очень быстро, и многие люди предпочитают использовать мобильные устройства для работы в Интернете, а не настольные компьютеры. Вот почему создание адаптивных веб-сайтов является важным навыком для разработчиков. Отзывчивый дизайн просто означает создание веб-сайтов, которые хорошо выглядят на всех устройствах.
В этом уроке я покажу вам, как легко создать адаптивный заголовок. Итак, давайте начнем!
Создайте новую папку, в которую мы поместим наши файлы 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'а также 'события указателя: нет', которые мы присваиваем мобильному меню. Для этого все, что вам нужно, это выбрать полосы так, чтобы всякий раз, когда мы нажимали на них, мы переключали активный класс.
Вот и все для этого урока, я надеюсь, что вы найдете его полезным. Вот мой сайт для получения дополнительной информации обо мне веб-сайт