Меню со свайпом для мобильной версии сайта.

Тема в разделе "Программирование", создана пользователем u127, 24 дек 2015.

  1. u127 рязанец

    Регистрация:
    16 фев 2009
    Сообщения:
    384
    Симпатии:
    100
    Провайдер:
    Несколько
    Вот заморочился с мобильной версией сайта, в частности с меню. Чтобы оно свайпом (сдвигом пальца) открывалось слева.
    Всё бы ничего, да то меню тормозит на старых устройствах, то работает криво, то еще что. Перебрал почти все существующие в природе, решил поделиться опытом (и найти лучшее заодно).

    з.ы. если модераторы разрешат, то укажу адрес сайта ради чего все заморочки.

    Если знаете 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р.)
     
    Последнее редактирование: 24 дек 2015
  2. u127 рязанец

    Регистрация:
    16 фев 2009
    Сообщения:
    384
    Симпатии:
    100
    Провайдер:
    Несколько
    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, свайп есть
     
    Последнее редактирование: 24 дек 2015
  3. ПБЗН♠ Новичок

    Регистрация:
    11 янв 2016
    Сообщения:
    5
    Симпатии:
    6
    Провайдер:
    Билайн
    Ты ошибся как минимум на 100 порядков. В цене.
    Ты попробуй сперва потестить то что тебе предложил u127. Кстати идеи рабочие.
    А потом попробуй откодить мои идеи. И заработать их.
    Уже поплохело?
    То-то и оно.
    А ведь их тоже надо будет тестить... И Т.Д и Т.П.
     
  4. u127 рязанец

    Регистрация:
    16 фев 2009
    Сообщения:
    384
    Симпатии:
    100
    Провайдер:
    Несколько
    Не понимаю в чем наезд? Цена же не с потолка взята, а за готовое приложение, и оно есть в маркете. Работает.
    Что значит фраза "И заработать их"?
     
  5. u127 рязанец

    Регистрация:
    16 фев 2009
    Сообщения:
    384
    Симпатии:
    100
    Провайдер:
    Несколько
    Спустя неделю или две раздумий есть продолжение:

    Выяснилось что на андройде 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 устройствах.

    источник получился тут
     

Пользователи просматривающие тему (Пользователей: 0, Гостей: 0)