当启用面板向左滚动时，如何显示我的页面在左侧部分可见？

Question

IN this link , I can find that there is over lay option where I can hide or show the panel on right or left. But I want to display the panel 90% or + in panel. The same example as in facebook mobile where we have option of seeing friends list on right simultaneously a little part of news feed.

I have tried some code in the link provided above which has the code as

<div data-role="page">

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

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

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

what more must be implemented for this to bring it to the state when when the panel is visible only 90% of my page must be hidden towards one side of the page.

Thanks

Answer 1

You need to override many class in order to achieve 90% panel of page.

1. Panel overall width:

    .ui-panel { width: 90%; } 

2. Panel's position (left):

   Equals to Panel's width.

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

3. Opening panel (3D transform):

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

4. Animation:

   Increase or reduce speed (ms).

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

5. Panel's overlay/wrapper:

   This includes clickable area for panels with data-dismissible set to true or false

    .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; } 

Demo