You are here

responsive_menu.css in Responsive and off-canvas menu 7.3

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

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

.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 > a:hover,
.horizontal-menu > li.active-trail > a {
}


.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-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;
}

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

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

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

.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-opening #mm-blocker {
  background: rgba(0, 0, 0, 0.2);
  transition: background 1s ease 0.3s;
}

.mm-opening #page {
  border-left: 1px solid #ccc;
}

File

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