You are here

Home » API reference » Ultimenu 8.2

ultimenu.offcanvas.slidein.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.slidein.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. /** The #header alike element, out of canvas by default, can exist once. */

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

  13.   left: 0;

  14.   -ms-transform: translateX(-100%);

  15.   transform: translateX(-100%);

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

  17.   transition: transform 500ms ease;

  18. }

  19. 

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

  21.   -ms-transform: translateX(0);

  22.   transform: translateX(0);

  23. }

  24. 

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

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

  27.   -ms-transform: translateX(0);

  28.   transform: translateX(0);

  29.   position: relative;

  30.   transition: transform 500ms ease;

  31. }

  32. 

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

  34.   -ms-transform: translateX(320px);

  35.   transform: translateX(320px);

  36. }

  37. 

  38. /**

  39.  * 944px with 16px base font.

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

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

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

  43.  */

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

  45. 

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

  47.   .is-ultimenu-canvas .is-ultimenu-canvas-off {

  48.     -ms-transform: translateX(-100%);

  49.     transform: translateX(-100%);

  50.   }

  51. 

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

  53.     -ms-transform: translateX(82%);

  54.     transform: translateX(82%);

  55.   }

  56. }