|
|||
smartphone Menü Aufklappen: Probem mit FF/Chrome
Ich programmiere gerade ein Smartphone Menü wie hier:
Portfolio | Webdesign, WordPress & Social Media in Berlin | kulturbanause Zieht man das Fenster auf 360 Pixel zusammen und Klick auf dem Menü-Button scrollen die Smartphone Links von oben ein. Bei meinem Versuch funktioniert es nur auf den Explorer Beim Firefox/Chrome spring das Menü ohne zu scrollen auf, aber Scrollt dann richtig zu. Das Haupt div wird mit display:none versteckt, über eine js-Funktion wird display:block und height:220px gesetzt, schon sollte es von oben nach unten ein scrollen.(z.z nur auf ie) Firefox und Chrome stoßen sich an: display:block Setz ich in der js einroll Funktion hinter display:block ein Alert geht es. document.getElementById("mobil_menue").style.displ ay="block" alert (1) # nur warten document.getElementById("mobil_menue").style.heigh t="250px"; document.getElementById("mobil_menue").style.opaci ty="1"; ich habe es auch schon ohne display:none aber mit height:0 versucht, leider werden dann immer noch 10 Pixel platz verbraucht Vielleicht ist mein Ansatz auch falsch, ich wollte es nur ohne jQuery programmieren. HTML-Code:
<input type=button value='Menü' onclick='mobil_menue_on' > <div id='mobil_menue' > <div class='mobil_spalte' ><a href='' class='navi_mobil'>Home</a> </div> <div class='mobil_spalte' ><a href='l1' class='navi_mobil'>Seite1</a></div> <div class='mobil_spalte' ><a href='2' class='navi_mobil'>Seite2</a></div> </div> #mobil_menue { -webkit-transition: all 0.4s ease-in-out 0.0s; -moz-transition: all 0.4s ease-in-out 0.0s; -o-transition: all 0.4s ease-in-out 0.0s; -ms-transition: all 0.4s ease-in-out 0.0s; transition: all 0.4s ease-in-out 0.0s; display:none; opacity:0; height:0px; margin-bottom:22px; } .mobil_spalte{ padding-top:12px; color:#aaa; background:#111; height:30px; text-align:center; border-bottom:1px solid #333; } <script> function mobil_menue_on(){ a=document.getElementById("mobil_menue").style.height; if (a=="250px"){ document.getElementById("mobil_menue").style.height="0px"; document.getElementById("mobil_menue").style.opacity="0"; document.getElementById("mobil_menue").addEventListener("transitionend", animationEnd); } else{ /*Einrollen*/ document.getElementById("mobil_menue").style.display="block" document.getElementById("mobil_menue").style.height="250px"; document.getElementById("mobil_menue").style.opacity="1"; } } function animationEnd(){ a=document.getElementById("mobil_menue").style.height; if (a=="0px"){ document.getElementById("mobil_menue").style.display="none" # Menü wieder zu, dann verstecken, sonst bleiben 10 Pixel } } </script> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
vertikale Menü mit Aufklappen | zero one | CSS | 0 | 08.06.2012 19:11 |
Vertikales Menü, zum Aufklappen | schraege | CSS | 1 | 05.05.2012 20:45 |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
CSS Menü links aufklappen lassen | Sash | CSS | 1 | 29.03.2009 23:16 |
Menü zum aufklappen | lara | Javascript & Ajax | 1 | 26.08.2006 19:34 |