Mobile menu different opening - Support | Kriesi.at

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts

June 25, 2015 at 12:48 pm #464552

Mario

Participant

Helo guys! how are you?

i tried to find solution to my issue but i really don’t know how to do it.

i would like different effect opening the mobiel menu like the example on the private area.

is possible ?

thanks a lot for your precious help!

Have a nice day!

Mario

June 26, 2015 at 10:14 pm #465128

Josue

Inactive Moderator

Hi Mario!

Mimicking that exact layout is not possible because the mobile menu is off canvas, however the following code will get you a similar effect, add this to Quick CSS:

#mobile-advanced{
  right: 0;
  top: -100%;
  border-color: #242424;
  -webkit-transform:  scale(1);
  -moz-transform:   scale(1);
  -ms-transform:    scale(1);
  transform:      scale(1);
  -webkit-transition: all 0.3s ease;
  -moz-transition:  all 0.3s ease;
  transition:     all 0.3s ease;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}

.avia_transform3d #mobile-advanced{
  -webkit-transform:  scale3d(1);
  -moz-transform:   scale3d(1);
  transform:      scale3d(1);
}

.show_mobile_menu #mobile-advanced{
  -webkit-transform:  scale(1);
  -moz-transform:   scale(1);
  -ms-transform:    scale(1);
  transform:      scale(1);
  -webkit-transform:  translate(0, 100%);
  -moz-transform:   translate(0, 100%);
  transform:      translate(0, 100%);
}
.avia_transform3d .show_mobile_menu #mobile-advanced{
  -webkit-transform:  scale3d(1);
  -moz-transform:   scale3d(1);
  transform:      scale3d(1);
  -webkit-transform:  translate3d(0, 100%, 0);
  -moz-transform:   translate3d(0, 100%, 0);
  transform:      translate3d(0, 100%, 0);
}

Cheers!
Josue

February 6, 2016 at 12:17 am #578875

bobfurgo

Participant

Hi Josue! Quick question, how do you get this animation to slide out from the right instead of from the top?

February 6, 2016 at 1:03 am #578883

Josue

Inactive Moderator

Try this:

#mobile-advanced{
	-webkit-transform:   scale(1);
	-moz-transform:      scale(1);
	transform:           scale(1);
	-webkit-transition:  all 0.1s linear;
	-moz-transition:     all 0.1s linear;
	transition:          all 0.1s linear;
}
.avia_transform3d #mobile-advanced{
	-webkit-transform:   scale3d(1);
	-moz-transform:      scale3d(1);
	transform:           scale3d(1);
}
.show_mobile_menu #mobile-advanced{
	-webkit-transform:   translate(-70%, 0);
	-moz-transform:      translate(-70%, 0);
	transform:           translate(-70%, 0);

}
.avia_transform3d .show_mobile_menu #mobile-advanced{
	-webkit-transform:   translate3d(-70%, 0, 0);
	-moz-transform:      translate3d(-70%, 0, 0);
	transform:           translate3d(-70%, 0, 0);
}

Best regards,
Josue

February 7, 2016 at 7:40 am #579137

bobfurgo

Participant

works great! thanks josue!

February 7, 2016 at 9:43 pm #579245

Josue

Inactive Moderator

You are welcome, glad to help :)

Regards,
Josue

February 20, 2016 at 11:41 am #586433

Mario