You are here

Home » API reference » Ultimenu 8.2

ultimenu--htb-sliding.css in Ultimenu 8.2

Skin based on safe CSS file name: ultimenu--htb-sliding.

Sliding sample for horizontal-to-bottom orientation.

File

css/theme/ultimenu--htb-sliding.css
View source 
  1. /**

  2.  * @file

  3.  * Skin based on safe CSS file name: ultimenu--htb-sliding.

  4.  *

  5.  * Sliding sample for horizontal-to-bottom orientation.

  6.  */

  7. 

  8. /** 944px with 16px base font. */

  9. @media only screen and (min-width: 59em) {

  10. 

  11.   #header .ultimenu--htb-sliding .ultimenu__flyout {

  12.     min-width: 100%;

  13.   }

  14. 

  15.   .ultimenu--htb-sliding .ultimenu__flyout {

  16.     background: #fff;

  17.     margin: 0;

  18.     opacity: 1;

  19.     padding: 0;

  20.     top: 100%;

  21.     visibility: visible;

  22.   }

  23. 

  24.   .ultimenu--htb-sliding .ultimenu__flyout,

  25.   .ultimenu--htb-sliding .ultimenu__region {

  26.     max-height: 0;

  27.     overflow: hidden;

  28.     transition: max-height .25s ease-out;

  29.   }

  30. 

  31.   .ultimenu--htb-sliding .ultimenu__region {

  32.     visibility: hidden;

  33.     padding: 30px 30px 0 30px;

  34.     position: relative;

  35.     transition: visibility .5s linear 0s, padding .25s ease-out, max-height .15s ease-out;

  36.   }

  37. 

  38.   .ultimenu--htb-sliding > li:hover .ultimenu__flyout,

  39.   .ultimenu--htb-sliding > li:hover .ultimenu__region {

  40.     max-height: 620px;

  41.     overflow: visible;

  42.     visibility: visible;

  43.     z-index: 99;

  44.   }

  45. 

  46.   .ultimenu--htb-sliding > li:hover .ultimenu__region {

  47.     padding-bottom: 30px;

  48.   }

  49. }