You are here

Home » API reference » Simple Mobile Menu 8

smm.css in Simple Mobile Menu 8

Same filename and directory in other branches
  1. 8.2 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 {
  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 {
  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 {

  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 {

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