ultimenu.css in Ultimenu 8.2

This file contains all Ultimenu layout and basic styling, the essiantials.

Classes: .ultimenu: the menu UL tag. .ultimenu > li: the menu LI tag. .ultimenu__flyout: the ultimenu region container aka flyout. .ultimenu__link: the menu-link A tag.

• https://drupal.org/node/2032405

See also

about RTL

File

css/ultimenu.css

/**
 * @file
 * This file contains all Ultimenu layout and basic styling, the essiantials.
 *
 * Classes:
 * .ultimenu: the menu UL tag.
 * .ultimenu > li: the menu LI tag.
 * .ultimenu__flyout: the ultimenu region container aka flyout.
 * .ultimenu__link: the menu-link A tag.
 * @see about RTL
 *  - https://drupal.org/node/2032405
 */

/**
 * Menu list style.
 */
.ultimenu {
  list-style: none;
  margin: 0;
  min-height: 42px;
  position: relative; /* Make flyout relative to UL for wide flyout */
  z-index: 97;
}

/* Add "position: relative;" to make flyout relative to LI for smaller flyout */
.ultimenu > li {
  display: block;
  margin: 0;
}

/**
 * Ugly arrows to support special_menu_items module that stripped out A classes.
 * If you don't have special_menu_items, reference it by .ultimenu__link.
 */
.ultimenu .ultimenu__link {
  display: block;
  line-height: 1.6;
  position: relative; /* To hold arrows for small device */
  text-decoration: none;
  transition: background-color .5s, color .5s;
}

/**
 * Ultimenu flyout: Never display: none, bad for transition/ animation.
 */
.ultimenu__flyout {
  bottom: auto;
  /* Intentional !important to avoid accidental overrides. */
  display: block !important;
  left: 0;
  height: 0;
  line-height: 1.4;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  position: relative;
  top: 100%;
  visibility: hidden;
  transition: height .4s, padding .3s, opacity .3s;
  width: 100%;
  z-index: 102;
}

.ultimenu__flyout.is-flyout-expanded {
  height: auto;
  max-height: 100%;
  min-height: 64px;
  padding: 20px 0;
  overflow: visible;
  opacity: 1;
  transition-delay: .1s;
  visibility: visible;
}

/** This region is placed within .ultimenu__flyout. */
.ultimenu__region {
  background-color: #fff;
  padding: 20px;
}

/**
 * 944px below with 16px base font.
 */
@media all and (max-width: 58.999em) {
  .ultimenu > li,
  .ultimenu .ultimenu__link {
    min-width: 100%;
    width: 100%;
  }
}

/**
 * 944px+ with 16px base font.
 *
 * .ultimenu--hover is for when off-canvas is disabled for desktop.
 */
@media all and (min-width: 59em) {
  .ultimenu--hover > li {
    display: inline-block;
    vertical-align: bottom;
  }

  /** We still have .caret to toggle flyout here. */
  .ultimenu--hover .ultimenu__flyout {
    position: absolute;
  }

  /** To hold caret, tablet up. */
  .ultimenu.ultimenu--hover .ultimenu__link {
    padding-right: 64px;
  }

  .ultimenu--hover .ultimenu__link .caret {
    background-color: transparent;
  }

  .ultimenu--hover li .is-ultimenu-active + .ultimenu__flyout {
    padding: 20px 0;
  }
}

/**
 * 1025px with 16px base font, assumes no-touch devices.
 * Use Modernizr.js to have correct touch detection.
 * These rules should work without javascript.
 */
@media only screen and (min-width: 64.063em) {
  /** Generic rules for all Ultimenu flyout being hovered. */
  .ultimenu--hover li:hover > .ultimenu__flyout,
  .ultimenu--hover li a:active + .ultimenu__flyout,
  .ultimenu--hover li a:focus + .ultimenu__flyout,
  .ultimenu--hover li .ultimenu__flyout:focus {
    height: auto;
    max-height: none;
    min-height: 64px;
    padding: 20px 0;
    overflow: visible;
    opacity: 1;
    transition-delay: .1s;
    visibility: visible;
  }

  /** Ultimenu placed in the footer, htt: horizontal to top. */
  .ultimenu--htt li:hover > .ultimenu__flyout,
  .ultimenu--htt li a:active + .ultimenu__flyout,
  .ultimenu--htt li a:focus + .ultimenu__flyout,
  .ultimenu--htt li .ultimenu__flyout:focus {
    height: auto;
    bottom: 100%;
    max-height: none;
    top: auto;
  }

  /* Unless you want to show caret for laptop up, hide the caret.
     Remove this if you want to have clickable Ultimenu for all devices.
     Be sure to remove the hover rules above. */
  .ultimenu--htt .has-ultimenu .caret,
  .ultimenu--vertical .has-ultimenu .caret,
  .is-ultimenu-canvas--hover .ultimenu__link .caret {
    display: none;
  }

  .ultimenu.ultimenu--hover .ultimenu__link {
    padding-right: 1.5em;
  }
}