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.cssView source
- /**
- * @file
- *
- * .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.
- */
-
- /** The #header alike element, out of canvas by default, can exist once. */
- .is-ultimenu-canvas--active .is-ultimenu-canvas-off {
- left: 0;
- -ms-transform: translateX(-100%);
- transform: translateX(-100%);
- -ms-transition: -webkit-transform 500ms ease;
- transition: transform 500ms ease;
- }
-
- .is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-off {
- -ms-transform: translateX(0);
- transform: translateX(0);
- }
-
- /** Any element below, pushed out of canvas once the #header is in. */
- .is-ultimenu-canvas--active .is-ultimenu-canvas-on {
- -ms-transform: translateX(0);
- transform: translateX(0);
- position: relative;
- transition: transform 500ms ease;
- }
-
- .is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-on {
- -ms-transform: translateX(320px);
- transform: translateX(320px);
- }
-
- /**
- * 944px with 16px base font.
- * .is-ultimenu-canvas--active is only available if off-canvas is enabled for
- * both desktop and mobile. Or a little later via JS if not. That's why we don't
- * rely on it for the smaller device to avoid FOUC.
- */
- @media only screen and (max-width: 58.999em) {
-
- /** The #header alike element, out of canvas by default, can exist once. */
- .is-ultimenu-canvas .is-ultimenu-canvas-off {
- -ms-transform: translateX(-100%);
- transform: translateX(-100%);
- }
-
- .is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-on {
- -ms-transform: translateX(82%);
- transform: translateX(82%);
- }
- }