Як створити адаптивну навігацію

Однією з найскладніших частин відповіді на веб-сайті “Навігація”, ця частина дійсно важлива для доступності веб-сайту, оскільки це один із способів переходу відвідувачів на веб-сторінки.

Насправді існує багато способів створення адаптивної навігації веб-сайтами, і навіть деякі плагіни jQuery доступні для виконання за секунду.

Однак, замість того, щоб застосовувати миттєве рішення, на цій посаді ми збираємося пройти через вас як побудувати просту навігацію з землі і використання медіа-запитів CSS3 і невеликий jQuery для відображення його в невеликому розмірі екрану, як, наприклад, смартфони належним чином.

Отже, давайте просто почнемо.

Демо
Завантажити джерело

HTML

Перш за все, додамо мета-вигляд всередину керівник . Це метапоказ Для належного масштабування сторінки в межах будь-якого розміру екрана, особливо в мобільному вікні перегляду, потрібний тег.

… І потім додати наступний фрагмент як позначку навігації всередині тіла тег.

   Головна
 Як
 Ікони
 Дизайн
 Web 2.0
 Інструменти
 
 Меню

Як ви можете бачити вище, у нас є шість основних посилань меню і додано ще одне посилання за ними. Для цього буде використано додаткове посилання тягнути навігація меню, коли вона прихована в маленькому екрані.

Подальше читання: Не забувайте мета-тег вікна перегляду.

Стилі

У цьому розділі ми починаємо стилізацію навігації. Стиль тут тільки декоративний, ви можете вибрати будь-які кольори, як ви бажаєте. Але в цьому випадку ми (я особисто) хочу тіла мати м'який і кремовий колір.

 тіло background-color: # ece8e5;

The nav тег, який визначає навігацію 100% повна ширина вікна браузера, в той час як ul де він містить наші основні посилання меню буде мати 600px для ширини.

 nav висота: 40px; ширина: 100%; фон: # 455868; розмір шрифту: 11pt; сімейство шрифтів: 'PT Sans', Arial, sans-serif; font-weight: bold; позиція: відносна; кордон нижній: 2px твердотільний # 283744;  nav ul padding: 0; маржа: 0 авто; ширина: 600px; висота: 40px;

Тоді ми будемо плавати меню ліворуч, так що вони будуть відображатися горизонтально поруч, але плаваючий елемент також призведе до згортання їх батьків.

 nav li display: inline; поплавок: лівий;

Якщо ви помітили, що розмітка HTML вище, ми вже додали clearfix в клас атрибут для обох nav і ul щоб очистити речі, коли ми плаваємо елементи всередині нього, використовуючи цей CSS clearfix hack. Отже, додамо наступні правила стилів до таблиці стилів.

 .clearfix: before, .clearfix: after content: ""; дисплей: таблиця;  .clearfix: після clear: обидва;  .clearfix * масштабування: 1;

Оскільки у нас є шість посилань меню і ми також вказали контейнер для 600px, кожне меню буде мати посилання 100px для ширини.

 nav a color: #fff; дисплей: вбудований блок; ширина: 100px; text-align: center; текст-прикраса: немає; висота рядка: 40px; текстова тінь: 1px 1px 0px # 283744;

Посилання меню будуть розділені за допомогою 1px Правий край, за винятком останнього. Запам'ятайте нашу попередню посаду на моделі коробки, ширина меню буде розширена 1px роблячи це 101px як доповнення до кордону, тому тут ми змінюємо розмір коробки модель до кордон щоб зберегти меню залишається 100px.

 навігація: border-right: 1px solid # 576979; розмір коробки: кордон; -moz-box-sizing: бордюр; -вебкіт-короб-розмір: border-box;  навігація: остання дитина прикордонний-право: 0;

Далі меню буде мати яскравіший колір : hover або : active стан.

 nav a: hover, nav a: активний background-color: # 8c99a4;

… І, нарешті, додаткове посилання буде приховано (для екрану робочого столу).

 nav a # pull display: none;

На цьому етапі ми лише стилюємо навігацію і нічого не станеться, коли ми змінюватимемо розмір вікна браузера. Отже, перейдемо до наступного кроку.

Подальше читання: Розміри коробки CSS3 (Hongkiat.com)

Запити медіа

Засоби медіа CSS3 використовуються для визначення того, як стили зміщуються в деяких певних точках зупинки або, зокрема, в розмірах екрана пристрою.

Так як наша навігація спочатку 600px fix-width, ми спочатку визначимо стилі, коли вони будуть переглядатися 600px або нижній розмір екрану, тому практично кажучи, це це наша перша контрольна точка.

У цьому розмірі екрана, кожне з двох посилань меню буде відображатися поруч, так що ulШирина тут буде 100% вікна веб-переглядача, коли буде показано посилання на меню 50% для ширини.

 Екран @media та (max-width: 600px) nav height: auto;  ширина: 100%; дисплей: блок; висота: авто;  nav li ширина: 50%; поплавок: лівий; позиція: відносна;  навігація дно-кордону: 1px твердо # 576979; кордон-право: 1px твердий # 576979;  nav a text-align: left; ширина: 100%; text-indent: 25px;

… А потім ми також визначаємо, як відображається навігація, коли екран зменшується 480px або нижче (так що це наша друга точка зупину).

У цьому розмірі екрана додаткове посилання, яке ми додали, почнеться видимим, і ми також надаємо посилання a “Меню” з правого боку за допомогою значка : після псевдоелемент, а головні посилання меню будуть приховані, щоб зберегти більше вертикальних проміжків на екрані.

 Екран @media only та (max-width: 480px) nav border-bottom: 0;  nu ul display: none; висота: авто;  nav a # pull display: block; фоновий колір: # 283744; ширина: 100%; позиція: відносна;  nav a # pull: after content: ""; background: url ('nav-icon.png') не повторюється; ширина: 30px; висота: 30px; дисплей: вбудований блок; позиція: абсолютна; праворуч: 15px; зверху: 10px;

Нарешті, коли екран стає меншим 320 пікс і нижнє меню відображатиметься вертикально зверху вниз.

 @media only та (max-width: 320px) nav li display: block; поплавок: немає; ширина: 100%;  навігація дно-кордону: 1px твердо # 576979;

Тепер можна спробувати змінити розмір вікна веб-переглядача. Тепер він повинен мати можливість адаптувати розмір екрану.

Подальше читання: Запити засобів масової інформації для стандартних пристроїв.

Відображення меню

На цьому етапі меню все одно буде приховано і буде видно лише тоді, коли це необхідно, натиснувши або натиснувши на “Меню” посилання і ми можемо досягти ефекту, використовуючи jQuery slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('click', функція (e) e.preventDefault ();););

Проте, коли ви змінюєте розмір вікна веб-переглядача відразу після перегляду та сховання меню на маленькому екрані, меню залишатиметься прихованим, оскільки дисплей: немає Стиль, створений jQuery, все ще прикріплений до елемента.

Отже, нам потрібно видалити цей стиль за розміром вікна, а саме:

 $ (window) .resize (function () var w = $ (window) .width (); if (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

Добре, це всі коди, які нам потрібні, тепер ми можемо переглядати навігацію з наведених нижче посилань, і ми рекомендуємо вам перевірити її у відповідь на тестовий інструмент для розробки, наприклад, "Відповідач", щоб можна було переглянути її різною шириною одразу.

Демо
Завантажити джерело

Бонус: Альтернативний шлях

Як ми вже згадували раніше в цій публікації, існують деякі інші способи її використання та використання бібліотеки JavaScript SelectNav.js є одним з найпростіших способів. Це чистий JavaScript, який не покладається на іншу бібліотеку третіх сторін, як jQuery.

В основному, він буде дублювати меню списку і перетворити його в a меню буде використовувати власний інтерфейс користувача з самого пристрою.

Будь ласка, зверніться до офіційної документації для подальшої реалізації.

Висновок

Ми пройшли всі шляхи для створення адаптивної навігації з нуля. Цей, який ми створили тут, є лише одним з прикладів, і, як ми вже говорили на цьому посту і показаному вище, існує багато інших рішень, які можна впровадити. Таким чином, тепер залишити для вашого рішення, щоб вибрати, які практики, які найкраще підходять для задоволення вимог і структури веб-сайту навігації.