You are here

Home » API reference » Ultimenu 8.2

ultimenu.offcanvas.scalein.css in Ultimenu 8.2

.is-ultimenu-canvas-off: #header or .region-primary-menu, etc. .is-ultimenu-canvas-on: any sibling of #header.

Tips: Use Modernizer.js to have graceful fallback for old browsers.

File

css/components/ultimenu.offcanvas.scalein.css
View source 
  1. /**

  2.  * @file

  3.  *

  4.  * .is-ultimenu-canvas-off: #header or .region-primary-menu, etc.

  5.  * .is-ultimenu-canvas-on: any sibling of #header.

  6.  *

  7.  * Tips: Use Modernizer.js to have graceful fallback for old browsers.

  8.  */

  9. 

  10. /** The #header alike element, out of canvas by default, can exist once. */

  11. .is-ultimenu-canvas--active .is-ultimenu-canvas-off {

  12.   left: 0;

  13.   -webkit-transition: -webkit-transform 500ms ease;

  14.   transition: transform 500ms ease;

  15.   -ms-transform: translate3d(-120%, 0, 0) scale3d(.9, .9, .9);

  16.   -webkit-transform: translate3d(-120%, 0, 0) scale3d(.9, .9, .9);

  17.   transform: translate3d(-120%, 0, 0) scale3d(.9, .9, .9);

  18.   -ms-transform-origin: 50% 0% 50%;

  19.   -webkit-transform-origin: 50% 0% 50%;

  20.   transform-origin: 50% 0% 50%;

  21.   transition-delay: .01s;

  22. }

  23. 

  24. .is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-off {

  25.   -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

  26.   -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

  27.   transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

  28.   transition-delay: 0s;

  29. }

  30. 

  31. /** Any element below, pushed out of canvas once the #header is in. */

  32. .is-ultimenu-canvas--active .is-ultimenu-canvas-on {

  33.   -ms-transform: translate3d(0, 0, 0);

  34.   -webkit-transform: translate3d(0, 0, 0);

  35.   transform: translate3d(0, 0, 0);

  36.   -webkit-transition: -webkit-transform 500ms ease;

  37.   transition: transform 450ms ease;

  38. }

  39. 

  40. .is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-on {

  41.   -ms-transform: translate3d(320px, 0, 0) scale3d(1, 1, 1);

  42.   -webkit-transform: translate3d(320px, 0, 0) scale3d(1, 1, 1);

  43.   transform: translate3d(320px, 0, 0) scale3d(1, 1, 1);

  44. }

  45. 

  46. /**

  47.  * 944px with 16px base font.

  48.  * .is-ultimenu-canvas--active is only available if off-canvas is enabled for

  49.  * both desktop and mobile. Or a little later via JS if not. That's why we don't

  50.  * rely on it for the smaller device to avoid FOUC.

  51.  */

  52. @media only screen and (max-width: 58.999em) {

  53.   /** The #header alike element, out of canvas by default, can exist once. */

  54.   .is-ultimenu-canvas .is-ultimenu-canvas-off {

  55.     max-width: 82%;

  56.     -ms-transform: translate3d(210%, 0, 0) scale3d(.9, .9, .9);

  57.     -webkit-transform: translate3d(210%, 0, 0) scale3d(.9, .9, .9);

  58.     transform: translate3d(210%, 0, 0) scale3d(.9, .9, .9);

  59.   }

  60. 

  61.   .is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-off {

  62.     -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

  63.     -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

  64.     transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

  65.   }

  66. 

  67.   .is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-on {

  68.     -ms-transform: translate3d(82%, 0, 0) scale3d(1, 1, 1);

  69.     -webkit-transform: translate3d(82%, 0, 0) scale3d(1, 1, 1);

  70.     transform: translate3d(82%, 0, 0) scale3d(1, 1, 1);

  71.   }

  72. }