You are here

mobile_navigation.css in Mobile Navigation 7.2

Same filename and directory in other branches
  1. 8 mobile_navigation.css
  2. 7 mobile_navigation.css
#mobile-navigation-menus {
  float: left;
  width: 100%;
}

.mobile-menu-inner {
  float: left;
  z-index: 9999;
  width: 100%;
}

.mobile-menu {
  background-color: #FFFFFF;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 10000;
}

.mobile-menu li {
  border-bottom: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  clear: both;
  list-style: none outside none;
  margin: 0;
  overflow: hidden;
}

.mobile-menu > li:first-child {
  border-top: 1px solid #cccccc;
}

.mobile-menu li.item-with-ul {
  border-bottom: medium none;
}

.mobile-menu li.item-with-ul > *:first-child {
  background-image: url("images/right-arrow.png");
  background-position: 92% center;
  background-repeat: no-repeat;
  border-bottom: 1px solid #cccccc;
  float: left;
  margin: 0;
  width: 100%;
}

.mobile-menu li ul {
  clear: both;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.mobile-menu li > a {
  float: left;
  padding: 4px 5%;
  width: 90%;
}

.mobile-menu > li.item-with-ul > * > a {
  border-right: 1px solid #cccccc;
  float: left;
  padding: 5px 7% 5px 5%;
  width: 68%;
}

.mobile-menu li ul li.item-with-ul > * > a {
  border-right: 1px solid #cccccc;
  float: left;
  padding: 5px 7% 5px 9%;
  width: 65%;
}

.mobile-menu.mobile-menu-slide li ul li.item-with-ul > * > a {
  border-right: 1px solid #cccccc;
  float: left;
  padding: 5px 7% 5px 7%;
  width: 65%;
  z-index: 99;
}

.mobile-menu li ul li ul li.item-with-ul > * > a {
  border-right: 1px solid #cccccc;
  float: left;
  padding: 5px 7% 5px 11%;
  width: 65%;
}

.mobile-menu li ul li ul li ul li.item-with-ul > * > a {
  border-right: 1px solid #cccccc;
  float: left;
  padding: 5px 7% 5px 20%;
  width: 58%;
}

.mobile-menu li ul li ul li ul li ul li.item-with-ul > * > a {
  border-right: 1px solid #cccccc;
  float: left;
  padding: 5px 7% 5px 15%;
  width: 65%;
}

.mobile-menu li ul li ul li ul li ul li ul li.item-with-ul > * > a {
  border-right: 1px solid #cccccc;
  float: left;
  padding: 5px 7% 5px 17%;
  width: 63%;
}

.mobile-menu li ul li ul li ul li ul li ul li ul li.item-with-ul > * > a {
  border-right: 1px solid #cccccc;
  float: left;
  padding: 5px 7% 5px 19%;
  width: 61%;
}

.mobile-menu li ul li ul li ul li ul li ul li ul li ul li.item-with-ul > * > a {
  border-right: 1px solid #cccccc;
  float: left;
  padding: 5px 7% 5px 21%;
  width: 59%;
}

.mobile-menu li ul li a {
  padding-left: 9%;
  width: 87%;
}

.mobile-menu li ul li ul li a {
  padding-left: 11%;
  width: 84%;
}

.mobile-menu li ul li ul li ul li a {
  padding-left: 13%;
  width: 82%;
}

.mobile-menu li ul li ul li ul li ul li a {
  padding-left: 20%;
  width: 80%;
}

.mobile-menu li ul li ul li ul li ul li ul li a {
  padding-left: 17%;
  width: 78%;
}

.mobile-menu li ul li ul li ul li ul li ul li ul li a {
  padding-left: 19%;
  width: 76%;
}

.mobile-menu li ul li ul li ul li ul li ul li ul li ul li a {
  padding-left: 21%;
  width: 74%;
}

.mobile-menu li ul li ul li ul li ul li ul li ul li ul li ul li a {
  padding-left: 23%;
  width: 72%;
}

.slide-menu-clip .mobile-menu .return-link {
  background-image: url("images/left-arrow.png");
  background-position: 10% center;
  background-repeat: no-repeat;
  float: left;
  padding-left: 10%;
}

.slide-menu-clip .mobile-menu .return-link {
  border-bottom: 1px solid #cccccc;
}

.slide-menu-clip .mobile-menu .return-link a {
  border-left: 1px solid #cccccc;
  float: left;
  margin-left: 10%;
}

.mobile-menu li.item-with-ul li {
  background-image: none;
}

/** 
 * Menu clip
 */
#slide-menu-clip {
  background-color: #ffffff;
}

.mobile-navigation-button-container {
  height: 45px;
}

.mobile-navigation-button {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 5px 5px 5px 5px;
  cursor: pointer;
  font-weight: bold;
  margin: 0 10px;
  padding: 5px 10px;
}

.menu-tab-handler {
  background-color: #ffffff;
  color: #333333;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 5px 5px 10px;
  position: absolute;
}

.menu-tab-handler.right {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  font-weight: bold;
  right: -85px;
  top: 10px;
  width: 70px;
}

.menu-tab-handler.left {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  font-weight: bold;
  left: -87px;
  top: 10px;
  width: 70px;
}

.menu-tab-handler.bottom {
  border: 1px solid #CCCCCC;
  border-radius: 0 0 10px 10px;
  bottom: -34px;
  color: #333333;
  font-weight: bold;
  left: 15px;
  padding: 5px 9px 8px 7px;
  z-index: 99;
}

.menu-tab-handler.top {
  border: 1px solid #CCCCCC;
  border-radius: 10px 10px 0 0;
  bottom: -34px;
  color: #333333;
  font-weight: bold;
  left: 20px;
  top: -30px;
  padding: 5px 9px 8px 7px;
  z-index: 99;
}

/* Positioning menu */
.mobile-menu-outer-wrapper.effect-modal_top {
  position: fixed;
  top: 0;	
  z-index: 1000;
}
.mobile-menu-outer-wrapper.effect-modal_left {
  position: fixed;
  left: 0;
  top: 0;	
  z-index: 1000;
}
.mobile-menu-outer-wrapper.effect-modal_right {
  position: fixed;
  right: 0;
  top: 0;	
  z-index: 1000;
}
.mobile-menu-outer-wrapper.effect-modal_bottom {
  position: fixed;
  left: 0;
  bottom: 0;	
  z-index: 1000;
}
.mobile-menu-outer-wrapper.effect-drawer_top {
  position: relative;
  float:left;	
}
.mobile-menu-outer-wrapper.effect-drawer_left {
  position: absolute;
  
}
.mobile-menu-outer-wrapper.effect-drawer_right {
  position: absolute;
}

/**
 * Mask
 */
.mobile-navigation-mask {
  background-color: #333333;
  bottom: 0;
  display: none;
  filter: alpha(opacity=40);
  left: 0;
  position: fixed;
  opacity: 0.4;
  right: 0;
  top: 0;
  z-index: 999;
}
/*
#mobile-menu-wrapper {
  z-index: 9999;
}
*/

File

mobile_navigation.css
View source
  1. #mobile-navigation-menus {
  2. float: left;
  3. width: 100%;
  4. }
  5. .mobile-menu-inner {
  6. float: left;
  7. z-index: 9999;
  8. width: 100%;
  9. }
  10. .mobile-menu {
  11. background-color: #FFFFFF;
  12. float: left;
  13. margin: 0;
  14. padding: 0;
  15. position: relative;
  16. width: 100%;
  17. z-index: 10000;
  18. }
  19. .mobile-menu li {
  20. border-bottom: 1px solid #cccccc;
  21. border-left: 1px solid #cccccc;
  22. border-right: 1px solid #cccccc;
  23. clear: both;
  24. list-style: none outside none;
  25. margin: 0;
  26. overflow: hidden;
  27. }
  28. .mobile-menu > li:first-child {
  29. border-top: 1px solid #cccccc;
  30. }
  31. .mobile-menu li.item-with-ul {
  32. border-bottom: medium none;
  33. }
  34. .mobile-menu li.item-with-ul > *:first-child {
  35. background-image: url("images/right-arrow.png");
  36. background-position: 92% center;
  37. background-repeat: no-repeat;
  38. border-bottom: 1px solid #cccccc;
  39. float: left;
  40. margin: 0;
  41. width: 100%;
  42. }
  43. .mobile-menu li ul {
  44. clear: both;
  45. overflow: hidden;
  46. margin: 0;
  47. padding: 0;
  48. }
  49. .mobile-menu li > a {
  50. float: left;
  51. padding: 4px 5%;
  52. width: 90%;
  53. }
  54. .mobile-menu > li.item-with-ul > * > a {
  55. border-right: 1px solid #cccccc;
  56. float: left;
  57. padding: 5px 7% 5px 5%;
  58. width: 68%;
  59. }
  60. .mobile-menu li ul li.item-with-ul > * > a {
  61. border-right: 1px solid #cccccc;
  62. float: left;
  63. padding: 5px 7% 5px 9%;
  64. width: 65%;
  65. }
  66. .mobile-menu.mobile-menu-slide li ul li.item-with-ul > * > a {
  67. border-right: 1px solid #cccccc;
  68. float: left;
  69. padding: 5px 7% 5px 7%;
  70. width: 65%;
  71. z-index: 99;
  72. }
  73. .mobile-menu li ul li ul li.item-with-ul > * > a {
  74. border-right: 1px solid #cccccc;
  75. float: left;
  76. padding: 5px 7% 5px 11%;
  77. width: 65%;
  78. }
  79. .mobile-menu li ul li ul li ul li.item-with-ul > * > a {
  80. border-right: 1px solid #cccccc;
  81. float: left;
  82. padding: 5px 7% 5px 20%;
  83. width: 58%;
  84. }
  85. .mobile-menu li ul li ul li ul li ul li.item-with-ul > * > a {
  86. border-right: 1px solid #cccccc;
  87. float: left;
  88. padding: 5px 7% 5px 15%;
  89. width: 65%;
  90. }
  91. .mobile-menu li ul li ul li ul li ul li ul li.item-with-ul > * > a {
  92. border-right: 1px solid #cccccc;
  93. float: left;
  94. padding: 5px 7% 5px 17%;
  95. width: 63%;
  96. }
  97. .mobile-menu li ul li ul li ul li ul li ul li ul li.item-with-ul > * > a {
  98. border-right: 1px solid #cccccc;
  99. float: left;
  100. padding: 5px 7% 5px 19%;
  101. width: 61%;
  102. }
  103. .mobile-menu li ul li ul li ul li ul li ul li ul li ul li.item-with-ul > * > a {
  104. border-right: 1px solid #cccccc;
  105. float: left;
  106. padding: 5px 7% 5px 21%;
  107. width: 59%;
  108. }
  109. .mobile-menu li ul li a {
  110. padding-left: 9%;
  111. width: 87%;
  112. }
  113. .mobile-menu li ul li ul li a {
  114. padding-left: 11%;
  115. width: 84%;
  116. }
  117. .mobile-menu li ul li ul li ul li a {
  118. padding-left: 13%;
  119. width: 82%;
  120. }
  121. .mobile-menu li ul li ul li ul li ul li a {
  122. padding-left: 20%;
  123. width: 80%;
  124. }
  125. .mobile-menu li ul li ul li ul li ul li ul li a {
  126. padding-left: 17%;
  127. width: 78%;
  128. }
  129. .mobile-menu li ul li ul li ul li ul li ul li ul li a {
  130. padding-left: 19%;
  131. width: 76%;
  132. }
  133. .mobile-menu li ul li ul li ul li ul li ul li ul li ul li a {
  134. padding-left: 21%;
  135. width: 74%;
  136. }
  137. .mobile-menu li ul li ul li ul li ul li ul li ul li ul li ul li a {
  138. padding-left: 23%;
  139. width: 72%;
  140. }
  141. .slide-menu-clip .mobile-menu .return-link {
  142. background-image: url("images/left-arrow.png");
  143. background-position: 10% center;
  144. background-repeat: no-repeat;
  145. float: left;
  146. padding-left: 10%;
  147. }
  148. .slide-menu-clip .mobile-menu .return-link {
  149. border-bottom: 1px solid #cccccc;
  150. }
  151. .slide-menu-clip .mobile-menu .return-link a {
  152. border-left: 1px solid #cccccc;
  153. float: left;
  154. margin-left: 10%;
  155. }
  156. .mobile-menu li.item-with-ul li {
  157. background-image: none;
  158. }
  159. /**
  160. * Menu clip
  161. */
  162. #slide-menu-clip {
  163. background-color: #ffffff;
  164. }
  165. .mobile-navigation-button-container {
  166. height: 45px;
  167. }
  168. .mobile-navigation-button {
  169. background-color: #ffffff;
  170. border: 1px solid #cccccc;
  171. border-radius: 5px 5px 5px 5px;
  172. cursor: pointer;
  173. font-weight: bold;
  174. margin: 0 10px;
  175. padding: 5px 10px;
  176. }
  177. .menu-tab-handler {
  178. background-color: #ffffff;
  179. color: #333333;
  180. cursor: pointer;
  181. font-weight: bold;
  182. padding: 5px 5px 5px 10px;
  183. position: absolute;
  184. }
  185. .menu-tab-handler.right {
  186. background-color: #ffffff;
  187. border: 1px solid #cccccc;
  188. font-weight: bold;
  189. right: -85px;
  190. top: 10px;
  191. width: 70px;
  192. }
  193. .menu-tab-handler.left {
  194. background-color: #ffffff;
  195. border: 1px solid #cccccc;
  196. font-weight: bold;
  197. left: -87px;
  198. top: 10px;
  199. width: 70px;
  200. }
  201. .menu-tab-handler.bottom {
  202. border: 1px solid #CCCCCC;
  203. border-radius: 0 0 10px 10px;
  204. bottom: -34px;
  205. color: #333333;
  206. font-weight: bold;
  207. left: 15px;
  208. padding: 5px 9px 8px 7px;
  209. z-index: 99;
  210. }
  211. .menu-tab-handler.top {
  212. border: 1px solid #CCCCCC;
  213. border-radius: 10px 10px 0 0;
  214. bottom: -34px;
  215. color: #333333;
  216. font-weight: bold;
  217. left: 20px;
  218. top: -30px;
  219. padding: 5px 9px 8px 7px;
  220. z-index: 99;
  221. }
  222. /* Positioning menu */
  223. .mobile-menu-outer-wrapper.effect-modal_top {
  224. position: fixed;
  225. top: 0;
  226. z-index: 1000;
  227. }
  228. .mobile-menu-outer-wrapper.effect-modal_left {
  229. position: fixed;
  230. left: 0;
  231. top: 0;
  232. z-index: 1000;
  233. }
  234. .mobile-menu-outer-wrapper.effect-modal_right {
  235. position: fixed;
  236. right: 0;
  237. top: 0;
  238. z-index: 1000;
  239. }
  240. .mobile-menu-outer-wrapper.effect-modal_bottom {
  241. position: fixed;
  242. left: 0;
  243. bottom: 0;
  244. z-index: 1000;
  245. }
  246. .mobile-menu-outer-wrapper.effect-drawer_top {
  247. position: relative;
  248. float:left;
  249. }
  250. .mobile-menu-outer-wrapper.effect-drawer_left {
  251. position: absolute;
  252. }
  253. .mobile-menu-outer-wrapper.effect-drawer_right {
  254. position: absolute;
  255. }
  256. /**
  257. * Mask
  258. */
  259. .mobile-navigation-mask {
  260. background-color: #333333;
  261. bottom: 0;
  262. display: none;
  263. filter: alpha(opacity=40);
  264. left: 0;
  265. position: fixed;
  266. opacity: 0.4;
  267. right: 0;
  268. top: 0;
  269. z-index: 999;
  270. }
  271. /*
  272. #mobile-menu-wrapper {
  273. z-index: 9999;
  274. }
  275. */