Меню со свайпом для мобильной версии сайта
Вот заморочился с мобильной версией сайта, в частности с меню. Чтобы оно свайпом (сдвигом пальца) открывалось слева.
Всё бы ничего, да то меню тормозит на старых устройствах, то работает криво, то еще что. Перебрал почти все существующие в природе, решил поделиться опытом (и найти лучшее заодно).
Если знаете jquery то можно взять хорошую библиотеку обработки жестов — hammer.js (http://hammerjs.github.io/) и на основе её уже делать что-то, ну или фишечки на сайте свои.
В начале я взял меню — mmenu (http://mmenu.frebsite.nl/), куча всего, есть дополнения, подключается hammer.js но тормозит на старых мобилах.
Сейчас поставил — snap.js (http://jakiestfu.github.io/Snap.js/demo/apps/default.html), вроде работает быстро и в мобильном хроме и в webview на андройде 4.4, но взял старый андройд 2.3 а у него по умолчанию не гугл хром браузер стоит а «браузер» версии 2.3, так в нем вообще перестало работать.
Поиски продолжаются, про откровенную фигню — даже писать не буду.
з.ы.ы. доля мобильного интернета уже почти 50%, лучше конечно адаптивный дизайн, но для уже сущетсвующих проектов это слишком затратно. Плюс для мобильной версии сайта можно сделать приложение в play market а в приложении будет открываться сайт. (цена такого приложения — 500р.)
bamboo.js (http://www.andrewgreig.com/demo/bamboo/) — простое меню со вайпом, на андройде 2.3. не заработала, а так мало весит, работает быстро.
Slidebars (http://plugins.adchsm.me/slidebars/) — работает на андройде 2.3, но нету свайпа, а так с анимацией и приятная менюшка
JQuery-Mobile-Slide-Menu (http://www.tegdesign.com/tegansnyder-JQuery-Mobile-Slide-Menu/) — работает на андройде 2.3., есть свайп, вроде ниче так, годная менюшка
jpanelmenu (http://jpanelmenu.com/) — очень тормозит на андройде 2.3, нету свайпа.
flexpanel (http://flexpanel.connekthq.com/) — работает на андройде 2.3, но не очень быстро, вроде на сайте написано что поддерживается hammer.js то и свайп можно настроить
mango slideout (https://mango.github.io/slideout/) — тормозит и глючит на 2.3, свайп есть
Спустя неделю раздумий есть продолжение:
Выяснилось что на андройде 2.2 и 2.3. в родном браузере не работает скроллинг div через свойство css «-webkit-overflow-scrolling: touch;» т.е. внутри div есть место, которое скролится и в старом браузере и приложении на основе webkit оно не работает, но есть решение: можно поставить дополнительную js библиотеку, которая это свойство сэмулирует, так и сделал, нашел вменяемы 2 библиотеки:
- touchscroll.js (http://www.seabreezecomputers.com/tips/scroll-div.htm#touchscroll) — работает, но плавности в скролле нет и оно одинакового без плавности сроллит и в старых и в новых браузерах, нужна проверка — если браузер поддерживает нужное свойство css то костыль не используется.
- Overthrow (https://github.com/filamentgroup/Overthrow) — в состав входит 4 js файла, работает отлично, на старых браузерах включается — и есть скролл (хоть и не плавный) а на новых не включается и работает плавный — нативный от браузера.
После решения проблемы со скроллингом меню — остановился на выдвижной менюшке snap.js как менее тормозящей и везде работающей, через год или два когда старых устройств на андройде 2.3 совсем не останется, можно перейти на более прогресивню менюшку.
Также тестировал еще менюшки, может кому пригодится — продолжу список:
- mobile-menu (http://mobile-menu.ma5.pl/index.html) — хорошее меню, но на 2.3. не работает
- tympanus Sidebar (http://tympanus.net/Development/SidebarTransitions/) — красиво, но на 2.3 не работает
- Off Canvas Infinity Push Mobile Navigation (http://www.marcandrew.net/off-canvas-infinity-push/index.html) — простое такое но не работает на 2.3
- Off-Canvas Menu Effects — Side (http://tympanus.net/Development/OffCanvasMenuEffects/sideslide.html) — хорошее такое но не работает на 2.3
- Pure Drawer (http://mac81.github.io/pure-drawer/) — не работает на 2.3
- jQuery Sidebar (http://jillix.github.io/jQuery-sidebar/) — простенькое и удобное, но для свайпа открытия меню пальцем нужно библиотеку hammer.js подключать и на 2.3 не работает
- Slide and swipe menu (http://joanclaret.github.io/slide-and-swipe-menu/) — прикольное, но на 2.3 не работает
Думаю вы найдете подходящее меню для своего сайта. Главное оно должно быстро отображаться и выдвигаться, не тормозить сайт, чтобы выдвигалось пальцем горизонтальным движением с лева на право и правильно работало на всех актуальных android устройствах.