Како креирати прилагодљиву навигацију

Један од најтежих делова респонсифиед на сајту је “Навигација”, овај део је заиста важан за приступачност сајта, јер је то један од начина да посетиоци пређу преко веб страница.

Заправо, постоји много начина да се креира одговарајућа навигација за веб сајт, а чак и неки јКуери додаци су доступни да то учине у секунди.

Међутим, уместо да применимо тренутно решење, у овом посту ћемо вас провести како изградити једноставну навигацију са земље и коришћењем ЦСС3 медијских упита и малим јКуери да га прикажете у малом екрану, као што су паметни телефони исправно.

Дакле, хајде да почнемо.

Демо
Довнлоад Соурце

ХТМЛ

Пре свега, хајде да додамо мета виевпорт унутар глава таг. Ово мета виевпорт ознака је потребна да би се наша страница правилно проширила унутар било које величине екрана, посебно у мобилном оквиру за приказ.

… И затим додајте следећи исјечак као навигациону ознаку унутар тело таг.

   Кућа
 Како да
 Иконе
 Дизајн
 Веб 2.0
 Алати
 
 Мени

Као што можете видети горе, имамо шест основних линкова менија и додали смо још један линк за њима. Ова додатна веза ће се користити пулл навигација менија када је скривена у малом екрану.

Додатна литература: Не заборавите мета ознаку видокруга.

Стилови

У овом одељку започињемо стилизовање навигације. Стил је само декоративан, можете одабрати било коју боју по жељи. Али у овом случају, ми (ја лично) желим тело да имају меку и кремасту боју.

 тело бацкгроунд-цолор: # еце8е5;

Тхе нав која дефинише навигацију 100% пуна ширина прозора претраживача, док је ул тамо где се налазе наши примарни линкови менија ће имати 600пк за ширину.

 нав хеигхт: 40пк; ширина: 100%; позадина: # 455868; фонт-сизе: 11пт; фамилија фонтова: 'ПТ Санс', Ариал, санс-сериф; фонт-веигхт: болд; позиција: релативна; бордер-боттом: 2пк солид # 283744;  нав ул паддинг: 0; маргин: 0 ауто; видтх: 600пк; хеигхт: 40пк;

Онда ћемо пловак мени линкови на лево, тако да ће бити приказани хоризонтално један поред другог, али плутајући елемент ће такође проузроковати колапс њихових родитеља.

 нав ли дисплаи: инлине; флоат: лефт;

Ако приметите горе наведену ХТМЛ ознаку, већ смо додали цлеарфик у класа атрибут за оба нав и ул да очистимо ствари около када плутамо елементе унутар њега користећи овај ЦСС цлеарфик хацк. Зато додајте следећа правила стила у стилу.

 .цлеарфик: бефоре, .цлеарфик: афтер цонтент: ""; дисплаи: табле;  .цлеарфик: после цлеар: ботх;  .цлеарфик * зоом: 1;

Пошто имамо шест линкова менија и одредили смо контејнер за 600пк, линкови сваког менија ће имати 100пк за ширину.

 нав а цолор: #фф; дисплеј: инлине-блоцк; видтх: 100пк; тект-алигн: центар; тект-децоратион: ноне; висина линије: 40пк; текст-сенка: 1пк 1пк 0пк # 283744;

Линкови менија ће бити одвојени са 1пк десна граница, осим задње. Запамтите наш претходни пост на моделу кутије, ширина менија ће бити проширена 1пк прављење 101пк као додатак граници, тако да овде мењамо димензионисање кутија модел бордер-бок да би задржали мени остаје 100пк.

 нав ли а бордер-ригхт: 1пк солид # 576979; бок-сизинг: гранични-бок; -моз-бок-сизинг: бордер-бок; -вебкит-бок-сизинг: бордер-бок;  нав ли: ласт-а бордер-ригхт: 0;

Затим, мени ће имати светлију боју када је у :лебдети или : ацтиве држава.

 нав а: ховер, нав а: активна позадинска боја: # 8ц99а4;

… И на крају, додатни линк ће бити скривен (за екран радне површине).

 нав а # пулл дисплаи: ноне;

У овом тренутку, ми само стилизујемо навигацију и ништа се неће десити када променимо величину прозора претраживача. Дакле, пређимо на следећи корак.

Додатна литература: Величина ЦСС3 (Хонгкиат.цом)

Медиа Куериес

ЦСС3 медијски упити се користе за дефинисање како ће се стилови померати у неким одређеним тачкама прекида или специфично величинама екрана уређаја.

Пошто је наша навигација у почетку 600пк фик-видтх, прво ћемо дефинисати стилове када се он прегледа 600пк или ниже величине екрана, практично говорећи, Ово је наша прва тачка прекида.

У овој величини екрана, сваки од два линка менија ће бити приказан раме уз раме, тако да улширина овде ће бити 100% прозора претраживача, док ће линкови у менију имати 50% за ширину.

 @медиа екран и (мак-видтх: 600пк) нав хеигхт: ауто;  нав ул ширина: 100%; дисплеј блок; хеигхт: ауто;  нав ли ширина: 50%; флоат: лефт; позиција: релативна;  нав ли а бордер-боттом: 1пк солид # 576979; бордер-ригхт: 1пк солид # 576979;  нав а тект-алигн: лефт; ширина: 100%; тект-индент: 25пк;

… И онда, ми такође дефинишемо како се навигација приказује када се екран смањи 480пк или ниже (тако да је ово наша друга тачка прекида).

У овој величини екрана, додатни линк који смо додали пре ће почети да буде видљив и такође ћемо дати линк а “Мени” на десној страни помоћу иконе :после псеудо-елемент, док ће примарни линкови менија бити сакривени да би се сачували више вертикалних простора на екрану.

 @медиа онли сцреен и (мак-видтх: 480пк) нав бордер-боттом: 0;  нав ул дисплаи: ноне; хеигхт: ауто;  нав а # пулл дисплаи: блоцк; бацкгроунд-цолор: # 283744; ширина: 100%; позиција: релативна;  нав а # пулл: афтер цонтент: ""; позадина: урл ('нав-ицон.пнг') нема понављања; видтх: 30пк; хеигхт: 30пк; дисплеј: инлине-блоцк; позиција: апсолутна; десно: 15пк; топ: 10пк;

На крају, када се екран смањи 320пк и спуштање менија ће бити приказано вертикално одозго према доле.

 @медиа онли сцреен и (мак-видтх: 320пк) нав ли дисплаи: блоцк; флоат: ноне; ширина: 100%;  нав ли а бордер-боттом: 1пк солид # 576979;

Сада можете покушати промијенити величину прозора прегледника. Сада би требало да буде у стању да прилагоди величину екрана.

Додатна литература: Медијски упити за стандардне уређаје.

Приказивање менија

У овом тренутку, мени ће и даље бити скривен и биће видљив само када је потребан додиром или кликом на “Мени” линк и можемо постићи ефекат користећи јКуери слидеТоггле ().

 $ (фунцтион () вар пулл = $ ('# пулл'); мену = $ ('нав ул'); менуХеигхт = мену.хеигхт (); $ (пулл) .он ('клик', функција (е) е.превентДефаулт (); мену.слидеТоггле ();););

Међутим, када промените величину прозора прегледача одмах након што прегледате и сакријете мени на малом екрану, мени ће остати скривен, јер дисплаи: ноне Стил који је генерисао јКуери још увек је повезан са елементом.

Дакле, морамо да уклонимо овај стил када се промени величина прозора, као што следи:

 $ (виндов) .ресизе (фунцтион () вар в = $ (виндов) .видтх (); иф (в> 320 && мену.ис (': хидден')) мену.ремовеАттр ('стиле'); );

У реду, то су све шифре које су нам потребне, сада можемо да видимо навигацију са следећих веза, и препоручујемо да је тестирате у одговарајућем дизајнерском тестном алату, као што је Респонсинатор, тако да га можете погледати у различитим ширинама одједном.

Демо
Довнлоад Соурце

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

Као што смо раније поменули у овом посту, постоје неки други начини да се то уради и да се користи ЈаваСцрипт библиотека СелецтНав.јс је један од најлакших начина. Ово је чисти ЈаваСцрипт који се не ослања на другу библиотеку треће стране као што је јКуери.

У суштини, он ће дуплицирати ваш изборник листе и претворити га у а Мени ће користити изворни кориснички интерфејс из самог уређаја.

Молимо вас да погледате званичну документацију за даљу имплементацију.

Закључак

Дошли смо све до стварања одговорне навигације од нуле. Ово што смо овде направили је само један од примера, и као што смо раније рекли у овом посту и приказани горе, постоји много других решења која можете применити. Дакле, сада је на вашој одлуци да одаберете која пракса најбоље одговара захтеву за снабдевање и вашој структури навигације веб сајта.