zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden smartphone Menü Aufklappen: Probem mit FF/Chrome

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.06.2015, 14:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:47 Uhr.