How can I show that my page will be partially visible on the left when the panel scrolls to the left, is turned on?

Question

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

I tried the code in the link above that has the code

<div data-role="page">

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

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

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

what else needs to be implemented for this to bring it into a state where, when the panel is visible, only 90% of my page should be hidden towards one side of the page.

thanks

Answer 1

, 90%.

• :

  .ui-panel {
    width: 90%;
  }
  

• ():

  .

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

• (3D-):

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

• :

  ().

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

• / :

  data-dismissible, true 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;
  }