You are here

responsive-menus--meganav.css in AT Tools 8.2

/**
 * Mega Nav
 * Hamburger menu that shows the top level items horizontal, and when expanded
 * the top level items show vertically with sub-menus horizontal.
 * This style was borrowed from http://www.theguardian.com
 ============================================================================ */
.ms-meganav .rm-region,
.ms-meganav .rm-block {
  position: relative;
}

.ms-meganav .rm-toggle {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 200;
  padding: 0;
  margin: 0.125rem 0 0;
}

.ms-meganav .rm-toggle__link, .ms-meganav .rm-toggle__link:hover, .ms-meganav .rm-toggle__link:focus, .ms-meganav .rm-toggle__link:active {
  padding: 0.3125rem 0.375rem 0.1875rem;
}

.ms-meganav .rm-toggle__label {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  word-wrap: normal;
  font: 0/0 a;
}

.ms-meganav .rm-block__content {
  transition: all, 225ms, ease-in-out;
}

.ms-meganav .rm-block__content .menu {
  padding: 0;
}

.ms-meganav .rm-block__content .menu .menu__link {
  padding: 0.5rem 1rem;
}

.ms-meganav .rm-block__content .menu .menu__link:before, .ms-meganav .rm-block__content .menu .menu__link:after {
  content: "";
  display: none;
}

.ms-meganav .rm-block__content .menu-level-1 > .menu__item {
  float: left;
}

.ms-meganav .rm-block__content .menu-level-2 {
  display: none;
  opacity: 0.001;
}

.ms-meganav.rm-is-open .rm-block__content {
  padding: 0;
  margin: 0;
}

.ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item {
  float: none;
  margin-right: 2.5rem;
}

.ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:before, .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:after {
  content: " ";
  display: table;
}

.ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:after {
  clear: both;
}

.ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:last-child {
  border-bottom: none;
}

.ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item .menu__link {
  float: left;
}

.ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item > span > .menu__link {
  width: 12em;
}

.ms-meganav.rm-is-open .rm-block__content .menu-level-2 {
  display: block;
  float: left;
  opacity: 1;
}

.ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu {
  padding: 0;
}

.ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu,
.ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu__item {
  float: left;
}

.ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu .menu__link,
.ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu__item .menu__link {
  width: auto;
}
/*# sourceMappingURL=responsive-menus--meganav.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/responsive-menus--meganav.css
View source
  1. /**
  2. * Mega Nav
  3. * Hamburger menu that shows the top level items horizontal, and when expanded
  4. * the top level items show vertically with sub-menus horizontal.
  5. * This style was borrowed from http://www.theguardian.com
  6. ============================================================================ */
  7. .ms-meganav .rm-region,
  8. .ms-meganav .rm-block {
  9. position: relative;
  10. }
  11. .ms-meganav .rm-toggle {
  12. position: absolute;
  13. right: 0;
  14. top: 0;
  15. z-index: 200;
  16. padding: 0;
  17. margin: 0.125rem 0 0;
  18. }
  19. .ms-meganav .rm-toggle__link, .ms-meganav .rm-toggle__link:hover, .ms-meganav .rm-toggle__link:focus, .ms-meganav .rm-toggle__link:active {
  20. padding: 0.3125rem 0.375rem 0.1875rem;
  21. }
  22. .ms-meganav .rm-toggle__label {
  23. position: absolute !important;
  24. clip: rect(1px, 1px, 1px, 1px);
  25. overflow: hidden;
  26. height: 1px;
  27. width: 1px;
  28. padding: 0;
  29. word-wrap: normal;
  30. font: 0/0 a;
  31. }
  32. .ms-meganav .rm-block__content {
  33. transition: all, 225ms, ease-in-out;
  34. }
  35. .ms-meganav .rm-block__content .menu {
  36. padding: 0;
  37. }
  38. .ms-meganav .rm-block__content .menu .menu__link {
  39. padding: 0.5rem 1rem;
  40. }
  41. .ms-meganav .rm-block__content .menu .menu__link:before, .ms-meganav .rm-block__content .menu .menu__link:after {
  42. content: "";
  43. display: none;
  44. }
  45. .ms-meganav .rm-block__content .menu-level-1 > .menu__item {
  46. float: left;
  47. }
  48. .ms-meganav .rm-block__content .menu-level-2 {
  49. display: none;
  50. opacity: 0.001;
  51. }
  52. .ms-meganav.rm-is-open .rm-block__content {
  53. padding: 0;
  54. margin: 0;
  55. }
  56. .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item {
  57. float: none;
  58. margin-right: 2.5rem;
  59. }
  60. .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:before, .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:after {
  61. content: " ";
  62. display: table;
  63. }
  64. .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:after {
  65. clear: both;
  66. }
  67. .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:last-child {
  68. border-bottom: none;
  69. }
  70. .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item .menu__link {
  71. float: left;
  72. }
  73. .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item > span > .menu__link {
  74. width: 12em;
  75. }
  76. .ms-meganav.rm-is-open .rm-block__content .menu-level-2 {
  77. display: block;
  78. float: left;
  79. opacity: 1;
  80. }
  81. .ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu {
  82. padding: 0;
  83. }
  84. .ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu,
  85. .ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu__item {
  86. float: left;
  87. }
  88. .ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu .menu__link,
  89. .ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu__item .menu__link {
  90. width: auto;
  91. }
  92. /*# sourceMappingURL=responsive-menus--meganav.css.map */