You are here

responsive_menu.css in Responsive and off-canvas menu 8.2

.responsive-menu-block-wrapper {
  display: none;
}

html.mm-opened .mm-page {
  position: fixed !important;
  width: 100%;
}

.mm-page,
.mm-wrapper_background body {
  background-color: #ffffff;
}

.mm-wrapper_opening .toolbar-tray-open.toolbar-fixed.toolbar-vertical,
.mm-opened .toolbar-tray-open.toolbar-fixed.toolbar-vertical {
  margin-left: 0;
}

.mm-wrapper_opening .toolbar-tray-open.toolbar-fixed.toolbar-vertical .mm-page,
.mm-opened .toolbar-tray-open.toolbar-fixed.toolbar-vertical .mm-page {
  padding-left: 240px;
  padding-left: 15rem;
}

.horizontal-menu {
  position: relative;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.horizontal-menu > li {
  display: inline-block;
  position: relative;
}

.horizontal-menu > li ul ul {
  left: 13.75em;
  top: 0;
}

.horizontal-menu ul .fly-left ul {
  left: -13.75em;
}

.horizontal-menu > li > a {
  display: block;
  padding-top: 0.3em;
  padding-right: 1em;
  padding-bottom: 0.35em;
  padding-left: 1em;
}

.horizontal-menu > li ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  box-sizing: border-box;
  width: 13.75em;
  list-style: none;
}

.horizontal-menu li.sfHover > ul,
.horizontal-menu li:hover > ul {
  display: block;
}

.horizontal-menu li li {
  position: relative;
  float: left;
  width: 100%;
}

.horizontal-menu > li > li:hover > ul,
.horizontal-menu > li > li.sfHover > ul {
  display: block;
}

.horizontal-menu > li li > a {
  display: block;
  position: relative;
  padding-top: 0.25em;
  padding-right: 1em;
  padding-bottom: 0.25em;
  padding-left: 1em;
  text-transform: none;
}

.off-canvas-wrapper {
  display: block;
}

.no-js .off-canvas-wrapper {
  display: none;
}

.responsive-menu-toggle {
  display: inline-block;
}

.responsive-menu-toggle-icon {
  box-sizing: border-box;
  display: block;
  width: 44px;
  height: 35px;
  z-index: 4;
  margin-top: 0;
  position: relative;
}

.no-js .responsive-menu-toggle-icon {
  display: none;
}

.responsive-menu-toggle-icon span.label {
  display: block;
  position: absolute;
  font-size: 17px;
  text-transform: uppercase;
  top: 2px;
  left: 40px;
  color: #fff;
}

.responsive-menu-toggle-icon:before,
.responsive-menu-toggle-icon:after,
.responsive-menu-toggle-icon span.icon {
  background: #fff;
  content: '';
  display: block;
  width: 20px;
  height: 3px;
  position: absolute;
  top: 0;
  left: 13px;
  border-radius: 2px;
}

.responsive-menu-toggle-icon:before {
  top: 8px;
}

.responsive-menu-toggle-icon span.icon {
  top: 14px;
}

.responsive-menu-toggle-icon:after {
  top: 20px;
}

.responsive-menu-toggle-icon:before,
.responsive-menu-toggle-icon:after,
.responsive-menu-toggle-icon span.icon {
  transition: none 0.4s ease-out 0.1s;
  transition-property: -webkit-transform, top, bottom, left, opacity;
  transition-property: transform, top, bottom, left, opacity;
}

html.mm-wrapper_opening .responsive-menu-toggle-icon:before,
html.mm-wrapper_opening .responsive-menu-toggle-icon:after {
  top: 14px;
}

html.mm-wrapper_opening .responsive-menu-toggle-icon span.icon {
  left: -25px;
  opacity: 0;
}

html.mm-wrapper_opening .responsive-menu-toggle-icon:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

html.mm-wrapper_opening .responsive-menu-toggle-icon:after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#mm-blocker {
  background: rgba(0, 0, 0, 0);
}
.mm-wrapper_opening #mm-blocker {
  background: rgba(0, 0, 0, 0.2);
  transition: background 1s ease 0.3s;
}
.mm-wrapper_opening #page {
  border-left: 1px solid #ccc;
}

.mm-panel a {
  border-bottom: none;
}

ul.menu.mm-listview a.is-active {
  color: inherit;
}

.mm-panel a:hover {
  border: none;
}

File

css/responsive_menu.css
View source
  1. .responsive-menu-block-wrapper {
  2. display: none;
  3. }
  4. html.mm-opened .mm-page {
  5. position: fixed !important;
  6. width: 100%;
  7. }
  8. .mm-page,
  9. .mm-wrapper_background body {
  10. background-color: #ffffff;
  11. }
  12. .mm-wrapper_opening .toolbar-tray-open.toolbar-fixed.toolbar-vertical,
  13. .mm-opened .toolbar-tray-open.toolbar-fixed.toolbar-vertical {
  14. margin-left: 0;
  15. }
  16. .mm-wrapper_opening .toolbar-tray-open.toolbar-fixed.toolbar-vertical .mm-page,
  17. .mm-opened .toolbar-tray-open.toolbar-fixed.toolbar-vertical .mm-page {
  18. padding-left: 240px;
  19. padding-left: 15rem;
  20. }
  21. .horizontal-menu {
  22. position: relative;
  23. margin-top: 0;
  24. margin-right: 0;
  25. margin-bottom: 0;
  26. margin-left: 0;
  27. padding: 0;
  28. list-style: none;
  29. width: 100%;
  30. }
  31. .horizontal-menu > li {
  32. display: inline-block;
  33. position: relative;
  34. }
  35. .horizontal-menu > li ul ul {
  36. left: 13.75em;
  37. top: 0;
  38. }
  39. .horizontal-menu ul .fly-left ul {
  40. left: -13.75em;
  41. }
  42. .horizontal-menu > li > a {
  43. display: block;
  44. padding-top: 0.3em;
  45. padding-right: 1em;
  46. padding-bottom: 0.35em;
  47. padding-left: 1em;
  48. }
  49. .horizontal-menu > li ul {
  50. position: absolute;
  51. display: none;
  52. top: 100%;
  53. left: 0;
  54. z-index: 99;
  55. padding-top: 0;
  56. padding-right: 0;
  57. padding-bottom: 0;
  58. padding-left: 0;
  59. box-sizing: border-box;
  60. width: 13.75em;
  61. list-style: none;
  62. }
  63. .horizontal-menu li.sfHover > ul,
  64. .horizontal-menu li:hover > ul {
  65. display: block;
  66. }
  67. .horizontal-menu li li {
  68. position: relative;
  69. float: left;
  70. width: 100%;
  71. }
  72. .horizontal-menu > li > li:hover > ul,
  73. .horizontal-menu > li > li.sfHover > ul {
  74. display: block;
  75. }
  76. .horizontal-menu > li li > a {
  77. display: block;
  78. position: relative;
  79. padding-top: 0.25em;
  80. padding-right: 1em;
  81. padding-bottom: 0.25em;
  82. padding-left: 1em;
  83. text-transform: none;
  84. }
  85. .off-canvas-wrapper {
  86. display: block;
  87. }
  88. .no-js .off-canvas-wrapper {
  89. display: none;
  90. }
  91. .responsive-menu-toggle {
  92. display: inline-block;
  93. }
  94. .responsive-menu-toggle-icon {
  95. box-sizing: border-box;
  96. display: block;
  97. width: 44px;
  98. height: 35px;
  99. z-index: 4;
  100. margin-top: 0;
  101. position: relative;
  102. }
  103. .no-js .responsive-menu-toggle-icon {
  104. display: none;
  105. }
  106. .responsive-menu-toggle-icon span.label {
  107. display: block;
  108. position: absolute;
  109. font-size: 17px;
  110. text-transform: uppercase;
  111. top: 2px;
  112. left: 40px;
  113. color: #fff;
  114. }
  115. .responsive-menu-toggle-icon:before,
  116. .responsive-menu-toggle-icon:after,
  117. .responsive-menu-toggle-icon span.icon {
  118. background: #fff;
  119. content: '';
  120. display: block;
  121. width: 20px;
  122. height: 3px;
  123. position: absolute;
  124. top: 0;
  125. left: 13px;
  126. border-radius: 2px;
  127. }
  128. .responsive-menu-toggle-icon:before {
  129. top: 8px;
  130. }
  131. .responsive-menu-toggle-icon span.icon {
  132. top: 14px;
  133. }
  134. .responsive-menu-toggle-icon:after {
  135. top: 20px;
  136. }
  137. .responsive-menu-toggle-icon:before,
  138. .responsive-menu-toggle-icon:after,
  139. .responsive-menu-toggle-icon span.icon {
  140. transition: none 0.4s ease-out 0.1s;
  141. transition-property: -webkit-transform, top, bottom, left, opacity;
  142. transition-property: transform, top, bottom, left, opacity;
  143. }
  144. html.mm-wrapper_opening .responsive-menu-toggle-icon:before,
  145. html.mm-wrapper_opening .responsive-menu-toggle-icon:after {
  146. top: 14px;
  147. }
  148. html.mm-wrapper_opening .responsive-menu-toggle-icon span.icon {
  149. left: -25px;
  150. opacity: 0;
  151. }
  152. html.mm-wrapper_opening .responsive-menu-toggle-icon:before {
  153. -webkit-transform: rotate(45deg);
  154. -ms-transform: rotate(45deg);
  155. transform: rotate(45deg);
  156. }
  157. html.mm-wrapper_opening .responsive-menu-toggle-icon:after {
  158. -webkit-transform: rotate(-45deg);
  159. -ms-transform: rotate(-45deg);
  160. transform: rotate(-45deg);
  161. }
  162. #mm-blocker {
  163. background: rgba(0, 0, 0, 0);
  164. }
  165. .mm-wrapper_opening #mm-blocker {
  166. background: rgba(0, 0, 0, 0.2);
  167. transition: background 1s ease 0.3s;
  168. }
  169. .mm-wrapper_opening #page {
  170. border-left: 1px solid #ccc;
  171. }
  172. .mm-panel a {
  173. border-bottom: none;
  174. }
  175. ul.menu.mm-listview a.is-active {
  176. color: inherit;
  177. }
  178. .mm-panel a:hover {
  179. border: none;
  180. }