[ERLEDIGT] CSS Dropdown Menü funktioniert nicht auf Smartphone

bravestar76 · 8 Februar 2013

Hallo zusammen!

Hätte da mal eine Frage an euch..
Ich habe in CSS eine horizontale Dropdown Menüleiste erstellt, die auf dem Monitor ganz normal hovert.

Wenn ich die Seite auf dem Iphone lade, kann ich leider nur den obersten Navigationspunkt betätigen, man sieht nur kurz die Aufklappnavi und danach wird die Seite des dementsprechenden Menüpunktes geöffnet. D.h. es gibt keinen hover-Effekt, die Navi klappt nicht auf, so dass man aus den Unterpunkten wählen kann.

Weiss da jemand vielleicht Rat? Hab in ein paar Foren mitbekommen, dass man den hover Befehl durch einen mouseover Befehl ersetzen soll. Kann das sein und wenn ja wie?

Wäre euch echt dankbar wenn ihr mir helfen könnt.

HIer das Navi CSS:

Code:

[COLOR=#333333][FONT=Lucida Grande]@charset "utf-8";[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]/* MAIN NAVIGATION SECTION */[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]/* Weisse Hauptleiste */ [/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]div#mainNavigation {[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]background: transparent url('../-img/navi_main_bg_kachel_tp.png') repeat-x left top;[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]width: 951px;[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]height: 49px;[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]position: absolute;[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]margin:0px;[/FONT][/COLOR]


[COLOR=#333333][FONT=Lucida Grande]/* border-top: 1px solid #fff; */[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]}[/FONT][/COLOR]


[COLOR=#333333][FONT=Lucida Grande]/* MAIN NAVIGATION, 1st Level */[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]div#mainNavigation ul {[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]/* background: transparent url('../-img/navi_main_bg_kachel_tp.png') repeat-x left top; */[/FONT][/COLOR]


[COLOR=#333333][FONT=Lucida Grande]z-index: 100;[/FONT][/COLOR]


[COLOR=#333333][FONT=Lucida Grande]}[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]#mainNavigation {[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]position:relative[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]width: 800px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]margin: 40px auto;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]}[/FONT][/COLOR]



[COLOR=#333333][FONT=Lucida Grande]#mainNavigation h7 {[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]font-size: 16px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]color: #fff;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]padding: 20px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]margin: 0;[/FONT][/COLOR]



[COLOR=#333333][FONT=Lucida Grande]line-height: 10px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]}[/FONT][/COLOR]



[COLOR=#333333][FONT=Lucida Grande]#mainNavigation ul {[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]position: absolute;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]margin: 0 auto;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]list-style: none;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]}[/FONT][/COLOR]



[COLOR=#333333][FONT=Lucida Grande]#mainNavigation ul li {[/FONT][/COLOR]



[COLOR=#333333][FONT=Lucida Grande]float: left;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]margin: 0 0 0 33px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]font-size: 19px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]font-family: 'Dorid Serif', serif;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]line-height: 50px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]}[/FONT][/COLOR]



[COLOR=#333333][FONT=Lucida Grande]#mainNavigation ul li a {[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]color: #333333;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]text-decoration: none; [/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]-webkit-transition: all .2s ease-in-out;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]-moz-transition: all .2s ease-in-out;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]-o-transition: all .2s ease-in-out;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]-ms-transition: all .2s ease-in-out;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]transition: all .2s ease-in-out;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]}[/FONT][/COLOR]



[COLOR=#333333][FONT=Lucida Grande]#mainNavigation ul li a:hover {[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]color: #ac1315;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]}[/FONT][/COLOR]



[COLOR=#333333][FONT=Lucida Grande]#mainNavigation ul li img {[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]float: left;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]width: 16px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]height: 16px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]margin: 14px 5px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]padding: 6px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]background: #062e57;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]-webkit-border-radius: 25px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]-moz-border-radius: 25px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]border-radius: 25px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]-webkit-transition: all .2s ease-in-out;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]-moz-transition: all .2s ease-in-out;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]-o-transition: all .2s ease-in-out;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]-ms-transition: all .2s ease-in-out;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]transition: all .2s ease-in-out;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]}[/FONT][/COLOR]



[COLOR=#333333][FONT=Lucida Grande]#mainNavigation ul li:hover img {[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]background: #000;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]}[/FONT][/COLOR]



[COLOR=#333333][FONT=Lucida Grande]#mainNavigation ul ul {[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]position: absolute;[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]top: -9999px;[/FONT][/COLOR]

[COLOR=#333333][FONT=Lucida Grande]background: #006faa;[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]font-size:12px;[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]color:#000000;[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]font-family:Arial;[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]font-style:normal;[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]text-decoration: none;[/FONT][/COLOR]
[COLOR=#333333][FONT=Lucida Grande]}[/FONT][/COLOR]

Ich bin lange kein Profi und habe mir alles zusammen gesucht. Ich hoffe, ihr habt Tipps für mich. Danke!

Nach oben

threadi · 8 Februar 2013

Womit klappst Du denn das Untermenü auf? Mit einem (nicht in deinem Code hier vorhandenen) JavaScript?

bravestar76 · 9 Februar 2013

Oh ja, hab das HTML vergessen..

HIer also noch das HTML Dropdown Menü:

HTML:

  <div id="navigationSection">    					<div id="navigationBody">    						<!-- Main Navigation -->    						<div id="mainNavigation">        						<ul>        						    <li class=""><a href="index_e.html" target="_self">Home</a></li>        				            <li class=""><a href="office/index_e.html" target="_self">Office</a>        				                <ul>        				                    <li class=""><a href="office/index_e.html" target="_self">Office</a></li>                                                       				                <li class=""><a href="1_e.html" target="_self">Assistants:<br>BSP</a></li>            				                <li class=""><a href="2_e.html" target="_self">BSP</a></li>            				                <li class=""><a href="3_e.html" target="_self">BSP</a></li>            				                <li class=""><a href="4h_e.html" target="_self">BSP</a></li>            				                <!--             				                <li class=""><a href="#" target="_self">3. Ebene...</a>            				                    <ul>            				                        <li class=""><a href="#" target="_self">Dritte 1</a></li>            				                        <li class=""><a href="#" target="_self">Dritte 2</a></li>            				                        <li class=""><a href="#" target="_self">Dritte 3</a></li>            				                    </ul>            				                </li>            				                -->            				            </ul>            				        </li>        				            <li class=""><a href="services/index_e.html" target="_self">Services</a>        				            <li class=""><a href="practise_areas/index_e.html" target="_self">Practise areas</a>        				                <ul>                                                				                    <li class=""><a href="5.html" target="_self">BSP</a></li>            				                <li class=""><a href="6.html" target="_self">BSP</a></li>            				                <li class=""><a href="practise_areas.html" target="_self">Corporate &amp; Commerce</a></li>            				                <li class=""><a href="7.html" target="_self">BSP</a></li>				
											<li class=""><a href="8.html" target="_self">BSP</a></li>											<li class=""><a href="9.html" target="_self"> BSP</a></li>											<li class=""><a href="10.html" target="_self">BSP</a></li>
										        				                </ul>        				            </li>        				            <li class=""><a href="11_e.html" target="_self">BSP</a>        				                <ul>        				                    <li class=""><a href="12_e.html" target="_self">BSP</a></li>            				                <li class=""><a href="13_e.html" target="_self">BSP</a></li>            				                <li class=""><a href="14_e.html" target="_self">Co-operation partner:<br>BSP</a></li>        				                </ul>        				            <li class=""><a href="15_e.html" target="_self">BSP</a>        				            <li class=""><a href="16_e.html" target="_self">BSP</a>        						</ul>    						</div>    						<!-- /Main Navigation -->    					</div>		</div>

threadi · 9 Februar 2013

Das beantwortet nicht meine letzte Frage. Momentan sehe ich nicht auf welchem Weg Du das Menü aufklappst. Im CSS steht es ja nicht, also muss da noch ein JavaScript sein.

Zudem sehe ich in deinem CSS noch einen Fehler:

Code:

[COLOR=#333333][FONT=Lucida Grande]#mainNavigation h7[/FONT][/COLOR]

Ein Element h7 gibt es in keiner HTML-Version.

bravestar76 · 9 Februar 2013

Das oben stehende CSS ist eigentlich die Aufklappnavi, oder ich versteh grad nix mehr. Java Script habe ich gar nicht benutzt.

Habe den CSS Code aus einem Tutorial.

Hier das Original:

Code:

#menu {	width: 800px;
	margin: 50px auto;
}


#menu h3 {
	font-size: 16px;
	color: #fff;
	padding: 10px;
	margin: 0;
	background: #000;
	line-height: 20px;
}


#menu ul {
	position: absolute;
	margin: 0 auto;
	list-style: none;
}


#menu ul li {
	float: left;
	margin: 0 0 0 20px;
	font-size: 20px;
	font-family: 'Bree Serif', serif;
	line-height: 50px;
}


#menu ul li a {
	color: #000;
	text-decoration: none;	
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}


#menu ul li a:hover {
	color: #999;
}


#menu ul li img {
	float: left;
	width: 16px;
	height: 16px;
	margin: 14px 5px;
	padding: 6px;
	background: #999;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}


#menu ul li:hover img {
	background: #000;
}


#menu ul ul {
	position: absolute;
	top: -9999px;
	background: #fff;
	padding: 0;
	margin: 0 0 0 -5px;
	-webkit-box-shadow: 0 10px 20px #888;
	-moz-box-shadow: 0 10px 20px #888;
	box-shadow: 0 10px 20px #888;
}


#menu ul ul:before {
	position: absolute;
	content:"";
	width: 10px;
	height: 10px;
	top: -5px;
	left: 20px;
	background: #000;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}


#menu ul li:hover ul {
	top: 55px;
}


#menu ul ul li {
	float: none;
	font-size: 16px;
	padding: 5px 10px;
	text-align: left;
	text-transform: uppercase;
	margin: 0;
	border-bottom: 1px solid #ddd;
	line-height: 20px;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}


#menu ul ul a {
	color: #333;
	text-decoration: none;
}


#menu ul ul li.all {
	font-size: 12px;
	border-bottom: none;
	text-transform: none;
}


#menu ul ul li:hover {
	background: #333;
	color: #fff;
}

bravestar76 · 9 Februar 2013

mit

#mainNavigation h7

hab ich einfach die menü schrift ausgezeichnet..
schlägst du grad die hände über deinen kopf? :-D

threadi · 9 Februar 2013

Wieso zeigst Du nicht gleich den ganzen Quellcode? Das hier

Code:

#menu ul li:hover ul {

ist das entscheidende. Darüber gibst Du dem Aufklappmenü eine absolute Positionierung. Nach meiner Erfahrung wirkt bei mobilen Geräten eher die Verwendung von display: none -> display: block um etwas aufzuklappen. Allerdings könnte auch ein Grund sein, dass der Bereich den man an mobilen Geräten antippt auf diesen "Klick" reagiert, weshalb das Aufklappmenü nicht zu sehen sein wird. Evtl. solltest Du das Anklicken hier weglassen (HTML -> Link entfernen, nur Text stehen lassen) um den Effekt doch noch zu erreichen.

Das h7-Element von dir solltest Du schleunigst durch ein valides Element ersetzen.

bravestar76 · 9 Februar 2013

Habe jetzt mal im HTML den Link entfernt

HTML:

<li class=""> <a  target="_self"  >Menu1</a>

Hat leider nicht geklappt; im IPhone klappt jetzt das Menü nicht mehr auf..

Sähe die Sache mit dem display Befehl dann so in etwa aus?
Kenne mich mit dem Befehl leider nicht so aus.

Code:

#mainMenuul li:hover ul {display:block; 
	top: 49px;


}

Wie meinst du das mit dem Austausch des h7 Elements in ein valides Element?
Ich dachte mit h7 gebe ich die Fontart an, die ich im CSS formatiert habe..

P.S. Vielen Dank für deine Mühen und entschuldige mein Unwissen, bin erst seit einem Monat bei der CSS/HTML Sache dabei..

bravestar76 · 10 Februar 2013

Aaaahhh!!

Es hat jetzt tatsächlich mit dem display:none; und dem display:block; funktioniert!

Eine schwere Geburt..

Vielen vielen Dank für deine Hilfe!

[ERLEDIGT] CSS Dropdown Menü funktioniert nicht auf Smartphone

bravestar76

Neues Mitglied

threadi

Moderator

bravestar76

Neues Mitglied

threadi

Moderator

bravestar76

Neues Mitglied

bravestar76

Neues Mitglied

threadi

Moderator

bravestar76

Neues Mitglied

bravestar76

Neues Mitglied

Neueste Beiträge