You are here

smm.css in Simple Mobile Menu 8.2

Same filename and directory in other branches
  1. 8 libraries/css/smm.css
/*
JQuery Simple MobileMenu
https://github.com/Position2/jQuery-Simple-MobileMenu
*/
/*Main style*/
body.mmactive {
  overflow: hidden;
}
.mobile_menu {
  display: none;
  position: relative;
}
.sm_menu_outer.active .mobile_menu {
  display: block;
}
.sm_menu_outer {
  height: calc(100vh - 60px);
  overflow-y: scroll;
  overflow-x: hidden;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: -9;
  width: 100%;
  opacity: 0;
  background-color: #000000;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.sm_menu_outer.active {
  opacity: 1;
  z-index: 999;
}
.sm_menu_outer .mobile_menu li.back a {
  padding: 20px 5px 20px 55px;
  background: url("../../images/back.png") no-repeat scroll 15px center / 5% auto;
}
.sm_menu_outer .mobile_menu a, .sm_menu_outer .mobile_menu span{
  color: #ffffff;
  display: block;
  font: 300 18px/140% "Lato", sans-serif;
  letter-spacing: 1px;
  padding: 20px 15px;
  text-transform: uppercase;
  text-decoration: none;
}
/*Sub Menu anim */
.sm_menu_outer .mobile_menu .submenu {
  background-color: #000000;
  height: 100%;
  position: absolute;
  right: -100%;
  top: 0;
  transition: all 0.5s ease 0s;
  width: 100%;
  z-index: 999;
}
.sm_menu_outer .mobile_menu li.active > .submenu {
  right: 0;
}
.sm_menu_outer .mobile_menu li {
  list-style-type: none;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0);
  border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #2a2a2a 20%, #2a2a2a 50%, #2a2a2a 80%, rgba(0, 0, 0, 0) 100%) 0 0 1 0;
  color: #ffffff;
}
.sm_menu_outer .mobile_menu li.hasChild > a , .sm_menu_outer .mobile_menu li.hasChild > span{
  background: url("../../images/next.png") no-repeat scroll 95% center / 5% auto;
}
/*Hamburger Animation */
#sm_menu_ham {
  cursor: pointer;
  float: right;
  height: 25px;
  position: fixed;
  right: 5px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
  width: 30px;
  top: 15px;
  right: 15px;
  z-index: 9999;
}
#sm_menu_ham span {
  background-color: #FFFFFF;
  border-radius: 5px;
  display: block;
  height: 2px;
  left: 0;
  opacity: 1;
  position: absolute;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
  width: 30px;
}
#sm_menu_ham span:nth-child(1) {
  top: 0;
}
#sm_menu_ham span:nth-child(2),
#sm_menu_ham span:nth-child(3) {
  top: 10px;
}
#sm_menu_ham span:nth-child(4) {
  top: 20px;
}
#sm_menu_ham.open span:nth-child(1) {
  left: 50%;
  top: 18px;
  width: 0;
}
#sm_menu_ham.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
#sm_menu_ham.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#sm_menu_ham.open span:nth-child(4) {
  left: 50%;
  top: 18px;
  width: 0;
}
/*@media (min-width: 0px) and (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 991px) {}
@media (min-width: 992px) and (max-width: 1024px) {}*/
@media (min-width: 1024px) {
  #sm_menu_ham,
  .sm_menu_outer {
    display: none;
  }
}

File

libraries/css/smm.css
View source
  1. /*
  2. JQuery Simple MobileMenu
  3. https://github.com/Position2/jQuery-Simple-MobileMenu
  4. */
  5. /*Main style*/
  6. body.mmactive {
  7. overflow: hidden;
  8. }
  9. .mobile_menu {
  10. display: none;
  11. position: relative;
  12. }
  13. .sm_menu_outer.active .mobile_menu {
  14. display: block;
  15. }
  16. .sm_menu_outer {
  17. height: calc(100vh - 60px);
  18. overflow-y: scroll;
  19. overflow-x: hidden;
  20. position: fixed;
  21. right: 0;
  22. bottom: 0;
  23. z-index: -9;
  24. width: 100%;
  25. opacity: 0;
  26. background-color: #000000;
  27. -webkit-transition: opacity 0.2s;
  28. -moz-transition: opacity 0.2s;
  29. transition: opacity 0.2s;
  30. }
  31. .sm_menu_outer.active {
  32. opacity: 1;
  33. z-index: 999;
  34. }
  35. .sm_menu_outer .mobile_menu li.back a {
  36. padding: 20px 5px 20px 55px;
  37. background: url("../../images/back.png") no-repeat scroll 15px center / 5% auto;
  38. }
  39. .sm_menu_outer .mobile_menu a, .sm_menu_outer .mobile_menu span{
  40. color: #ffffff;
  41. display: block;
  42. font: 300 18px/140% "Lato", sans-serif;
  43. letter-spacing: 1px;
  44. padding: 20px 15px;
  45. text-transform: uppercase;
  46. text-decoration: none;
  47. }
  48. /*Sub Menu anim */
  49. .sm_menu_outer .mobile_menu .submenu {
  50. background-color: #000000;
  51. height: 100%;
  52. position: absolute;
  53. right: -100%;
  54. top: 0;
  55. transition: all 0.5s ease 0s;
  56. width: 100%;
  57. z-index: 999;
  58. }
  59. .sm_menu_outer .mobile_menu li.active > .submenu {
  60. right: 0;
  61. }
  62. .sm_menu_outer .mobile_menu li {
  63. list-style-type: none;
  64. border-bottom: 0.5px solid rgba(0, 0, 0, 0);
  65. border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #2a2a2a 20%, #2a2a2a 50%, #2a2a2a 80%, rgba(0, 0, 0, 0) 100%) 0 0 1 0;
  66. color: #ffffff;
  67. }
  68. .sm_menu_outer .mobile_menu li.hasChild > a , .sm_menu_outer .mobile_menu li.hasChild > span{
  69. background: url("../../images/next.png") no-repeat scroll 95% center / 5% auto;
  70. }
  71. /*Hamburger Animation */
  72. #sm_menu_ham {
  73. cursor: pointer;
  74. float: right;
  75. height: 25px;
  76. position: fixed;
  77. right: 5px;
  78. -webkit-transform: rotate(0deg);
  79. -moz-transform: rotate(0deg);
  80. transform: rotate(0deg);
  81. -webkit-transition: all 0.5s ease-in-out 0s;
  82. -moz-transition: all 0.5s ease-in-out 0s;
  83. -o-transition: all 0.5s ease-in-out 0s;
  84. transition: all 0.5s ease-in-out 0s;
  85. width: 30px;
  86. top: 15px;
  87. right: 15px;
  88. z-index: 9999;
  89. }
  90. #sm_menu_ham span {
  91. background-color: #FFFFFF;
  92. border-radius: 5px;
  93. display: block;
  94. height: 2px;
  95. left: 0;
  96. opacity: 1;
  97. position: absolute;
  98. -webkit-transform: rotate(0deg);
  99. -moz-transform: rotate(0deg);
  100. transform: rotate(0deg);
  101. -webkit-transition: all 0.25s ease-in-out 0s;
  102. -moz-transition: all 0.25s ease-in-out 0s;
  103. -o-transition: all 0.25s ease-in-out 0s;
  104. transition: all 0.25s ease-in-out 0s;
  105. width: 30px;
  106. }
  107. #sm_menu_ham span:nth-child(1) {
  108. top: 0;
  109. }
  110. #sm_menu_ham span:nth-child(2),
  111. #sm_menu_ham span:nth-child(3) {
  112. top: 10px;
  113. }
  114. #sm_menu_ham span:nth-child(4) {
  115. top: 20px;
  116. }
  117. #sm_menu_ham.open span:nth-child(1) {
  118. left: 50%;
  119. top: 18px;
  120. width: 0;
  121. }
  122. #sm_menu_ham.open span:nth-child(2) {
  123. -webkit-transform: rotate(45deg);
  124. -moz-transform: rotate(45deg);
  125. transform: rotate(45deg);
  126. }
  127. #sm_menu_ham.open span:nth-child(3) {
  128. -webkit-transform: rotate(-45deg);
  129. -moz-transform: rotate(-45deg);
  130. transform: rotate(-45deg);
  131. }
  132. #sm_menu_ham.open span:nth-child(4) {
  133. left: 50%;
  134. top: 18px;
  135. width: 0;
  136. }
  137. /*@media (min-width: 0px) and (max-width: 767px) {}
  138. @media (min-width: 768px) and (max-width: 991px) {}
  139. @media (min-width: 992px) and (max-width: 1024px) {}*/
  140. @media (min-width: 1024px) {
  141. #sm_menu_ham,
  142. .sm_menu_outer {
  143. display: none;
  144. }
  145. }