[RESOLVIDO] [MOBILE / PWA] Menu - Slider estilo WhatsApp

[gabrieldarezzo 255]

Salve salve!

 

Eu queria fazer um Menu estilo whatsApp: 

Spoiler

 

 

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

 

Outra opção:

http://materializecss.com/tabs.html

(Abas) / swipeable