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
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?
HTML-Quellcode
- .awesomemenu, .awesomemenu ul {
- list-style: none;
- padding: 0;
- margin: 0;
- }
- .awesomemenu {
- height: 30%px;
- }
- .awesomemenu li {
- background-attachment: fixed;
- background:#fff;
- background-image: url("../img/bg02.png");
- min-width: 10%;
- }
- .awesomemenu > li {
- display: block;
- float: left;
- position: relative;
- }
- .awesomemenu > li:first-child {
- border-radius: 5px 0 0;
- }
- .awesomemenu a {
- border-left: 3px solid rgba(0, 0, 0, 0);
- color: #00A8EE;
- display: block;
- font-size: 15px;
- padding: 0 25px;
- text-decoration: none;
- text-transform: uppercase;
- }
- .awesomemenu li:hover {
- background-color: #EEEEEE;
- background: -moz-linear-gradient(#EEEEEE, #EFEFEF);
- background: -ms-linear-gradient(#EEEEEE, #EFEFEF);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEEEEE), color-stop(100%, #EFEFEF));
- background: -webkit-linear-gradient(#EEEEEE, #EFEFEF);
- background: -o-linear-gradient(#EEEEEE, #EFEFEF);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#EFEFEF');
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#EFEFEF')";
- background: linear-gradient(#EEEEEE, #EFEFEF);
- border-bottom: 2px solid #FFFFFF;
- border-top: 2px solid #EFEFEF;
- }
- .awesomemenu li:hover > a {
- border-radius: 5px 0 0 0;
- border-left: 3px solid #00A8EE;
- color: #222222;
- }
- /* subawesomemenu styles */
- .subawesomemenu {
- left: 0;
- max-height: 0;
- position: absolute;
- top: 100%;
- z-index: 0;
- -webkit-perspective: 400px;
- -moz-perspective: 400px;
- -ms-perspective: 400px;
- -o-perspective: 400px;
- perspective: 400px;
- }
- .subawesomemenu li {
- opacity: 0;
- -webkit-transform: rotateY(90deg);
- -moz-transform: rotateY(90deg);
- -ms-transform: rotateY(90deg);
- -o-transform: rotateY(90deg);
- transform: rotateY(90deg);
- -webkit-transition: opacity .4s, -webkit-transform .5s;
- -moz-transition: opacity .4s, -moz-transform .5s;
- -ms-transition: opacity .4s, -ms-transform .5s;
- -o-transition: opacity .4s, -o-transform .5s;
- transition: opacity .4s, transform .5s;
- }
- .awesomemenu .subawesomemenu li:hover a {
- border-radius: 0 0 5px 0;
- border-left: 3px solid #00A8EE;
- color: #222222;
- }
- .awesomemenu > li:hover .subawesomemenu, .awesomemenu > li:focus .subawesomemenu {
- max-height: 2000px;
- z-index: 10;
- }
- .awesomemenu > li:hover .subawesomemenu li, .awesomemenu > li:focus .subawesomemenu li {
- opacity: 1;
- -webkit-transform: none;
- -moz-transform: none;
- -ms-transform: none;
- -o-transform: none;
- transform: none;
- }
- /* CSS3 delays for transition effects */
- .awesomemenu li:hover .subawesomemenu li:nth-child(1) {
- -webkit-transition-delay: 0s;
- -moz-transition-delay: 0s;
- -ms-transition-delay: 0s;
- -o-transition-delay: 0s;
- transition-delay: 0s;
- }
- .awesomemenu li:hover .subawesomemenu li:nth-child(2) {
- -webkit-transition-delay: 50ms;
- -moz-transition-delay: 50ms;
- -ms-transition-delay: 50ms;
- -o-transition-delay: 50ms;
- transition-delay: 50ms;
- }
- .awesomemenu li:hover .subawesomemenu li:nth-child(3) {
- -webkit-transition-delay: 100ms;
- -moz-transition-delay: 100ms;
- -ms-transition-delay: 100ms;
- -o-transition-delay: 100ms;
- transition-delay: 100ms;
- }
- .awesomemenu li:hover .subawesomemenu li:nth-child(4) {
- -webkit-transition-delay: 150ms;
- -moz-transition-delay: 150ms;
- -ms-transition-delay: 150ms;
- -o-transition-delay: 150ms;
- transition-delay: 150ms;
- }
- .awesomemenu li:hover .subawesomemenu li:nth-child(5) {
- -webkit-transition-delay: 200ms;
- -moz-transition-delay: 200ms;
- -ms-transition-delay: 200ms;
- -o-transition-delay: 200ms;
- transition-delay: 200ms;
- }
- .awesomemenu li:hover .subawesomemenu li:nth-child(6) {
- -webkit-transition-delay: 250ms;
- -moz-transition-delay: 250ms;
- -ms-transition-delay: 250ms;
- -o-transition-delay: 250ms;
- transition-delay: 250ms;
- }
- .awesomemenu li:hover .subawesomemenu li:nth-child(7) {
- -webkit-transition-delay: 300ms;
- -moz-transition-delay: 300ms;
- -ms-transition-delay: 300ms;
- -o-transition-delay: 300ms;
- transition-delay: 300ms;
- }
- .awesomemenu li:hover .subawesomemenu li:nth-child(8) {
- -webkit-transition-delay: 350ms;
- -moz-transition-delay: 350ms;
- -ms-transition-delay: 350ms;
- -o-transition-delay: 350ms;
- transition-delay: 350ms;
- }
- .subawesomemenu li:nth-child(1) {
- -webkit-transition-delay: 350ms;
- -moz-transition-delay: 350ms;
- -ms-transition-delay: 350ms;
- -o-transition-delay: 350ms;
- transition-delay: 350ms;
- }
- .subawesomemenu li:nth-child(2) {
- -webkit-transition-delay: 300ms;
- -moz-transition-delay: 300ms;
- -ms-transition-delay: 300ms;
- -o-transition-delay: 300ms;
- transition-delay: 300ms;
- }
- .subawesomemenu li:nth-child(3) {
- -webkit-transition-delay: 250ms;
- -moz-transition-delay: 250ms;
- -ms-transition-delay: 250ms;
- -o-transition-delay: 250ms;
- transition-delay: 250ms;
- }
- .subawesomemenu li:nth-child(4) {
- -webkit-transition-delay: 200ms;
- -moz-transition-delay: 200ms;
- -ms-transition-delay: 200ms;
- -o-transition-delay: 200ms;
- transition-delay: 200ms;
- }
- .subawesomemenu li:nth-child(5) {
- -webkit-transition-delay: 150ms;
- -moz-transition-delay: 150ms;
- -ms-transition-delay: 150ms;
- -o-transition-delay: 150ms;
- transition-delay: 150ms;
- }
- .subawesomemenu li:nth-child(6) {
- -webkit-transition-delay: 100ms;
- -moz-transition-delay: 100ms;
- -ms-transition-delay: 100ms;
- -o-transition-delay: 100ms;
- transition-delay: 100ms;
- }
- .subawesomemenu li:nth-child(7) {
- -webkit-transition-delay: 50ms;
- -moz-transition-delay: 50ms;
- -ms-transition-delay: 50ms;
- -o-transition-delay: 50ms;
- transition-delay: 50ms;
- }
- .subawesomemenu li:nth-child(8) {
- -webkit-transition-delay: 0s;
- -moz-transition-delay: 0s;
- -ms-transition-delay: 0s;
- -o-transition-delay: 0s;
- transition-delay: 0s;
- }