You are here

Home » API reference » Ultimenu 8.2

ultimenu.offcanvas.zoomin.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. Note the `transform` transitions, it is faster and smoother than `left` ones.

File

css/components/ultimenu.offcanvas.zoomin.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.  * Note the `transform` transitions, it is faster and smoother than `left` ones.

  9.  */

  10. 

  11. @keyframes ultiZoomIn {

  12.   from {

  13.     opacity: 0;

  14.     -webkit-transform: scale3d(.3, .3, .3);

  15.     transform: scale3d(.3, .3, .3);

  16.   }

  17. 

  18.   100% {

  19.     opacity: 1;

  20.     -webkit-transform: scale3d(1, 1, 1);

  21.     transform: scale3d(1, 1, 1);

  22.   }

  23. }

  24. 

  25. @keyframes ultiZoomOut {

  26.   from {

  27.     opacity: 1;

  28.     -webkit-transform: scale3d(1, 1, 1);

  29.     transform: scale3d(1, 1, 1);

  30.   }

  31. 

  32.   100% {

  33.     opacity: 0;

  34.     -webkit-transform: scale3d(.3, .3, .3);

  35.     transform: scale3d(.3, .3, .3);

  36.   }

  37. }

  38. 

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

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

  41.   left: 0;

  42.   overflow: hidden;

  43.   -webkit-animation-duration: .3s;

  44.   animation-duration: .3s;

  45.   -webkit-animation-fill-mode: both;

  46.   animation-fill-mode: both;

  47.   max-width: 100%;

  48.   width: 100%;

  49.   z-index: -1;

  50. }

  51. 

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

  53.   -webkit-animation-name: ultiZoomIn;

  54.   animation-name: ultiZoomIn;

  55.   z-index: 9998;

  56. }

  57. 

  58. .is-ultimenu-canvas.is-ultimenu-canvas--hiding .is-ultimenu-canvas-off {

  59.   -webkit-animation-duration: .5s;

  60.   animation-duration: .5s;

  61.   -webkit-animation-name: ultiZoomOut;

  62.   animation-name: ultiZoomOut;

  63. }

  64. 

  65. /**

  66.  * 944px with 16px base font.

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

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

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

  70.  */

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

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

  73.   .is-ultimenu-canvas .is-ultimenu-canvas-off {

  74.     z-index: -1;

  75.   }

  76. 

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

  78.     z-index: 9998;

  79.   }

  80. }