ultimenu.css in Ultimenu 8

This file contains all Ultimenu layout and very basic styling.

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 very basic styling.
 *
 * 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
 */

/* Remove this box-sizing if your theme is already using one globally */
.ultimenu *,
.ultimenu *::before,
.ultimenu *::after {
  box-sizing: border-box;
}

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

.block .ultimenu {
  padding: 0;
}

.ultimenu .ultimenu__link {
  line-height: 1.6;
}

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

/**
 * Ultimenu flyout.
 */
.ultimenu__flyout {
  left: 0; /* LTR */
  line-height: 1.4;
  padding: 20px 0;
  width: 100%;
  z-index: 102;
}

[dir="rtl"] .ultimenu__flyout {
  left: 0;
}

.ultimenu__flyout .block {
  max-width: 100%;
}

/**
 * Orientation.
 * -vtr: vdertical to right
 * -vtl: vertical to left
 * -htt: horizontal to top
 * -htb: horizontal to bottom
 */
.ultimenu--horizontal {
  padding: 0; /* Overrides bartik .block ul padding */
  z-index: 9;
}

.ultimenu--vertical {
  height: auto;
  z-index: 8;
}

.ultimenu--vertical > li {
  display: block;
  float: none;
  position: relative;
}

.ultimenu--vtr .ultimenu__flyout {
  left: 100%; /* LTR */
  top: 0;
}

[dir="rtl"] .ultimenu--vtr .ultimenu__flyout {
  left: auto;
  right: 100%;
}

.ultimenu--vtl .ultimenu__flyout {
  left: auto; /* LTR */
  right: 100%;  /* LTR */
  top: 0;
}

[dir="rtl"] .ultimenu--vtl .ultimenu__flyout {
  left: 100%;
  right: auto;
}

.ultimenu--htt .ultimenu__flyout {
  bottom: 100%;
  margin-bottom: 20px;
  top: auto;
}

.button.button--ultimenu {
  background: #555;
  border: 1px solid #333;
  border-radius: 4px;
  height: 32px;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 10px;
  text-align: center;
  top: 5px;
  width: 42px;
  z-index: 999;
}

.button.button--ultimenu:hover,
.button.button--ultimenu:active,
.button.button--ultimenu:focus {
  background: #111;
  border-color: #555;
}

.button--ultimenu .bars {
  display: block;
  font-size: 0;
  height: 0;
  position: absolute;
  right: 10px;
  top: -5px;
  width: 20px;
  box-shadow: 0 12px 0 2px white, 0 20px 0 2px white, 0 28px 0 2px white;
}

/**
 * Smaller medium.
 */
@media all and (max-width: 58.999em) {
  /* Ultimenu flyout. Mobile version has no :hover, so safe to display: none,
  and relies on click events via jQuery. */
  .ultimenu {
    overflow: hidden;
  }

  .ultimenu__flyout {
    display: none;
  }

  .ultimenu > li,
  .ultimenu .ultimenu__link {
    min-width: 100%;
    width: 100%;
  }

  .ultimenu--main {
    background: #222;
    display: none; /* We use jQuery to toggle this on smaller device */
  }

  /* Mobile needs a handler for click event. */
  .ultimenu--main  .ultimenu__link {
    color: #fff;
    padding: 1em 1.75em;
    min-height: 42px;
  }

  .ultimenu--main  .ultimenu__link:hover,
  .ultimenu--main  .ultimenu__link:active {
    background: #000;
  }
  /* @todo is-active https://www.drupal.org/node/2281785 */
  .ultimenu--main  .ultimenu__link.is-active {
    background: #111;
  }

  .has-ultimenu .caret {
    background-color: rgba(0,0,0, .2);
    display: block;
    height: 100%;
    min-height: 34px;
    position: absolute;
    right: 10px; /* LTR */
    top: 0;
    width: 42px;
  }

  [dir="rtl"] .has-ultimenu .caret {
    left: 10px;
    right: auto;
  }

  .has-ultimenu .caret::before {
    border: 8px solid transparent;
    border-top: 12px solid #fff;
    content: '';
    display: block;
    height: 0;
    margin-top: -6px;
    position: absolute;
    right: 10px; /* LTR */
    top: 50%;
    width: 0;
    z-index: 2;
  }

  .has-ultimenu  .js-ultimenu-active .caret::before {
    border-bottom: 12px solid #fff;
    border-top: 0;
  }

  [dir="rtl"] .has-ultimenu .caret::before {
    left: 10px;
    right: auto;
  }

  .ultimenu__flyout,
  .ultimenu--vtl .ultimenu__flyout,
  .ultimenu--vtr .ultimenu__flyout,
  .ultimenu--htt .ultimenu__flyout {
    bottom: auto;
    height: auto;
    left: auto;
    margin: 0;
    right: auto;
    top: auto;
    width: 100%;
  }

  /* Button for main menu. */
  .button.button--ultimenu {
    cursor: pointer;
    display: block;
  }
}

/**
 * Larger medium ~ 944px
 */
@media all and (min-width: 59em) {
  .ultimenu .ultimenu__link {
    line-height: 1.4;
  }

  /* Ultimenu flyout: Never display: none, bad for animation. */
  .ultimenu__flyout {
    border-radius: 5px;
    display: block !important; /* Intentional !important to avoid overrides */
    margin: 20px 0 0;
    /** Fixed for unwanted hover. Or target .ultimenu selector. */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    transition: visibility 0s linear 0.5s, opacity .5s linear, margin .5s ease, max-height .8s ease .2s;
    visibility: hidden;
  }

  .ultimenu > li {
    display: inline-block;
    margin: 0 -4px 0 0; /* LTR */
  }

  [dir="rtl"] .ultimenu > li {
    margin: 0 0 0 -4px;
  }

  .ultimenu--vertical > li {
    display: block;
    margin-right: 0;
  }

  [dir="rtl"] .ultimenu--vertical > li {
    margin-left: 0;
  }

  .ultimenu li:hover > .ultimenu__flyout,
  .ultimenu li a:focus + .ultimenu__flyout,
  .ultimenu li .ultimenu__flyout:focus-within {
    display: block;
    margin-top: 0;
    max-height: 100%;
    overflow: visible;
    opacity: 1;
    transition-delay: 0s;
    visibility: visible;
  }

  .ultimenu--vertical .ultimenu__flyout {
    margin-top: 0;
  }

  .ultimenu--vtl .ultimenu__flyout {
    margin-right: 20px; /* LTR */
  }

  [dir="rtl"] .ultimenu--vtl .ultimenu__flyout {
    margin-left: 20px;
    margin-right: auto;
  }

  .ultimenu--vtr .ultimenu__flyout {
    margin-left: 20px; /* LTR */
  }

  [dir="rtl"] .ultimenu--vtr .ultimenu__flyout {
    margin-left: auto;
    margin-right: 20px;
  }

  .ultimenu--vtl li:hover .ultimenu__flyout {
    margin-right: 10px; /* LTR */
  }

  [dir="rtl"] .ultimenu--vtl li:hover .ultimenu__flyout {
    margin-left: 10px;
    margin-right: auto;
  }

  .ultimenu--vtr li:hover .ultimenu__flyout {
    margin-left: 10px; /* LTR */
  }

  [dir="rtl"] .ultimenu--vtr li:hover .ultimenu__flyout {
    margin-left: auto;
    margin-right: 10px;
  }

  .ultimenu--htt li:hover .ultimenu__flyout {
    margin-bottom: 10px;
  }

  .ultimenu__link .caret {
    display: none;
  }

  .button.button--ultimenu {
    display: none;
  }

  #header .ultimenu__flyout,
  #footer .ultimenu__flyout {
    min-width: 600px;
  }

  .sidebar .ultimenu__flyout {
    min-width: 500px;
  }
}

/**
 * Basic skins.
 * Based on bartik if region navigation is replacing theme_links()
 */
.ultimenu__flyout {
  color: #777;
}

/**
 * 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;
  padding: .5em 1.25em;
  position: relative; /* To hold arrows for small device */
  transition: background-color .5s, color .5s;
  text-decoration: none;
}

.ultimenu--vertical .ultimenu__link {
  padding: .5em 0;
}

/**
 * Menu description.
 */
.ultimenu .ultimenu__link small {
  display: block;
  font-size: 70%;
  line-height: 1;
}

/**
 * Core bartik do not have clearfix for region, add support for floating blocks
 * with micro clearfix.
 */
.ultimenu__flyout::after,
.ultimenu .region::after {
  clear: both;
  content: " ";
  display: table;
}