You are here

ultimenu.vertical.css in Ultimenu 8.2

This file contains all Ultimenu vertical layout.

File

css/components/ultimenu.vertical.css
View source
  1. /**
  2. * @file
  3. * This file contains all Ultimenu vertical layout.
  4. */
  5. /**
  6. * Orientation.
  7. * -vtr: vertical to right
  8. * -vtl: vertical to left
  9. * -htt: horizontal to top
  10. * -htb: horizontal to bottom
  11. */
  12. .ultimenu--vertical {
  13. height: auto;
  14. z-index: 96;
  15. }
  16. .ultimenu--vertical > li {
  17. display: block;
  18. float: none;
  19. position: relative;
  20. }
  21. .ultimenu--vtr .ultimenu__flyout {
  22. left: 100%; /* LTR */
  23. top: 0;
  24. }
  25. [dir="rtl"] .ultimenu--vtr .ultimenu__flyout {
  26. left: auto;
  27. right: 100%;
  28. }
  29. .ultimenu--vtl .ultimenu__flyout {
  30. left: auto; /* LTR */
  31. right: 100%; /* LTR */
  32. top: 0;
  33. }
  34. [dir="rtl"] .ultimenu--vtl .ultimenu__flyout {
  35. left: 100%;
  36. right: auto;
  37. }
  38. .ultimenu--vertical .ultimenu__link {
  39. padding: .5em 1em;
  40. }
  41. /**
  42. * 944px+ with 16px base font.
  43. */
  44. @media all and (min-width: 59em) {
  45. .ultimenu--vtl .ultimenu__flyout {
  46. margin-right: 20px; /* LTR */
  47. }
  48. [dir="rtl"] .ultimenu--vtl .ultimenu__flyout {
  49. margin-left: 20px;
  50. margin-right: auto;
  51. }
  52. .ultimenu--vtr .ultimenu__flyout {
  53. margin-left: 20px; /* LTR */
  54. }
  55. [dir="rtl"] .ultimenu--vtr .ultimenu__flyout {
  56. margin-left: auto;
  57. margin-right: 20px;
  58. }
  59. .ultimenu--vtl li:hover .ultimenu__flyout {
  60. margin-right: 10px; /* LTR */
  61. }
  62. [dir="rtl"] .ultimenu--vtl li:hover .ultimenu__flyout {
  63. margin-left: 10px;
  64. margin-right: auto;
  65. }
  66. .ultimenu--vtr li:hover .ultimenu__flyout {
  67. margin-left: 10px; /* LTR */
  68. }
  69. [dir="rtl"] .ultimenu--vtr li:hover .ultimenu__flyout {
  70. margin-left: auto;
  71. margin-right: 10px;
  72. }
  73. }