Направите прилагодљив мени са додатком Респонсиве-Нав.јс

Постоји неколико начина за креирање навигационих менија са респонзивном функцијом, односно који реагује са свим уређајима на којима се веб локација може прегледати.
Али проблем је што многи од тих образаца нису у потпуности компатибилни са неким прегледачима ако се ЦСС3 користи за обављање овог задатка.
Захваљујући Јавасцрипт -у можемо ову врсту ефеката и анимација учинити много компатибилнијим са прегледачима и на тај начин им пружити потребну подршку.
У овом водичу ћемо видети како да направимо потпуно прилагодљиву навигациону траку користећи Јавасцрипт Респонсиве Нав додатак.
Овај додатак је отвореног кода и можемо га користити у било ком пројекту, долази са стилском листом да га прилагодимо и потпуно зависи од других Јавасцрипт библиотека, попут јКуери -ја.
У ХТМЛ -у ћемо само морати да направимо листу да бисмо користили мени и дали му идентификатор да бисмо га могли изабрати кроз скрипту коју захтева додатак.
Такође повезујемо додатак Респонсиве Нав и повезујемо га са документом, ово се може преузети са његове званичне странице или директно на Гитхуб -у, можемо преузети само .јс датотеку или ако желите можете преузети целу .зип датотеку, за ову Водич Користићу само датотеку респонсиве-нав.мин.јс.
Правимо демо веб локацију коју називамо респонсиве.хтмл

 Респонсиве Навигатион

Почетак
О томе
Услуге
Блог
Контакт

Лорем ипсум паин сит амет, цонсецтетуер адиписцинг.

Будите егестас, анте ет вулпутате волутпат

Затим ћемо додати цсс у датотеку стилес.цсс са следећим кодом

 боди {маргин: 0; паддинг: 0; позадина: # 3д3д3д; породица фонтова: Ариал, санс-сериф; } имг {мак-видтх: 100%; } #цонтент {бацкгроунд-цолор: # Е6Е6ФА; маргина: 20пк ауто 0; паддинг: 20пк; ширина: 80%; } #нав {бацкгроунд-цолор: # 4Ц76АЕ; } #нав ул {маргин: 0; паддинг: 0; ширина: 100%; дисплеј блок; лист-стиле: ноне; } #нав ул ли {ширина: 100%; дисплеј блок; лист-стиле: ноне; } #нав ул ли а {дисплаи: блоцк; паддинг: 10пк 9пк; ширина: 100%; фонт-сизе: 1.1ем; фонт-веигхт: нормал; позадина: # 4ц76ае; боја: # цад7еа; декорација текста: нема; } #нав ул ли а: ховер {бацкгроунд: # 00567ф; } .јс #нав {цлип: рецт (0 0 0 0); мак-хеигхт: 0; положај: апсолутан; дисплеј блок; преливање: скривено; зум: 1; } # нав.опенед {мак-хеигхт: 9999пк; } # нав-тоггле {фонт-сизе: 1.2ем; фонт-веигхт: болд; паддинг: 3пк 9пк; маргин-лефт: 15пк; декорација текста: нема; бордер-радиус: 3пк; боја: #фефефе; позадина: # 4ц7аб6; маргин-боттом: 15пк; }

До сада ће то бити општа листа стилова, сада ћемо креирати листу стилова која ће прилагодити мени ако се екран смањи на 640 пиксела или мање, за то ћемо применити неке стилове унутар својства Медиа Куериес цсс3 који ће се применити на уређајима са минималном резолуцијом од 640 пиксела. Ако је резолуција већа, користиће се дефинисани општи цсс.

 @медијски екран и (мин-видтх: 640пк) {.јс #нав {поситион: релативе; } .јс # нав.цлосед {мак-хеигхт: ноне; } # нав-тоггле {дисплаи: ноне; } #нав ул ли а {бордер-ригхт: 1пк солид # 5Е88БФ; дисплеј блок; флоат: лефт; ширина: ауто; позадина: нема; паддинг: 11пк 15пк; фонт-веигхт: нормал; декорација текста: нема; боја: # Е6Е6ФА; } #нав ул ли а: ховер {бацкгроунд: # 00567ф; боја: # цад7еа; } х1 {цолор: # 90б9а0; фонт: 2.5ем; поравнање текста: центар; }}

Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен