Адаптивне меню для будь-якого розміру екрану пристрою

Всі прагнуть створити сайт що він вірно виглядав на різних екранах (від маленьких дозволів 320х480 до 1920х1900, хоча вони можуть бути менше і більше як в одну так і в іншу сторону). І в цьому уроці ми розглянемо як створити адаптивне меню, яке буде правильно виглядати на різних пристроях. А це дуже важливо для користувача, який переглядає ваш сайт з мобільного пристрою.

Урок про те як створити адаптивний шаблон можна знаходиться тут - Як створити адаптується шаблон.

Реальний приклад можна побачити тут:

Подивитися прімерСкачать

HTML частина

Підключіть обов`язково останню jQuery бібліотеку (вона доступна тут). Структура наступна:

123456789101112131415161718192021222324

id="Menu" class="Nav"gt;lt;ulgt;lt;ligt;lt;ahref="#" title=""gt;lt;spanclass="Icon"gt; lt;i aria-hidden="True"class="Icon-home"gt; lt;/igt; lt;/spangt; lt;spangt; Головнаlt;/spangt;lt;/agt;lt;/ligt;lt;ligt;lt;a href="#" title=""gt; lt;span class="Icon"gt; lt;i aria-hidden="True" class="Icon-services"gt; lt;/igt; lt;/spangt; lt;spangt; Сервісиlt;/spangt; lt;/agt;lt;/ligt;lt;ligt;lt;ahref="#" title=""gt; lt;spanclass="Icon"gt; lt;i aria-hidden="True" class="Icon-portfolio»gt; lt;/igt; lt;/spangt; lt;spangt; Портфоліоlt;/spangt; lt;/agt;lt;/ligt;lt;ligt;lt;ahref="#" title=""gt; lt;spanclass="Icon"gt; lt;i aria-hidden="True" class="Icon-blog"gt; lt;/igt; lt;/spangt; lt;spangt; Блогlt;/spangt; lt;/agt;lt;/ligt;lt;ligt;lt;ahref="#" title=""gt; lt;spanclass="Icon"gt; lt;i aria-hidden="True" class="Icon-team"gt; lt;/igt; lt;/spangt; lt;spangt; Командаlt;/spangt; lt;/agt;lt;/ligt;lt;ligt;lt;ahref="#" title=""gt; lt;spanclass="Icon"gt; lt;i aria-hidden="True" class="Icon-contact"gt; lt;/igt; lt;/spangt; lt;spangt; Контактиlt;/spangt; lt;/agt;lt;/ligt;lt;/ulgt;lt;/navgt;

Щоб використовувати значок ми задаємо спеціальні класи icon-name. Також щоб використовувати бібліотеку Modernizr.js ми додали до тегом клас no-js, що дозволяє показувати меню якщо javascript відключений в браузері користувача.

javascriptCSS частина

Для початку поставимо основні стилі:

123456789101112131415161718192021222324252627

.nav ul {max-width: 1240px-margin: 0-padding: 0-list-style: none-font-size: 1.5em-font-weight: 300-}.nav li span {display: block-}.nav a {display: block-color: rgba(249, 249, 249, .9)-text-decoration: none-transition: color .5s, background .5s, height .5s-}.nav i{transform: translate3d(0, 0, 0)-}a, button {-webkit-tap-highlight-color: rgba(0,0,0,0)-}

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

Також при наведенні всі елементи меню затемняются:

.no-touch .nav ul: hover a {color: rgba(249, 249, 249, .5)-}.no-touch .nav ul: hover a: hover {color: rgba(249, 249, 249, 0.99)-}

Кожен елемент меню має свій колір:

1234567891011121314151617181920212223

.nav li: nth-child(6n+1) {background: rgb(208, 101, 3)-}.nav li: nth-child(6n+2) {background: rgb(233, 147, 26)-}.nav li: nth-child(6n+3) {background: rgb(22, 145, 190)-}.nav li: nth-child(6n+4) {background: rgb(22, 107, 162)-}.nav li: nth-child(6n+5) {background: rgb(27, 54, 71)-}.nav li: nth-child(6n+6) {background: rgb(21, 40, 54)-}

Відео: Як створити адаптивне меню для сайту

При наведенні елемент меню стає більше по вертикалі, але збільшується воно плавно:

1234567891011121314

.nav a {height: 9em-}.no-touch .nav a: hover ,.no-touch .nav a: active ,.no-touch .nav a: focus {height: 10em-}.no-touch .nav a: hover .icon + span {margin-top: 3.2em-transition: margin .5s-}

Для екранів від 520px до 799px також задані інші значення властивостей. А також для екранів менше 520px властивості відрізняються і задаються окремо. Я не викладаю весь код, тому що він немаленький, але ви можете завантажити приклад і побачити як все зроблено.

Для дуже маленьких екранів меню «ховається» і видно лише кнопка (або перемикач) за допомогою якого можна приховати / розкрити меню. Для цього в javascript необхідно прописати наступне:

1234567891011121314151617181920212223242526

var changeClass = function (r,className1,className2) {var regex = new RegExp("(?: ^ |s +) " + className1 + "(?:s + | $) ")-if( regex.test(r.className) ) {r.className = r.className.replace(regex,``+className2+``)-}elses +) " + className2 + "(?:s +return r.className-}-var menuElements = document.getElementById(`Menu`)-menuElements.insertAdjacentHTML(`AfterBegin`,``)-document.getElementById(`Menutoggle`).onclick = function() {changeClass(this, `Navtoogle active`, `Navtoogle`)-}document.onclick = function(e) {var mobileButton = document.getElementById(`Menutoggle`),buttonStyle = mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display-if(buttonStyle === `Block`  e.target !== mobileButton  new RegExp(`` + `Active` + ``).test(`` + mobileButton.className + ``)) {changeClass(mobileButton, `Navtoogle active`, `Navtoogle`)-}}