Navigation für mobilansicht umschreiben

  • CSS

    Navigation für mobilansicht umschreiben

    Guten Tag Zusammen

    Ich versuche gerade aus einem Snippet einer Navigation mit sehr vielen Animationsfeatures in CSS eine mobile Version zu schreiben nur will das irgendwie nicht wirklich. Kann mir jemand sagen wie ich das am besten hinkriege mit einem Button zum öffnen der Nav und dem korrekten anzeigen der Unternavigationen?
    Spoiler anzeigen

    HTML-Quellcode

    1. .awesomemenu, .awesomemenu ul {
    2. list-style: none;
    3. padding: 0;
    4. margin: 0;
    5. }
    6. .awesomemenu {
    7. height: 30%px;
    8. }
    9. .awesomemenu li {
    11. background-attachment: fixed;
    12. background:#fff;
    13. background-image: url("../img/bg02.png");
    14. min-width: 10%;
    17. }
    18. .awesomemenu > li {
    19. display: block;
    20. float: left;
    21. position: relative;
    22. }
    23. .awesomemenu > li:first-child {
    24. border-radius: 5px 0 0;
    25. }
    26. .awesomemenu a {
    27. border-left: 3px solid rgba(0, 0, 0, 0);
    28. color: #00A8EE;
    29. display: block;
    30. font-size: 15px;
    31. padding: 0 25px;
    32. text-decoration: none;
    33. text-transform: uppercase;
    34. }
    35. .awesomemenu li:hover {
    36. background-color: #EEEEEE;
    37. background: -moz-linear-gradient(#EEEEEE, #EFEFEF);
    38. background: -ms-linear-gradient(#EEEEEE, #EFEFEF);
    39. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEEEEE), color-stop(100%, #EFEFEF));
    40. background: -webkit-linear-gradient(#EEEEEE, #EFEFEF);
    41. background: -o-linear-gradient(#EEEEEE, #EFEFEF);
    42. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#EFEFEF');
    43. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#EFEFEF')";
    44. background: linear-gradient(#EEEEEE, #EFEFEF);
    46. border-bottom: 2px solid #FFFFFF;
    47. border-top: 2px solid #EFEFEF;
    48. }
    49. .awesomemenu li:hover > a {
    50. border-radius: 5px 0 0 0;
    51. border-left: 3px solid #00A8EE;
    52. color: #222222;
    53. }
    54. /* subawesomemenu styles */
    55. .subawesomemenu {
    56. left: 0;
    57. max-height: 0;
    58. position: absolute;
    59. top: 100%;
    60. z-index: 0;
    62. -webkit-perspective: 400px;
    63. -moz-perspective: 400px;
    64. -ms-perspective: 400px;
    65. -o-perspective: 400px;
    66. perspective: 400px;
    67. }
    68. .subawesomemenu li {
    69. opacity: 0;
    71. -webkit-transform: rotateY(90deg);
    72. -moz-transform: rotateY(90deg);
    73. -ms-transform: rotateY(90deg);
    74. -o-transform: rotateY(90deg);
    75. transform: rotateY(90deg);
    77. -webkit-transition: opacity .4s, -webkit-transform .5s;
    78. -moz-transition: opacity .4s, -moz-transform .5s;
    79. -ms-transition: opacity .4s, -ms-transform .5s;
    80. -o-transition: opacity .4s, -o-transform .5s;
    81. transition: opacity .4s, transform .5s;
    82. }
    83. .awesomemenu .subawesomemenu li:hover a {
    84. border-radius: 0 0 5px 0;
    85. border-left: 3px solid #00A8EE;
    86. color: #222222;
    87. }
    88. .awesomemenu > li:hover .subawesomemenu, .awesomemenu > li:focus .subawesomemenu {
    89. max-height: 2000px;
    90. z-index: 10;
    91. }
    92. .awesomemenu > li:hover .subawesomemenu li, .awesomemenu > li:focus .subawesomemenu li {
    93. opacity: 1;
    95. -webkit-transform: none;
    96. -moz-transform: none;
    97. -ms-transform: none;
    98. -o-transform: none;
    99. transform: none;
    100. }
    101. /* CSS3 delays for transition effects */
    102. .awesomemenu li:hover .subawesomemenu li:nth-child(1) {
    103. -webkit-transition-delay: 0s;
    104. -moz-transition-delay: 0s;
    105. -ms-transition-delay: 0s;
    106. -o-transition-delay: 0s;
    107. transition-delay: 0s;
    108. }
    109. .awesomemenu li:hover .subawesomemenu li:nth-child(2) {
    110. -webkit-transition-delay: 50ms;
    111. -moz-transition-delay: 50ms;
    112. -ms-transition-delay: 50ms;
    113. -o-transition-delay: 50ms;
    114. transition-delay: 50ms;
    115. }
    116. .awesomemenu li:hover .subawesomemenu li:nth-child(3) {
    117. -webkit-transition-delay: 100ms;
    118. -moz-transition-delay: 100ms;
    119. -ms-transition-delay: 100ms;
    120. -o-transition-delay: 100ms;
    121. transition-delay: 100ms;
    122. }
    123. .awesomemenu li:hover .subawesomemenu li:nth-child(4) {
    124. -webkit-transition-delay: 150ms;
    125. -moz-transition-delay: 150ms;
    126. -ms-transition-delay: 150ms;
    127. -o-transition-delay: 150ms;
    128. transition-delay: 150ms;
    129. }
    130. .awesomemenu li:hover .subawesomemenu li:nth-child(5) {
    131. -webkit-transition-delay: 200ms;
    132. -moz-transition-delay: 200ms;
    133. -ms-transition-delay: 200ms;
    134. -o-transition-delay: 200ms;
    135. transition-delay: 200ms;
    136. }
    137. .awesomemenu li:hover .subawesomemenu li:nth-child(6) {
    138. -webkit-transition-delay: 250ms;
    139. -moz-transition-delay: 250ms;
    140. -ms-transition-delay: 250ms;
    141. -o-transition-delay: 250ms;
    142. transition-delay: 250ms;
    143. }
    144. .awesomemenu li:hover .subawesomemenu li:nth-child(7) {
    145. -webkit-transition-delay: 300ms;
    146. -moz-transition-delay: 300ms;
    147. -ms-transition-delay: 300ms;
    148. -o-transition-delay: 300ms;
    149. transition-delay: 300ms;
    150. }
    151. .awesomemenu li:hover .subawesomemenu li:nth-child(8) {
    152. -webkit-transition-delay: 350ms;
    153. -moz-transition-delay: 350ms;
    154. -ms-transition-delay: 350ms;
    155. -o-transition-delay: 350ms;
    156. transition-delay: 350ms;
    157. }
    159. .subawesomemenu li:nth-child(1) {
    160. -webkit-transition-delay: 350ms;
    161. -moz-transition-delay: 350ms;
    162. -ms-transition-delay: 350ms;
    163. -o-transition-delay: 350ms;
    164. transition-delay: 350ms;
    165. }
    166. .subawesomemenu li:nth-child(2) {
    167. -webkit-transition-delay: 300ms;
    168. -moz-transition-delay: 300ms;
    169. -ms-transition-delay: 300ms;
    170. -o-transition-delay: 300ms;
    171. transition-delay: 300ms;
    172. }
    173. .subawesomemenu li:nth-child(3) {
    174. -webkit-transition-delay: 250ms;
    175. -moz-transition-delay: 250ms;
    176. -ms-transition-delay: 250ms;
    177. -o-transition-delay: 250ms;
    178. transition-delay: 250ms;
    179. }
    180. .subawesomemenu li:nth-child(4) {
    181. -webkit-transition-delay: 200ms;
    182. -moz-transition-delay: 200ms;
    183. -ms-transition-delay: 200ms;
    184. -o-transition-delay: 200ms;
    185. transition-delay: 200ms;
    186. }
    187. .subawesomemenu li:nth-child(5) {
    188. -webkit-transition-delay: 150ms;
    189. -moz-transition-delay: 150ms;
    190. -ms-transition-delay: 150ms;
    191. -o-transition-delay: 150ms;
    192. transition-delay: 150ms;
    193. }
    194. .subawesomemenu li:nth-child(6) {
    195. -webkit-transition-delay: 100ms;
    196. -moz-transition-delay: 100ms;
    197. -ms-transition-delay: 100ms;
    198. -o-transition-delay: 100ms;
    199. transition-delay: 100ms;
    200. }
    201. .subawesomemenu li:nth-child(7) {
    202. -webkit-transition-delay: 50ms;
    203. -moz-transition-delay: 50ms;
    204. -ms-transition-delay: 50ms;
    205. -o-transition-delay: 50ms;
    206. transition-delay: 50ms;
    207. }
    208. .subawesomemenu li:nth-child(8) {
    209. -webkit-transition-delay: 0s;
    210. -moz-transition-delay: 0s;
    211. -ms-transition-delay: 0s;
    212. -o-transition-delay: 0s;
    213. transition-delay: 0s;
    214. }
    Metal-Schweiz wurde nun offiziell veröffentlich nach all den Jahren :)

Facebook
Telefonspende