Como exibir minha página para ficar parcialmente visível à esquerda quando a rolagem do painel para a esquerda está ativada? - javascript, jquery, css, jquery-mobile

Nisso ligação , Posso descobrir que há uma opção de sobreposição ondePosso ocultar ou mostrar o painel à direita ou à esquerda. Mas eu quero exibir o painel 90% ou + no painel. O mesmo exemplo do facebook mobile onde temos a opção de ver a lista de amigos à direita simultaneamente uma pequena parte do feed de notícias.

Eu tentei algum código no link fornecido acima, que tem o código como

<div data-role="page">

<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->

<!-- header -->
<!-- content -->
<!-- footer -->

</div><!-- page -->

o que mais deve ser implementado para trazê-lo ao estado em que, quando o painel estiver visível, apenas 90% da minha página deve estar oculto em um lado da página.

obrigado

Respostas:

Você precisa substituir muitas classes para alcançar 90% painel da página.

1. Largura geral do painel:

   .ui-panel {
   width: 90%;
   }
   

2. Posição do painel (esquerda):

   Igual à largura do painel.

   .ui-panel-position-left {
   left: -90% !important;
   }
   

3. Painel de abertura (transformação 3D):

   .ui-panel-open {
   -webkit-transform: translate3d(97%, 0, 0) !important;
   transform: translate3d(97%, 0, 0) !important;
   }
   

4. Animação:

   Aumente ou reduza a velocidade (ms).

   .ui-panel-animate {
   -webkit-transition: -webkit-transform 500ms ease;
   -moz-transition: -moz-transform 500ms ease;
   transition: transform 500ms ease;
   }
   

5. Sobreposição / invólucro do painel:

   Isso inclui a área clicável para painéis com data-dismissible definido como verdadeiro ou falso

   .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
   left: 90% !important;
   right: -90% !important;
   }
   

Demonstração