Как да създадете отзивчива навигация

Една от най-трудните части responsified на уебсайт е “навигацията”, тази част е наистина важна за достъпността на сайта, тъй като това е един от начините, по които посетителите прескачат уеб страниците.

Всъщност има много начини за създаване на отзивчива навигация в уеб сайта и дори някои jQuery плъгини са на разположение, за да го направят за секунда.

Въпреки това, вместо да прилагаме мигновено решение, в този пост ще ви преведем как да се изгради проста навигация от земята и използването на медийни запитвания на CSS3 и малко jQuery за показване в малък размер на екрана, както правилно смартфоните.

Така че, нека започнем.

Демонстрация
Изтеглете Източник

HTML

На първо място, нека добавим метапоглед във вътрешността на глава маркер. Това метапоглед е необходим за правилно мащабиране на страницата ни във всеки размер на екрана, особено в мобилния изглед.

… И след това добавете следния фрагмент като навигационна маркировка вътре в тяло свободен край.

   У дома
 Как да
 Икони
 Дизайн
 Web 2.0
 Инструменти
 
 Меню

Както можете да видите по-горе, имаме шест основни връзки в менюто и добавихме още една връзка след тях. Тази допълнителна връзка ще бъде използвана дърпам навигацията в менюто, когато е скрита в малък екран.

Допълнителна информация: Не забравяйте мета маркера на екрана.

Стилове

В този раздел започваме стилизирането на навигацията. Стилът тук е само декоративен, можете да изберете всякакви цветове, както желаете. Но в този случай ние (аз лично) искам тяло да има мек и кремав цвят.

 тяло цвят на фона: # ece8e5;

Най- навигация , който дефинира навигацията 100% пълната ширина на прозореца на браузъра, докато ул където той съдържа нашите основни менюта връзки ще имат 600px за ширината.

 nav височина: 40px; ширина: 100%; фон: # 455868; размер на шрифта: 11pt; семейство на шрифта: „PT Sans“, Arial, sans-serif; тегло на шрифта: удебелен; позиция: относителна; граница отдолу: 2px твърдо # 283744;  nav ul padding: 0; марж: 0 авто; ширина: 600 пиксела; височина: 40px;

Тогава ще го направим поплавък менюто се свързва вляво, така че те ще се показват хоризонтално един до друг, но плаващ елемент също ще доведе до свиване на родителите им.

 nav li display: inline; поплавък: наляво;

Ако забележите, че над HTML маркировката по-горе, вече сме добавили clearfix в клас атрибут за двете навигация и ул да изчистим нещата, когато пуснем елементите вътре в него, използвайки този CSS clearfix hack. Така че нека добавим следните стилови правила в стиловия лист.

 .clearfix: преди, .clearfix: след content: ""; дисплей: маса;  .clearfix: след ясно: и двете;  .clearfix * zoom: 1;

Тъй като имаме шест връзки в менюто и сме посочили контейнера за 600px, всяко меню ще има връзки 100px за ширината.

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

Връзките на менюто ще бъдат разделени с 1 пиксел дясната граница, с изключение на последната. Запомни предишния ни пост в кутията модел, ширината на менюто ще бъде разширена за 1 пиксел правя го 101px като допълнение към границата, така че тук променяме кутия оразмеряване модел гранично-кутия за да запазите менюто остава 100px.

 nav li a border-right: 1px solid # 576979; кутия оразмеряване граница кутия; -moz кутия оразмеряване граница кутия; -webkit кутия оразмеряване: граничен кутия;  nav ли: последно дете на border-right: 0;

След това менюто ще има по-ярък цвят, когато е в него : навъртам или :активен състояние.

 nav a: hover, nav a: активен фонов цвят: # 8c99a4;

… И накрая, допълнителната връзка ще бъде скрита (за екрана на работния плот).

 nav a # pull дисплей: няма;

В този момент само стилизираме навигацията и нищо няма да се случи, когато преоразмеряваме прозореца на браузъра. Така че, нека преминем към следващата стъпка.

Допълнителна информация: Размер на кутията на CSS3 (Hongkiat.com)

Медийни заявки

CSS3 медийните заявки се използват, за да се определи как стиловете ще се променят в някои определени точки на прекъсване или по-специално в размерите на екрана на устройството.

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

В този размер на екрана всяка от двете връзки на менюто ще се показва една до друга, така че улширината тук ще бъде 100% на прозореца на браузъра, докато връзките в менюто ще имат 50% за ширината.

 @media екран и (max-width: 600px) nav height: auto;  nav ul ширина: 100%; дисплей: блок; височина: автоматично;  nav ли ширина: 50%; поплавък: наляво; позиция: относителна;  навик на border-bottom: 1px solid # 576979; Граница вдясно: 1px solid # 576979;  nav a text-align: left; ширина: 100%; text-indent: 25px;

… И след това определяме също как се показва навигацията, когато екранът стане по-малък 480px или по-ниска (така че това е втората ни точка на прекъсване).

В този размер на екрана допълнителната връзка, която добавихме преди, ще започне да се вижда и ние също даваме връзката a “Меню” икона от дясната й страна с помощта на :след псевдо-елемент, докато основните връзки в менюто ще бъдат скрити, за да се запазят повече вертикални пространства на екрана.

 @media само екран и (макс-ширина: 480px) Nav border-bottom: 0;  nav ul дисплей: няма; височина: автоматично;  nav a # pull display: block; цвят на фона: # 283744; ширина: 100%; позиция: относителна;  nav a # pull: след content: ""; фон: url ('nav-icon.png') не се повтаря; ширина: 30px; височина: 30px; дисплей: вграден блок; позиция: абсолютна; вдясно: 15px; отгоре: 10px;

Накрая, когато екранът стане по-малък 320 и долното меню ще се показва вертикално отгоре надолу.

 @media only screen и (max-width: 320px) nav li display: block; плувка: няма; ширина: 100%;  навик на border-bottom: 1px solid # 576979;

Сега можете да опитате да промените размера на прозореца на браузъра. Сега трябва да може да адаптира размера на екрана.

Допълнителна информация: Медийни заявки за стандартни устройства.

Показва се менюто

На този етап менюто ще остане скрито и ще се вижда само когато е необходимо, като натиснете или кликнете върху “Меню” връзка и можем да постигнем ефекта с помощта на jQuery slideToggle ().

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

Когато промените размера на прозореца на браузъра веднага след като сте прегледали и скрили менюто на малък екран, менюто ще остане скрито, тъй като дисплей: няма стилът, генериран от jQuery, все още е прикрепен към елемента.

Така че трябва да премахнем този стил при преоразмеряване на прозореца, както следва:

 $ (window) .resize (функция () var w = $ (window) .width (); if (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

Добре, това са всичките кодове, от които се нуждаем, сега можем да прегледаме навигацията от следните връзки и ви препоръчваме да го тествате в реагиращ тестов инструмент за проектиране, като например „Отговорник“, за да можете да го видите в различна ширина.

Демонстрация
Изтеглете Източник

Бонус: Алтернативен начин

Както споменахме по-рано в този пост, има и други начини да го направим и използваме JavaScript библиотека SelectNav.js е един от най-лесния начин. Това е чист JavaScript, който не разчита на друга трета страна като jQuery.

По принцип ще дублира списъка ви и ще го превърне в a Менюто ще използва местния потребителски интерфейс от самото устройство.

Моля, обърнете се към официалната документация за по-нататъшно изпълнение.

заключение

Преминахме през целия път, за да създадем отзивчива навигация от нулата. Този, който създадохме тук, е само един от примерите и както казахме по-рано в тази публикация и показани по-горе, има много други решения, които можете да внедрите. Така че сега е позволено да вземете решението си да изберете коя практика е най-подходяща за удовлетворяване на изискванията и навигационната ви структура на уебсайта Ви.