You are here

Home » API reference » Ultimenu 8.2

ultimenu.offcanvas.css in Ultimenu 8.2

This is the base CSS rules for anything off-canvas.

.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.

The is-ultimenu-canvas--active is if enabled for both mobile and desktop. Otherwise only exists on mobile only.

File

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

  2.  * @file

  3.  * This is the base CSS rules for anything off-canvas.

  4.  *

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

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

  7.  *

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

  9.  *

  10.  * The is-ultimenu-canvas--active is if enabled for both mobile and desktop.

  11.  * Otherwise only exists on mobile only.

  12.  */

  13. 

  14. /** Global off-canvas rules. */

  15. .is-ultimenu-canvas-backdrop {

  16.   background-color: transparent;

  17.   bottom: 0;

  18.   left: 0;

  19.   opacity: 0;

  20.   overflow: hidden;

  21.   position: fixed;

  22.   top: 0;

  23.   -ms-transition: all .3s ease;

  24.   transition: all .3s ease;

  25.   z-index: -1;

  26. }

  27. 

  28. .is-ultimenu-expanded .is-ultimenu-canvas-backdrop,

  29. .is-ultimenu-canvas--hiding .is-ultimenu-canvas-backdrop {

  30.   background-color: rgba(0, 0, 0, .6);

  31.   opacity: 1;

  32.   -ms-transition-delay: .2s;

  33.   transition-delay: .2s;

  34.   height: 100%;

  35.   width: 100%;

  36.   z-index: 9997;

  37. }

  38. 

  39. /** If off-canvas is enabled for both mobile and desktop. */

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

  41.   /** Necessary for `overflow: hidden` when expanded below. */

  42.   position: relative;

  43. }

  44. 

  45. /** Hide body overflow when off-canvas is being expanded. */

  46. .is-ultimenu-canvas.is-ultimenu-expanded,

  47. .is-ultimenu-canvas.is-ultimenu-canvas--hiding {

  48.   overflow: hidden;

  49. }

  50. 

  51. /** The #header element, safe whether enabled for desktop, or mobile only. */

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

  53.   backface-visibility: hidden;

  54.   display: block;

  55.   float: none;

  56.   width: 100%;

  57.   z-index: 9998;

  58. }

  59. 

  60. /** The #header alike element, if activated for both desktop and mobile. */

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

  62.   /** Adjust and remove !important accordingly. This is to override Bartik. */

  63.   background: rgba(0, 0, 0, .9) !important;

  64.   bottom: 0;

  65.   height: 100%;

  66.   height: 100vh;

  67.   left: -100%;

  68.   max-height: none;

  69.   /** Desktop needs the exact pixel to avoid too wide off-canvas. */

  70.   max-width: 320px;

  71.   min-height: 320px;

  72.   overflow: hidden;

  73.   padding: 0;

  74.   position: fixed;

  75.   top: 0;

  76.   transition: all 500ms ease;

  77. }

  78. 

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

  80.   left: 0;

  81.   overflow-y: scroll;

  82.   -webkit-overflow-scrolling: touch;

  83.   overflow-scrolling: touch;

  84. }

  85. 

  86. /** Any element below #header alike. */

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

  88.   backface-visibility: hidden;

  89.   position: relative;

  90. }

  91. 

  92. /**

  93.  * 944px with 16px base font.

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

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

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

  97.  */

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

  99.   /** The #header alike element. This ensures it always kicks in. */

  100.   .is-ultimenu-canvas .is-ultimenu-canvas-off {

  101.     max-width: 80%;

  102.     position: fixed;

  103.   }

  104. 

  105.   /* Just to satisfy desktop responsive preview while viewing like mobile. */

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

  107.     min-height: 100%;

  108.   }

  109. 

  110.   /** Only transform on body for small devices since desktop has fixed width. */

  111.   .is-ultimenu-canvas.is-ultimenu-expanded,

  112.   .is-ultimenu-canvas.is-ultimenu-canvas--hiding {

  113.     transform: translate3d(0px, 0px, 0px);

  114.   }

  115. }