[RESOLVIDO] [MOBILE / PWA] Menu - Slider estilo WhatsApp
Salve salve!
Eu queria fazer um Menu estilo whatsApp:
Spoiler
/applications/core/interface/imageproxy/imageproxy.php?img=https://github.com/gabrieldarezzo/menuTouch/blob/master/gifs/ezgif.com-6cf6f79c5d.gif?raw=true&key=015d62bff273dfe758f44570b845b881092a655dd988134508da97c381b31eed" />
O mais próximo que cheguei foi isso: (LIVE DEMO)
http://gabrieldarezzo.github.io/menuTouch/
Source completo:
https://github.com/gabrieldarezzo/menuTouch
Alguem tem alguma dica de Plugin/jQuery/Angular ou qualquer PWA que tenha o mesmo comportamento?
Basicamente tentei dividir o 'problemão' em problemas menores...
O menu do Whats tem:
(Feito) Opção de clicar direto pelos menus
(Feito) Opção de Arrastar o touch/mouse
Animação da borda Bottom (já me indicaram a do Sergio Lopes, então acho q me viro daqui pra frente...
Empurrar todo o box div para a direita e simultaneamente o outro para a esquerda.
Então basicamente vou ter 3 divs correspontende a cada item do menu:
<div class="tab-content">
<div id="recados" role="tabpanel" class="tab-pane fade in active" ng-swipe-right="menuInschoolRight(this)" ng-swipe-left="menuInschoolLeft(this)">
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</div><!-- / #recados -->
<div id="avisos" role="tabpanel" class="tab-pane fade in" ng-swipe-right="menuInschoolRight()" ng-swipe-left="menuInschoolLeft(this)">
aralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
Ntate inalterado. Se popularizou na década de 60, quando a Letrase
</div><!-- / #avisos -->
<div id="eventos" role="tabpanel" class="tab-pane fade in" ng-swipe-right="menuInschoolRight()" ng-swipe-left="menuInschoolLeft(this)">
Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
inando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo com que ele tenha uma aparência similar a de um texto legível. Muitos softwares de publicação e editores de páginas na internet agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por 'lorem ipsum' mostra vários websites ainda e
</div><!-- / #eventos -->
</div><!-- / .tab-content -->
Minha duvida principal é como fazer esse comportamento do SlideIn /Left + SlideIn /Right, to estudando até Theread pra vocês terem uma noção... hahaha
Enfim qlq luz ta valendo, abraço a todos.
Quem quiser pode dar uma olhada no resultado:
[https://github.com/gabrieldarezzo/menuTouch](https://github.com/gabrieldarezzo/menuTouch)
Outra opção:
[http://materializecss.com/tabs.html](http://materializecss.com/tabs.html)
(Abas) / swipeableDiscussão (0)
Carregando comentários...