You are here

Home » API reference » Mobile sliding menu 7

mm-basic.css in Mobile sliding menu 7 

/* Mmenu transition */
html.mm-basic .mm-page,
html.mm-basic #mm-blocker,
html.mm-basic .mm-fixed-top,
html.mm-basic .mm-fixed-bottom,
html.mm-basic .mm-menu.mm-horizontal > .mm-panel {
  -webkit-transition: none 0.2s linear;
  -moz-transition: none 0.2s linear;
  -ms-transition: none 0.2s linear;
  -o-transition: none 0.2s linear;
  transition: none 0.2s linear;
  -webkit-transition-property: top, right, bottom, left, border;
  -moz-transition-property: top, right, bottom, left, border;
  -ms-transition-property: top, right, bottom, left, border;
  -o-transition-property: top, right, bottom, left, border;
  transition-property: top, right, bottom, left, border;
}

/* Blocker */
html.mm-basic #mm-blocker {
  background: #000;
  opacity: 0.6 !important;
  filter:alpha(opacity=60) !important; /* For IE8 and earlier */
}

/* Body */
html.mm-basic .mm-page {
  box-shadow: none;
}

/* Mmenu nav */
html.mm-basic nav.mm-basic {
  background: #32394a;
  color: #c4ccda;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  font-family: Helvetica, sans-serif;
}

html.mm-basic nav.mm-basic {
  font-size: 18px;
}

html.mm-basic nav.mm-basic a {
  font-size: 1.25em;
}

html.mm-basic nav.mm-basic > .mm-header {
  border-color: #242a37;
  color: #c4ccda;
  height: 60px;
  line-height: 60px;
  padding: 0;
  background: #434b5c; /* Old browsers */
  background: -moz-linear-gradient(top,  #434b5c 0%, #394152 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#434b5c), color-stop(100%,#394152)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #434b5c 0%,#394152 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #434b5c 0%,#394152 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #434b5c 0%,#394152 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #434b5c 0%,#394152 100%); /* W3C */
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#434b5c', endColorstr='#394152',GradientType=0 )"; /* IE6-9 */
}

html.mm-basic nav.mm-basic > .mm-header .mm-title {
  font-size: 1.5em;
  padding: 0 10%;
  width: 80%;
  text-align: center;
}

html.mm-basic nav.mm-basic > .mm-header .mm-prev:before,
html.mm-basic nav.mm-basic > .mm-header .mm-next:before {
  z-index: 10;
  border-color: #c4ccda;
  margin-bottom: -5px;
  width: 10px;
  height: 10px;
}

html.mm-basic nav.mm-basic > .mm-panel {
  padding: 60px 0;
}

html.mm-basic nav.mm-basic .mm-list > li {
  border-top: 1px solid #404857;
  border-bottom: 1px solid #242a37;
}

html.mm-basic nav.mm-basic .mm-list > li > span {
  padding: 15px 20px;
}

/* Mmenu list icons */
html.mm-basic nav.mm-basic .mm-list > li > a,
html.mm-basic nav.mm-basic .mm-list > li > span {
  white-space: normal;
}

html.mm-basic nav.mm-basic span.mmenu-list.mmenu-block-collapsed,
html.mm-basic nav.mm-basic a.mmenu-list {
  display: block;
}

html.mm-basic nav.mm-basic li {
  display: table;
  width: 100%;
}

html.mm-basic nav.mm-basic .mmenu-list-icon,
html.mm-basic nav.mm-basic span.mmenu-list.mmenu-block-collapsed .mmenu-list-title,
html.mm-basic nav.mm-basic a.mmenu-list .mmenu-list-title {
  display: table-cell;
  vertical-align: middle;
  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  white-space: pre-wrap;       /* css-3 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  word-break: break-all;
  white-space: normal;
}


html.mm-basic nav.mm-basic .mm-list > li:not(.mmenu-wrap) a:not(.mm-subopen):not(.mm-subclose):not(.mm-fullsubopen) {
  padding: 15px 20px;
}

html.mm-basic nav.mm-basic .mm-list > li.mm-selected > a,
html.mm-basic nav.mm-basic .mm-list > li.mm-selected > span {
  background: rgba(0, 0, 0, 0.1);
}

html.mm-basic nav.mm-basic .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-noresults)::after {
  border: none !important;
}

html.mm-basic nav.mm-basic em.mm-counter {
  color: #c4ccda;
  font-size: 1.25em;
}

html.mm-basic nav.mm-basic em.mm-counter + a.mm-subopen + a,
html.mm-basic nav.mm-basic em.mm-counter + a.mm-subopen + span {
  margin-right: 80px;
}

html.mm-basic nav.mm-basic em.mm-counter + a.mm-subopen {
  padding-left: 80px;
}

html.mm-basic nav.mm-basic a.mm-subopen:before,
html.mm-basic nav.mm-basic a.mm-fullsubopen:before,
html.mm-basic nav.mm-basic a.mm-subclose:before {
  border-left-color: rgba(0, 0, 0, 0.25);
  border-left-width: 0px;
  border-left-style: solid;
}

html.mm-basic nav.mm-basic a.mm-subopen:after,
html.mm-basic nav.mm-basic a.mm-fullsubopen:after,
html.mm-basic nav.mm-basic a.mm-subclose:after {
  border-color: #c4ccda;
  width: 8px;
  height: 8px;
  right: 20px;
}

html.mm-basic nav.mm-basic .mmenu-block-collapsed {
  padding: 15px 20px !important;
  font-size: 1.25em;
}

html.mm-basic nav.mm-basic .mmenu-block-expanded {
  background: #434b5c; /* Old browsers */
  background: -moz-linear-gradient(top,  #434b5c 0%, #394152 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#434b5c), color-stop(100%,#394152)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #434b5c 0%,#394152 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #434b5c 0%,#394152 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #434b5c 0%,#394152 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #434b5c 0%,#394152 100%); /* W3C */
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#434b5c', endColorstr='#394152',GradientType=0 )"; /* IE6-9 */
  padding: 5px 10px 5px 20px !important;
}

html.mm-basic nav.mm-basic > .mm-panel > .mm-list {
  margin: 0;
  padding: 0;
}

/* Has search */
html.mm-basic nav.mm-basic.mm-hassearch > .mm-search {
  height: 50px;
  top: 60px;
  border-bottom: 1px solid #242a37;
}

html.mm-basic nav.mm-basic.mm-hassearch > .mm-header {
  top: 0;
}

html.mm-basic nav.mm-basic.mm-hassearch > .mm-panel {
  padding-top: 110px !important;
}

html.mm-basic nav.mm-basic.mm-hassearch li.mm-noresults {
  padding: 40px 0;
  color: #c4ccda;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}

/* Mmenu search form block */
html.mm-basic nav.mm-basic .search-form {
  margin-bottom: 0;
}

html.mm-basic nav.mm-basic .search-form .container-inline div,
html.mm-basic nav.mm-basic .search-form .container-inline label {
  display: block;
}

html.mm-basic nav.mm-basic .search-form .form-item {
  margin: 0 0 10px 0;
  padding: 0;
}

html.mm-basic nav.mm-basic .search-form label {
  margin-bottom: 10px;
}

html.mm-basic nav.mm-basic .search-form .form-text {
  padding: 5px 0;
  width: 100%;
  border: none;
}
html.mm-basic nav.mm-basic .search-form .form-submit {
  margin: 0;
}

File

classes/mm-basic/css/mm-basic.css
View source 
  1. /* Mmenu transition */

  2. html.mm-basic .mm-page,

  3. html.mm-basic #mm-blocker,

  4. html.mm-basic .mm-fixed-top,

  5. html.mm-basic .mm-fixed-bottom,

  6. html.mm-basic .mm-menu.mm-horizontal > .mm-panel {

  7.   -webkit-transition: none 0.2s linear;

  8.   -moz-transition: none 0.2s linear;

  9.   -ms-transition: none 0.2s linear;

  10.   -o-transition: none 0.2s linear;

  11.   transition: none 0.2s linear;

  12.   -webkit-transition-property: top, right, bottom, left, border;

  13.   -moz-transition-property: top, right, bottom, left, border;

  14.   -ms-transition-property: top, right, bottom, left, border;

  15.   -o-transition-property: top, right, bottom, left, border;

  16.   transition-property: top, right, bottom, left, border;

  17. }

  18. 

  19. /* Blocker */

  20. html.mm-basic #mm-blocker {

  21.   background: #000;

  22.   opacity: 0.6 !important;

  23.   filter:alpha(opacity=60) !important; /* For IE8 and earlier */

  24. }

  25. 

  26. /* Body */

  27. html.mm-basic .mm-page {

  28.   box-shadow: none;

  29. }

  30. 

  31. /* Mmenu nav */

  32. html.mm-basic nav.mm-basic {

  33.   background: #32394a;

  34.   color: #c4ccda;

  35.   text-shadow: 0 1px 0 rgba(0, 0, 0, .6);

  36.   font-family: Helvetica, sans-serif;

  37. }

  38. 

  39. html.mm-basic nav.mm-basic {

  40.   font-size: 18px;

  41. }

  42. 

  43. html.mm-basic nav.mm-basic a {

  44.   font-size: 1.25em;

  45. }

  46. 

  47. html.mm-basic nav.mm-basic > .mm-header {

  48.   border-color: #242a37;

  49.   color: #c4ccda;

  50.   height: 60px;

  51.   line-height: 60px;

  52.   padding: 0;

  53.   background: #434b5c; /* Old browsers */

  54.   background: -moz-linear-gradient(top,  #434b5c 0%, #394152 100%); /* FF3.6+ */

  55.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#434b5c), color-stop(100%,#394152)); /* Chrome,Safari4+ */

  56.   background: -webkit-linear-gradient(top,  #434b5c 0%,#394152 100%); /* Chrome10+,Safari5.1+ */

  57.   background: -o-linear-gradient(top,  #434b5c 0%,#394152 100%); /* Opera 11.10+ */

  58.   background: -ms-linear-gradient(top,  #434b5c 0%,#394152 100%); /* IE10+ */

  59.   background: linear-gradient(to bottom,  #434b5c 0%,#394152 100%); /* W3C */

  60.   filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#434b5c', endColorstr='#394152',GradientType=0 )"; /* IE6-9 */

  61. }

  62. 

  63. html.mm-basic nav.mm-basic > .mm-header .mm-title {

  64.   font-size: 1.5em;

  65.   padding: 0 10%;

  66.   width: 80%;

  67.   text-align: center;

  68. }

  69. 

  70. html.mm-basic nav.mm-basic > .mm-header .mm-prev:before,

  71. html.mm-basic nav.mm-basic > .mm-header .mm-next:before {

  72.   z-index: 10;

  73.   border-color: #c4ccda;

  74.   margin-bottom: -5px;

  75.   width: 10px;

  76.   height: 10px;

  77. }

  78. 

  79. html.mm-basic nav.mm-basic > .mm-panel {

  80.   padding: 60px 0;

  81. }

  82. 

  83. html.mm-basic nav.mm-basic .mm-list > li {

  84.   border-top: 1px solid #404857;

  85.   border-bottom: 1px solid #242a37;

  86. }

  87. 

  88. html.mm-basic nav.mm-basic .mm-list > li > span {

  89.   padding: 15px 20px;

  90. }

  91. 

  92. /* Mmenu list icons */

  93. html.mm-basic nav.mm-basic .mm-list > li > a,

  94. html.mm-basic nav.mm-basic .mm-list > li > span {

  95.   white-space: normal;

  96. }

  97. 

  98. html.mm-basic nav.mm-basic span.mmenu-list.mmenu-block-collapsed,

  99. html.mm-basic nav.mm-basic a.mmenu-list {

  100.   display: block;

  101. }

  102. 

  103. html.mm-basic nav.mm-basic li {

  104.   display: table;

  105.   width: 100%;

  106. }

  107. 

  108. html.mm-basic nav.mm-basic .mmenu-list-icon,

  109. html.mm-basic nav.mm-basic span.mmenu-list.mmenu-block-collapsed .mmenu-list-title,

  110. html.mm-basic nav.mm-basic a.mmenu-list .mmenu-list-title {

  111.   display: table-cell;

  112.   vertical-align: middle;

  113.   white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */

  114.   white-space: -pre-wrap;      /* Opera 4-6 */

  115.   white-space: -o-pre-wrap;    /* Opera 7 */

  116.   white-space: pre-wrap;       /* css-3 */

  117.   word-wrap: break-word;       /* Internet Explorer 5.5+ */

  118.   word-break: break-all;

  119.   white-space: normal;

  120. }

  121. 

  122. 

  123. html.mm-basic nav.mm-basic .mm-list > li:not(.mmenu-wrap) a:not(.mm-subopen):not(.mm-subclose):not(.mm-fullsubopen) {

  124.   padding: 15px 20px;

  125. }

  126. 

  127. html.mm-basic nav.mm-basic .mm-list > li.mm-selected > a,

  128. html.mm-basic nav.mm-basic .mm-list > li.mm-selected > span {

  129.   background: rgba(0, 0, 0, 0.1);

  130. }

  131. 

  132. html.mm-basic nav.mm-basic .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-noresults)::after {

  133.   border: none !important;

  134. }

  135. 

  136. html.mm-basic nav.mm-basic em.mm-counter {

  137.   color: #c4ccda;

  138.   font-size: 1.25em;

  139. }

  140. 

  141. html.mm-basic nav.mm-basic em.mm-counter + a.mm-subopen + a,

  142. html.mm-basic nav.mm-basic em.mm-counter + a.mm-subopen + span {

  143.   margin-right: 80px;

  144. }

  145. 

  146. html.mm-basic nav.mm-basic em.mm-counter + a.mm-subopen {

  147.   padding-left: 80px;

  148. }

  149. 

  150. html.mm-basic nav.mm-basic a.mm-subopen:before,

  151. html.mm-basic nav.mm-basic a.mm-fullsubopen:before,

  152. html.mm-basic nav.mm-basic a.mm-subclose:before {

  153.   border-left-color: rgba(0, 0, 0, 0.25);

  154.   border-left-width: 0px;

  155.   border-left-style: solid;

  156. }

  157. 

  158. html.mm-basic nav.mm-basic a.mm-subopen:after,

  159. html.mm-basic nav.mm-basic a.mm-fullsubopen:after,

  160. html.mm-basic nav.mm-basic a.mm-subclose:after {

  161.   border-color: #c4ccda;

  162.   width: 8px;

  163.   height: 8px;

  164.   right: 20px;

  165. }

  166. 

  167. html.mm-basic nav.mm-basic .mmenu-block-collapsed {

  168.   padding: 15px 20px !important;

  169.   font-size: 1.25em;

  170. }

  171. 

  172. html.mm-basic nav.mm-basic .mmenu-block-expanded {

  173.   background: #434b5c; /* Old browsers */

  174.   background: -moz-linear-gradient(top,  #434b5c 0%, #394152 100%); /* FF3.6+ */

  175.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#434b5c), color-stop(100%,#394152)); /* Chrome,Safari4+ */

  176.   background: -webkit-linear-gradient(top,  #434b5c 0%,#394152 100%); /* Chrome10+,Safari5.1+ */

  177.   background: -o-linear-gradient(top,  #434b5c 0%,#394152 100%); /* Opera 11.10+ */

  178.   background: -ms-linear-gradient(top,  #434b5c 0%,#394152 100%); /* IE10+ */

  179.   background: linear-gradient(to bottom,  #434b5c 0%,#394152 100%); /* W3C */

  180.   filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#434b5c', endColorstr='#394152',GradientType=0 )"; /* IE6-9 */

  181.   padding: 5px 10px 5px 20px !important;

  182. }

  183. 

  184. html.mm-basic nav.mm-basic > .mm-panel > .mm-list {

  185.   margin: 0;

  186.   padding: 0;

  187. }

  188. 

  189. /* Has search */

  190. html.mm-basic nav.mm-basic.mm-hassearch > .mm-search {

  191.   height: 50px;

  192.   top: 60px;

  193.   border-bottom: 1px solid #242a37;

  194. }

  195. 

  196. html.mm-basic nav.mm-basic.mm-hassearch > .mm-header {

  197.   top: 0;

  198. }

  199. 

  200. html.mm-basic nav.mm-basic.mm-hassearch > .mm-panel {

  201.   padding-top: 110px !important;

  202. }

  203. 

  204. html.mm-basic nav.mm-basic.mm-hassearch li.mm-noresults {

  205.   padding: 40px 0;

  206.   color: #c4ccda;

  207.   text-shadow: 0 1px 0 rgba(0, 0, 0, .6);

  208. }

  209. 

  210. /* Mmenu search form block */

  211. html.mm-basic nav.mm-basic .search-form {

  212.   margin-bottom: 0;

  213. }

  214. 

  215. html.mm-basic nav.mm-basic .search-form .container-inline div,

  216. html.mm-basic nav.mm-basic .search-form .container-inline label {

  217.   display: block;

  218. }

  219. 

  220. html.mm-basic nav.mm-basic .search-form .form-item {

  221.   margin: 0 0 10px 0;

  222.   padding: 0;

  223. }

  224. 

  225. html.mm-basic nav.mm-basic .search-form label {

  226.   margin-bottom: 10px;

  227. }

  228. 

  229. html.mm-basic nav.mm-basic .search-form .form-text {

  230.   padding: 5px 0;

  231.   width: 100%;

  232.   border: none;

  233. }

  234. html.mm-basic nav.mm-basic .search-form .form-submit {

  235.   margin: 0;

  236. }