How can I display my page to be visible partially on left when the panel scroll left is enabled?

问题

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

回答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

来源：https://stackoverflow.com/questions/20567884/how-can-i-display-my-page-to-be-visible-partially-on-left-when-the-panel-scroll