Създайте интелигентно меню за навигация с тази JQuery Plug-in
Всеки съвременен сайт се нуждае от a отзивчиво оформление и a използваема навигация. Това е дадено.
Но менютата за хамбургер могат да стигнат само толкова далеч и те коренно променя използваемостта за различни размери на екрана. По-добрият начин да се справите с това е постепенно скриване на връзки с плъгин като OkayNav.
Този безплатен jQuery плъгин добавя много проста функция на менюто към всяка страница искромно скрива навигационните елементи, въз основа на различни екрани. По този начин потребителите на смартфони имат едно меню за хамбургери, но потребителите на таблети също могат да видят няколко връзки.
По подразбиране той разчита на a елемент и a дълъг неуреден списък. Досега не мисля, че този плъгин поддържа падащи списъци на няколко нива, но ако знаете малко за jQuery, можете да го добавите сами.
OkayNav е изключително прост и това е предназначени за по-прости уебсайтове които имат само няколко връзки за навигация. Тези връзки бавно се криете зад менюто извън екрана след като ударят определен екран и повече връзки се крият колкото по-малък е браузърът.
Ще трябва да го направите увийте вашия неуправен списък в навигационен елемент и му дайте конкретен идентификатор. След това можете насочете целия Nav с okayNav () функционира по следния начин:
var navigation = $ ('# nav-main'). okayNav (); Забележете, че това е само най-проста настройка без персонализирани функции. Можете да работите над дузина персонализирани опции вградена в тази библиотека, за да контролира стила на иконите, анимацията на менюто, поддръжката на тласък и функциите за обратно извикване.
Можете дори да извикате менюто отваряне / затваряне по желание чрез предаване на специфични стойности на функцията. Ето един прост пример отворете навигацията:
navigation.okayNav ( "openInvisibleNav ');
Всички тези кодове са добре документирани в GitHub репо което също включва изтегляне на скрипта. Ако предпочитате CDN маршрута, можете да използвате и Връзка с RawGit да добавите този скрипт директно от GitHub.
OkayNav е чудесно за по-малки обекти които се възползват от техниката на прогресивна навигация. Но ако все още не сте сигурни как става това, вижте демото на CodePen, което показва какво може да направи този малък плъгин.
