You are here

Home » API reference » Ultimenu 8.2

ultimenu.offcanvas.slideover.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.slideover.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. /**

  26.  * 944px with 16px base font.

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

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

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

  30.  */

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

  32. 

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

  34.   .is-ultimenu-canvas .is-ultimenu-canvas-off {

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

  36.     transform: translateX(-100%);

  37.   }

  38. 

  39. }