How to shrink width Ons Sliding Menu?

Question

can i know how to shrink width of ons sliding menu?

I want the menu covers only 20% of screen on right, on landscape mode.

I tried with max-slide-distance or swipe-target-width but i cannot see differences...

Thanks you in advance.

Answer 1

Use the conditionals and set two arguments separately i.e.

<ons-sliding-menu
  ons-if-orientation="portrait"
  above-page="home.html"
  behind-page="menu.html"
  swipe-target-width="20px"
  max-slide-distance="85%"
  side="right"
  var="menu">
</ons-sliding-menu>

<ons-sliding-menu
  ons-if-orientation="landscape"
  above-page="home.html"
  behind-page="menu.html"
  swipe-target-width="20px"
  max-slide-distance="20%"
  side="right"
  var="menu">
</ons-sliding-menu>

Further, refer to the following: http://onsenui.io/guide/components.html#ons-if-orientation

Regards, Vladyslav