Forum | Appery.io

Hello,

I am trying to add a background with opacity to the page holding the menu panel... (just like the application screenshot below)

In terms of behaviour:

1. The "blured" background should fadeIn when the top-left menu icon is clicked and the panel slides in.

2. The "blurred" background should fadeOut when the top-left menu icon is clicked and the panel slides out.

   I just can't manage to add this blurred backgroud.

   Could you help me please?

   Thanking you in advance.

   Shaun

Hi Shaun -

You have to find this selected tag: http://gyazo.com/7aa4a435e393180fcb47...
and on panel open add a CSS styles.

Hi Illya,

I have applied the following code when the menu button is clicked :

if (Apperyio("menu_panel").hasClass("ui-panel-open")) {
Apperyio("menu_panel").panel("close");
$("div.ui-panel-dismiss").removeClass('transparent');
}
else if (Apperyio("menu_panel").hasClass("ui-panel-closed")) {
Apperyio("menu_panel").panel("open");
$("div.ui-panel-dismiss").addClass('transparent');
}

The problem is that the opacity is applied only to the right part of the page... the panel dismiss part (see picture below ) :

It seems strange to have the right part of the page being opacified when the panel is opening.

I am trying to achieve opacity for the whole page behind the panel (see picture below) :

Any idea?

Best regards,

Shaun

Hello,

You can try to create and append a "mask" to the DOM.
To our opinion your implementation is not bad at all, there is no big difference between screenshots where you make opacity for only visible part.

Hello Alena,

Thanks for your answer. I created a "mask" in the DOM which was a perfect solution for what I wanted to achieve.

The problem with the previous solution was that the dark overlay appeared on the right of the page (the ui-panel-dismiss part) before the panel was fully opened. The result was not very nice.

With the "mask" solution, the dark overlay appears on the full page while the panel slides... It is clean and neat.

Thanks for your help.

Best regards,

Shaun

Awesome! Thanks for update.

Hi Shaun, can you explain how to apply the "mask" solution?

Thanks in advance.
Regards,

Mariano.