# CSS Dropdownmenü touchfähig machen.



## aquidan (16. März 2014)

Hallo,
ich nin neu hier und erhoffe mir eine Lösung zu meinem Problem.

Zuerst muss ich dagen, dass ich absolut keine Ahnung von HTML, oder irgendeiner Art von Programmierung habe!
Ich habe zwar schon mehrere Internetseiten über die Jahre erstellt, aber immer mit Hilfe von Vorlagen die ich meinen Bedürfnissen angepasst habe.
Ich möchte nun eine von diesen Seiten ein wenig aufpeppen. Dazu benutze ich Expression Web 4.
Es geht mir hauptsächlich darum, dass ich ein Dropdownmenü für meine Seite einbaue.
Ich habe etlich Menüvorlagen hier auf meinem PC, die ich auch nach meinen Vorstellungen angepasst habe. Das Problem ist, dass ich jetzt 4 Tage gebraucht habe um das Menü so hinzubekommen wie ich es haben will, jetzt ist mir aufgefallen, dass auf Geräten mit Touchscreen das Dropdownmenü (Hover) nich funktioniert.
Ich habe über Goggle schon ein paar Lösungsmöglichkeiten bekommen, allerdings sind die alle für Leute mit HTML/CSS-Kentnissen.
Wie gesagt, ich habe von der Materie keine Ahnung. Jedoch probiere ich solange im Code, auf der Designoberfäche und in der CSS-Datei rum, bis es passt. Die Zusammenhänge und die Auswirkungen auf die grafische Darstellung kann ich nur teilweise nachvollziehen. 

Kann mir irgendjemand Schritt für Schritt beschreiben wie ich mein mühsam erstellte Menü so ändere, dass es auch auf Geräten mit Touchscreen funktioniert. Entweder als Hovermenü oder per Oneklick oder so.

Hier ist das Menü zu sehen http://danyskickercup.de/indextest2.html , allerdings stimmen die Links noch nicht alle. Also bitte keine Kritik am Layout o.Ä., es ist noch nicht fertig.

Vielen Dank schonmal für eure Hilfe.

Gruß
Dany


----------



## SpiceLab (16. März 2014)

Auf die Schnelle konnte ich hierzu diese zwei Lösungsansätze aus dem Netz fischen:


iPad - Anywidth dropdown/flyout menu
CSS:



```
/* for iPhone, iPod Touch and iPad */
#menu ul ul {display:none;}
#menu ul li:hover > ul {display:block;}
#menu li.sub:hover ~ li.close {display:block;}
```


Drop-Down Navigation: Responsive and Touch-Friendly
JS (jQuery):



```
/*
	By Osvaldas Valutis, www.osvaldas.info
	Available for use under the MIT License
*/


;(function( $, window, document, undefined )
{
	$.fn.doubleTapToGo = function( params )
	{
		if( !( 'ontouchstart' in window ) &&
			!navigator.msMaxTouchPoints &&
			!navigator.userAgent.toLowerCase().match( /windows phone os 7/i ) ) return false;

		this.each( function()
		{
			var curItem = false;

			$( this ).on( 'click', function( e )
			{
				var item = $( this );
				if( item[ 0 ] != curItem[ 0 ] )
				{
					e.preventDefault();
					curItem = item;
				}
			});

			$( document ).on( 'click touchstart MSPointerDown', function( e )
			{
				var resetItem = true,
					parents	  = $( e.target ).parents();

				for( var i = 0; i < parents.length; i++ )
					if( parents[ i ] == curItem[ 0 ] )
						resetItem = false;

				if( resetItem )
					curItem = false;
			});
		});
		return this;
	};
})( jQuery, window, document );
```


```
$( '#nav li:has(ul)' ).doubleTapToGo();
```


----------



## aquidan (16. März 2014)

aquidan hat gesagt.:


> Ich habe über Goggle schon ein paar Lösungsmöglichkeiten bekommen, allerdings sind die alle für Leute mit HTML/CSS-Kentnissen.
> Wie gesagt, ich habe von der Materie keine Ahnung. Jedoch probiere ich solange im Code, auf der Designoberfäche und in der CSS-Datei rum, bis es passt. Die Zusammenhänge und die Auswirkungen auf die grafische Darstellung kann ich nur teilweise nachvollziehen.
> Dany



Ja das habe natürlich auch bereits gefunden. Es nützt mir aber nix. Ich will mein bestehendes Menü dahingehend ändern, ohne ein neues Menü zu erstellen.
Das was dort beschrieben wird,könnte genauso auf kyrillisch sein, ich verstehe gar nix. Ich brauche eine Schritt für Schritt Anleitung.

Trotzdem Danke


----------



## SpiceLab (16. März 2014)

Von einem neuen Menü war meinerseits nie die Rede, sondern die Code-Snippets in dein existierendes zu portieren 

Hier die Schritt-für-Schritt-Anleitung zum zweitgenannten Beispiel:


 Ergänzung im Markup deines Listenmenüs:


```
<div id="navWrapper">
    <ul id="nav" ...>
    ...
    </ul>
</div>
```

 Ergänzung in deinem HTML-Code zum Einbinden des JS-Codes im Anschluß an das Menü:


```
<script src="main.js" type="text/javascript"></script>
<script src="doubletaptogo.js" type="text/javascript"></script>
<script type="text/javascript">
	$( function()
	{
		$( '#navWrapper li:has(ul)' ).doubleTapToGo();
	});
</script>
```

Fertig.
Die beiden eingebundenen *.js-Dateien des anhänglichen Demos findest du hier und hier.


----------



## aquidan (16. März 2014)

Hallo,
danke.
Ich verstehe echt nix. Ich hatte bereits beschrieben, das ich kein Hintergrundwissen habe. Ich bin reiner Autodidakt, deshalb kann ich auch nix mit solchen Begriffen wie "Markup"oder "Listenmenü" anfangen.
Wo muss ich was eingeben und wie?
Tut mir echt leid, dass du dich mit so einem GAU abgeben musst.

Danke


----------



## SpiceLab (16. März 2014)

Hm, meinen gezeigten Quellcode wirst du doch "markieren, kopieren & einfügen" können?

Mehr ist es doch nicht.

Hier mal die ergänzte Fassung deines Codes:


```
<head>
<meta content="Private Infoseite für Kickerfreunde" name="description">
<meta content="kickern,tischfußball,tischkicker,dkc,danyskickercup,lets kick it,kickern tischfußball tischkicker dkc danyskickercup lets kick it" name="keywords">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

<style type="text/css">
.auto-style1 {
	background-color: #000000;
}
.auto-style2 {
	color: #000000;
}
.style3 {
	background-color: #000000;
}
.style1 {
	text-align: left;
}
.style2 {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: x-small;
}
a {
	color: #C0C0C0;
}
a:visited {
	color: #C0C0C0;
}
a:active {
	color: #FFFF00;
}
a:hover {
	color: #FFFF00;
}
.auto-style4 {
	font-size: x-small;
}
.auto-style5 {
	text-align: center;
}
.auto-style6 {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: x-small;
	text-align: left;
}
.auto-style7 {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: x-small;
	text-align: right;
}
</style>
<title>DKC - Danys Kicker Cup</title>
</head>

<body style="color: #C0C0C0; background-color: #FFFF00">

<table align="center" class="auto-style1" style="width: 950">
	<tr>
		<td style="height: 23px; width: 944px;">
    <div id="navWrapper">
    <ul id="nav" style="font-size: small; background: #FFFF00; font: medium serif; height: 50px" class="auto-style4">
        <li style="left: 0px; top: 0px"><a href="index.html">
		<span class="auto-style2">Home</span></a></li>
        <li style="left: 0px; top: 0px; height: 36px"><a href="#">
		<span class="auto-style2">FUN-Cup</span></a>
            <ul>
                <li><a href="funcupinfos.html">Infos</a></li>
                <li><a href="funcuptermine.html">Termine</a></li>
                <li><a href="funcupteilnehmer.html">Teilnehmer</a></li>
                <li><a href="funcupergebnisse.html">Ergebnisse</a></li>
                <li><a href="funcupberichte.html">Berichte</a></li>
            </ul>
        </li>
        <li><a href="#">
		<span class="auto-style2">MIXED-Cup</span></a>
            <ul>
                <li><a href="mixedcupinfos.html">Infos</a></li>
                <li><a href="mixedcuptermine.html">Termine</a></li>
                <li><a href="mixedcupteilnehmer.html">Teilnehmer</a></li>
                <li><a href="mixedcupergebnisse.html">Ergebnisse</a></li>
                <li><a href="mixedcupberichte.html">Berichte</a></li>
        </ul>
        </li>
        <li style="left: 0px; top: 0px; height: 36px"><a href="#">
		<span class="auto-style2">PRO-Cup</span></a>
            <ul>
                <li><a href="procupinfos.html">Infos</a></li>
                <li><a href="procuptermine.html">Termine</a></li>
                <li><a href="procupteilnehmer.html">Teilnehmer</a></li>
                <li><a href="procupergebnisse.html">Ergebnisse</a></li>
                <li><a href="procupberichte.html">Berichte</a></li>
            </ul>
        </li>
<li><a href="#">
		<span class="auto-style2">MASTER-Cup</span></a>
            <ul>
                <li><a href="mastercupinfos.html">Infos</a></li>
                <li><a href="mastercuptermine.html">Termine</a></li>
                <li><a href="mastercupteilnehmer.html">Teilnehmer</a></li>
                <li><a href="mastercupergebnisse.html">Ergebnisse</a></li>
                <li><a href="mastercupberichte.html">Berichte</a></li>
            </ul>
        </li>
<li><a href="#">Tribüne</a>
            <ul>
                <li><a href="#">Fakten</a>
                    <ul>
                        <li><a href="kickern.html">Kickern?</a></li>
                        <li><a href="regeln.html">Regeln</a></li>
                        <li><a href="meinetische.html">Meine Tische</a></li>
                        <li><a href="ranglisten.html">Ranglisten</a></li>
                        <li><a href="champions.html">Champions</a></li>
                        <li><a href="halloffame.html">Hall of Fame</a></li>
                    </ul>
                </li>
                <li><a href="#">Medien</a>
                    <ul>
                        <li><a href="fotos.html">Fotos</a></li>
                        <li><a href="videos.html">Videos</a></li>
                        <li><a href="songs.html">Kickersongs</a></li>
                        <li><a href="http://www.gaestebuchking.de/cgi-bin/host/firebook.cgi?account=31593" target="_blank">Gästebuch</a></li>
                    </ul>
                </li>
            </ul>
        </li>

<li><a href="#">
		<span class="auto-style2">Über</span></a>
            <ul>
                <li><a href="impressum.html">Impressum</a></li>
                <li><a href="mailto:kontakt@danyskickercup.de">Kontakt</a></li>
        </ul>
        </li>

    </ul> </div>
		<br>

<table align="center" cellspacing="1" style="width: 940px; height: 113px" class="style3">
	<tr>
		<td>
		<img alt="" height="100" src="grafik/wappengelb.png" width="100" /></td>
		<td class="auto-style5">
		<img alt="" height="100" src="grafik/schriftzug.png" width="660" />&nbsp;</td>
		<td class="style1">
		<img alt="" height="100" src="grafik/wappengelb.png" width="100" /></td>
	</tr>
</table>

		<div class="auto-style5">
		<table cellspacing="1" style="width: 346px; height: 81px">
			<tr>
				<td class="auto-style7" style="width: 69px">15.03.2014&nbsp;</td>
				<td class="style2">Neues Seitendesign online</td>
			</tr>
			<tr>
				<td class="style2" style="width: 69px">&nbsp;</td>
				<td class="style2">&nbsp;</td>
			</tr>
			<tr>
				<td class="style2" style="width: 69px">&nbsp;</td>
				<td class="style2">&nbsp;</td>
			</tr>
			<tr>
				<td class="style2" style="width: 69px">&nbsp;</td>
				<td class="style2">&nbsp;</td>
			</tr>
			<tr>
				<td class="style2" style="width: 69px">&nbsp;</td>
				<td class="auto-style6">&nbsp;</td>
			</tr>
		</table>
			<div class="auto-style5">
				Text<br>Text<br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Sitemap:<br>
			<a href="index.html">Home</a> - FUN-Cup: <a href="funcupinfos.html">
			Infos</a> - <a href="funcuptermine.html">Termine</a> -
			<a href="funcupteilnehmer.html">Teilnehmerlisten</a> -
			<a href="funcupergebnisse.html">Ergebnisse</a> -
			<a href="funcupberichte.html">Berichte</a> - MIXED-Cup:
			<a href="mixedcupinfos.html">Infos</a> -
			<a href="mastercuptermine.html">Termine</a> -
			<a href="mixedcupteilnehmer.html">Teilnehmerlisten</a> -
			<a href="mixedcupergebnisse.html">Ergebnisse</a> -
			<a href="mixedcupberichte.html">Berichte</a> - PRO-Cup:
			<a href="procupinfos.html">Infos</a> - <a href="procuptermine.html">
			Termine</a> - <a href="procupteilnehmer.html">Teilnehmerlisten</a> -
			<a href="procupergebnisse.html">Ergebnisse</a> -
			<a href="procupberichte.html">Berichte</a> - MASTER-Cup:
			<a href="mastercupinfos.html">Infos</a> -
			<a href="mastercuptermine.html">Termine</a> -
			<a href="mastercupteilnehmer.html">Teilnehmerlisten</a> -
			<a href="mastercupergebnisse.html">Ergebnisse</a> -
			<a href="mastercupberichte.html">Berichte</a> - Fakten:
				<a href="kickern.html">
			Kickern?</a> - <a href="regeln.html">Regeln</a> -
			<a href="meinetische.html">Meine Tische</a> -
			<a href="ranglisten.html">Ranglisten</a> - <a href="champions.html">
			Champions</a> - <a href="halloffame.html">Hall of Fame</a> - Medien:
			<a href="fotos.html">Fotos</a> - <a href="videos.html">Videos</a> -
			<a href="songs.html">Kickersongs</a> -
			<a href="http://www.gaestebuchking.de/cgi-bin/host/firebook.cgi?account=31593" target="_blank">
			Gästebuch</a> - <a href="impressum.html">Impressum</a> - <a href="mailto:kontakt@danyskickercup.de">Kontakt</a> 
			<br></div>
		</div>
		</td>
	</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>

<script src="main.js" type="text/javascript"></script>
<script src="doubletaptogo.js" type="text/javascript"></script>
<script type="text/javascript">
	$( function()
	{
		$( '#navWrapper li:has(ul)' ).doubleTapToGo();
	});
</script>
```


----------



## aquidan (16. März 2014)

Hallo,
sobald ich die Codes einfüge, geht die grafische Dartstellung des Menüs verloren. Ich sehe nur noch eine Liste von Textlinks.
Bin echt ratlos.


----------



## SpiceLab (16. März 2014)

Kopier mal meine zuletzt gezeigte Code-Version. Hiermit kann ich keine Fehldarstellung registrieren.


----------



## aquidan (16. März 2014)

Ich konnte es irgendwie einzeln einfügen. Wenn ich den gesamten Code ersetze, ist der Fhler wie oben beschrieben da.
Kann aber irgendwie keine Veränderung feststellen.

<div id="navWrapper">

muss ich das vor jedem Menüpunkt einfügen, oder nur einmal am Anfang so wie in deinem Code?

Was genau bewirkt das Ganze denn?


----------



## SpiceLab (16. März 2014)

Sorry, in meiner lokalen Testumgebung hatte ich vorhin das Unterverzeichnis "css" aus dem Code entfernt, und vergessen, es zum Veröffentlichen wieder einzusetzen.

Das <div>-Element wird, wie eben gezeigt, ausschließlich vor dem ersten <ul>-Element mit der ID "nav" eingefügt, und mit dem </div>-Tag an dessen Ende </ul> geschlossen.

Über dieses Element, respektive seinem ID-Bezeichner "navWrapper", wird das Menü mit dem JavaScript-Code angesprochen und gesteuert.


----------



## aquidan (16. März 2014)

spicelab hat gesagt.:


> Sorry, in meiner lokalen Testumgebung hatte ich vorhin das Unterverzeichnis "css" aus dem Code entfernt, und vergessen, es zum Veröffentlichen wieder einzusetzen.
> .



Was heißt das nun für michß Muss ich da noch irgendwas machen?

Ich habe jetzt soweit alles nach deinen Vorgaben geändert. Die Seite wird auch korrekt angezeigt und funktioniert problemlos, nur eben immernoch nicht auf mobilen Geräten, keine Touchscreenunterstützung.

Hier der Code den ich jetzt  eingebaut habe

```
<head>
<meta content="Private Infoseite für Kickerfreunde" name="description">
<meta content="kickern,tischfußball,tischkicker,dkc,danyskickercup,lets kick it,kickern tischfußball tischkicker dkc danyskickercup lets kick it" name="keywords">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

<style type="text/css">
.auto-style1 {
	background-color: #000000;
}
.auto-style2 {
	color: #000000;
}
.style3 {
	background-color: #000000;
}
.style1 {
	text-align: left;
}
.style2 {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: x-small;
}
a {
	color: #C0C0C0;
}
a:visited {
	color: #C0C0C0;
}
a:active {
	color: #FFFF00;
}
a:hover {
	color: #FFFF00;
}
.auto-style4 {
	font-size: x-small;
}
.auto-style5 {
	text-align: center;
}
.auto-style6 {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: x-small;
	text-align: left;
}
.auto-style7 {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: x-small;
	text-align: right;
}
</style>
<title>DKC - Danys Kicker Cup</title>
</head>

<body style="color: #C0C0C0; background-color: #FFFF00">

<table align="center" class="auto-style1" style="width: 950">
	<tr>
		<td style="height: 23px; width: 944px;">
		<div id="navWrapper">
    <ul id="nav" style="font-size: small; background: #FFFF00; font: medium serif; height: 50px" class="auto-style4">
        <li style="left: 0px; top: 0px"><a href="index.html">
		<span class="auto-style2">Home</span></a></li>
        <li style="left: 0px; top: 0px; height: 36px"><a href="#">
		<span class="auto-style2">FUN-Cup</span></a>
            <ul>
                <li><a href="funcupinfos.html">Infos</a></li>
                <li><a href="funcuptermine.html">Termine</a></li>
                <li><a href="funcupteilnehmer.html">Teilnehmer</a></li>
                <li><a href="funcupergebnisse.html">Ergebnisse</a></li>
                <li><a href="funcupberichte.html">Berichte</a></li>
            </ul>
        </li>
        <li><a href="#">
		<span class="auto-style2">MIXED-Cup</span></a>
            <ul>
                <li><a href="mixedcupinfos.html">Infos</a></li>
                <li><a href="mixedcuptermine.html">Termine</a></li>
                <li><a href="mixedcupteilnehmer.html">Teilnehmer</a></li>
                <li><a href="mixedcupergebnisse.html">Ergebnisse</a></li>
                <li><a href="mixedcupberichte.html">Berichte</a></li>
        </ul>
        </li>
        <li style="left: 0px; top: 0px; height: 36px"><a href="#">
		<span class="auto-style2">PRO-Cup</span></a>
            <ul>
                <li><a href="procupinfos.html">Infos</a></li>
                <li><a href="procuptermine.html">Termine</a></li>
                <li><a href="procupteilnehmer.html">Teilnehmer</a></li>
                <li><a href="procupergebnisse.html">Ergebnisse</a></li>
                <li><a href="procupberichte.html">Berichte</a></li>
            </ul>
        </li>
<li><a href="#">
		<span class="auto-style2">MASTER-Cup</span></a>
            <ul>
                <li><a href="mastercupinfos.html">Infos</a></li>
                <li><a href="mastercuptermine.html">Termine</a></li>
                <li><a href="mastercupteilnehmer.html">Teilnehmer</a></li>
                <li><a href="mastercupergebnisse.html">Ergebnisse</a></li>
                <li><a href="mastercupberichte.html">Berichte</a></li>
            </ul>
        </li>
<li><a href="#">Tribüne</a>
            <ul>
                <li><a href="#">Fakten</a>
                    <ul>
                        <li><a href="kickern.html">Kickern?</a></li>
                        <li><a href="regeln.html">Regeln</a></li>
                        <li><a href="meinetische.html">Meine Tische</a></li>
                        <li><a href="ranglisten.html">Ranglisten</a></li>
                        <li><a href="champions.html">Champions</a></li>
                        <li><a href="halloffame.html">Hall of Fame</a></li>
                    </ul>
                </li>
                <li><a href="#">Medien</a>
                    <ul>
                        <li><a href="fotos.html">Fotos</a></li>
                        <li><a href="videos.html">Videos</a></li>
                        <li><a href="songs.html">Kickersongs</a></li>
                        <li><a href="http://www.gaestebuchking.de/cgi-bin/host/firebook.cgi?account=31593" target="_blank">Gästebuch</a></li>
                    </ul>
                </li>
            </ul>
        </li>

<li><a href="#">
		<span class="auto-style2">Über</span></a>
            <ul>
                <li><a href="impressum.html">Impressum</a></li>
                <li><a href="mailto:kontakt@danyskickercup.de">Kontakt</a></li>
        </ul>
        </li>

    </ul> </div>
		<br>

<table align="center" cellspacing="1" style="width: 940px; height: 113px" class="style3">
	<tr>
		<td>
		<img alt="" height="100" src="grafik/wappengelb.png" width="100" /></td>
		<td class="auto-style5">
		<img alt="" height="100" src="grafik/schriftzug.png" width="660" />&nbsp;</td>
		<td class="style1">
		<img alt="" height="100" src="grafik/wappengelb.png" width="100" /></td>
	</tr>
</table>

		<div class="auto-style5">
		<table cellspacing="1" style="width: 346px; height: 81px">
			<tr>
				<td class="auto-style7" style="width: 69px">15.03.2014&nbsp;</td>
				<td class="style2">Neues Seitendesign online</td>
			</tr>
			<tr>
				<td class="style2" style="width: 69px">&nbsp;</td>
				<td class="style2">&nbsp;</td>
			</tr>
			<tr>
				<td class="style2" style="width: 69px">&nbsp;</td>
				<td class="style2">&nbsp;</td>
			</tr>
			<tr>
				<td class="style2" style="width: 69px">&nbsp;</td>
				<td class="style2">&nbsp;</td>
			</tr>
			<tr>
				<td class="style2" style="width: 69px">&nbsp;</td>
				<td class="auto-style6">&nbsp;</td>
			</tr>
		</table>
			<div class="auto-style5">
				Text<br>Text<br><br><br><br><br><br><br><br><br><br><br><br>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Sitemap:<br>
			<a href="index.html">Home</a> - FUN-Cup: <a href="funcupinfos.html">
			Infos</a> - <a href="funcuptermine.html">Termine</a> -
			<a href="funcupteilnehmer.html">Teilnehmerlisten</a> -
			<a href="funcupergebnisse.html">Ergebnisse</a> -
			<a href="funcupberichte.html">Berichte</a> - MIXED-Cup:
			<a href="mixedcupinfos.html">Infos</a> -
			<a href="mastercuptermine.html">Termine</a> -
			<a href="mixedcupteilnehmer.html">Teilnehmerlisten</a> -
			<a href="mixedcupergebnisse.html">Ergebnisse</a> -
			<a href="mixedcupberichte.html">Berichte</a> - PRO-Cup:
			<a href="procupinfos.html">Infos</a> - <a href="procuptermine.html">
			Termine</a> - <a href="procupteilnehmer.html">Teilnehmerlisten</a> -
			<a href="procupergebnisse.html">Ergebnisse</a> -
			<a href="procupberichte.html">Berichte</a> - MASTER-Cup:
			<a href="mastercupinfos.html">Infos</a> -
			<a href="mastercuptermine.html">Termine</a> -
			<a href="mastercupteilnehmer.html">Teilnehmerlisten</a> -
			<a href="mastercupergebnisse.html">Ergebnisse</a> -
			<a href="mastercupberichte.html">Berichte</a> - Fakten:
				<a href="kickern.html">
			Kickern?</a> - <a href="regeln.html">Regeln</a> -
			<a href="meinetische.html">Meine Tische</a> -
			<a href="ranglisten.html">Ranglisten</a> - <a href="champions.html">
			Champions</a> - <a href="halloffame.html">Hall of Fame</a> - Medien:
			<a href="fotos.html">Fotos</a> - <a href="videos.html">Videos</a> -
			<a href="songs.html">Kickersongs</a> -
			<a href="http://www.gaestebuchking.de/cgi-bin/host/firebook.cgi?account=31593" target="_blank">
			Gästebuch</a> - <a href="impressum.html">Impressum</a> - <a href="mailto:kontakt@danyskickercup.de">Kontakt</a> 
			<br></div>
		</div>
		</td>
	</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p><script src="main.js" type="text/javascript"></script>
<script src="doubletaptogo.js" type="text/javascript"></script>
<script type="text/javascript">
	$( function()
	{
		$( '#navWrapper li:has(ul)' ).doubleTapToGo();
	});
</script>
```


----------



## SpiceLab (16. März 2014)

Den Code hast du so richtig übernommen. 

Hast du auch die beiden JS-Dateien berücksichtigt, und in deinem Verzeichnis abgelegt?

Um was für mobile Geräte handelt es sich denn hierbei?

Auf meinem Samsung-Smartphone funktioniert's tadellos.


----------



## aquidan (16. März 2014)

Ich habe beide Dateien im Hauptverzeichnis abgelegt, dort wo auch die index.html ist.
Ich habe es auch einem Galaxy S3, S4 und einem Intenso Tablet getestet. Dort klappen die Menüs nicht aus, genauso wie vorher.


----------



## SpiceLab (16. März 2014)

Hm, seltsam... (?!)


----------



## aquidan (16. März 2014)

Was musst du denn auf deinem Samsung machen damit sich das Menü öffnet? Doppelklick?

Poste doch nochmal den Code mit dem es bei dir 100%ig funtioniert, eventuell habe ich irgendwo einen kleinen Fehler drin. Oder hast du meinen Code bereits getestet?


----------



## aquidan (16. März 2014)

Schick mir doch nochmal deinen Code mit dem es auf deinem Samsung 100%ig funktioniert. vielleicht habe ich ja irgendwo einen kleinen Fehler drin.
Oder hast du es schon mit meinem Code getestet?


----------



## SpiceLab (16. März 2014)

Unser beider Codes stimmen überein.

Ich berühre die Hauptmenüpunkte einmal und es öffnet sich deren Untermenü.


----------



## aquidan (16. März 2014)

Hab die index.html mal hochgeladen http://www.danyskickercup.de/index.html
Funktioniert es dort auf deinem Samsung auch?


----------



## SpiceLab (16. März 2014)

Anstandslos


----------



## aquidan (16. März 2014)

Hab jetzt gerade einen Kumpel angerufen. Mit seinem Iphone5 und dem Ipad geht es auch nicht!


----------



## SpiceLab (16. März 2014)

Zitat von der genannten Seite:



> *Final words*
> 
> I have ran quite successful tests on both Mac and Windows versions of the latest (April, 2013) Chrome, Safari, Firefox, Opera releases, also IE9+, iOS 6 / 7, Android 2.2 / 4.2 / 4.4, Windows Phone 7 / 7.5, Opera Mobile


----------



## aquidan (16. März 2014)

Das glaube ich gerne. Jedoch funktioniert es hier bei jetzt schon insgesamt 8 Geräten nicht.

Das bezieht sich jedoch alles auf das Demomenü. Die Codes die du mir geschickt hast weichen doch erheblich von denen des Demomenüs ab.

Also, das Demomenü funktioniert auf allen meinen Geräten und die des Kumpels einwandfrei. So will ich das für mein Menü auch.
Ich bin mittlerweile so verzweifelt, dass ich sogar bereit bin ein komplett neues Menü zu bauen, aber es sollte dann auch auf allen Geräten funktionieren.

Hast du da eventuell eine Vorlage. Die Demoseite kriege ich irgendwie nicht gespeichert. Ich habe zwar den HTML-Code und die JS-Dateien, aber es fehlt mir die CSS-Datei.

Ich brauche eine Menüvorlage die touchfähig ist und die ich mir hinfummeln und anpassen kann.

Kennst du da welche? Ich hab schon alles Mögliche bei Google eingegeben, aber da ist nix dabei für mich.

Vielen Dank für deine Mühe bisher******


----------



## SpiceLab (16. März 2014)

Ich kann hier nicht nachvollziehen, warum deine ergänzte Menü-Version (bei euch) nicht funktioniert, bei mir tut sie es - den Code hierfür kennst du ja aus Post #6 - da erzähle ich dir aber jetzt nichts neues.

In dem Artikel  werden alle relevanten Code-Komponenten einzelnerweise vorgestellt, auch das zugehörige CSS, um sie dort herauszukopieren.


----------



## jermanos (27. Juli 2015)

SpiceLab hat gesagt.:


> Ich kann hier nicht nachvollziehen, warum deine ergänzte Menü-Version (bei euch) nicht funktioniert, bei mir tut sie es - den Code hierfür kennst du ja aus Post #6 - da erzähle ich dir aber jetzt nichts neues.
> 
> In dem Artikel  werden alle relevanten Code-Komponenten einzelnerweise vorgestellt, auch das zugehörige CSS, um sie dort herauszukopieren.



Hallo Spicelab, auch ich habe das Problem, das mein Menü nach deinen Anweisungen nicht richtig läuft. Auf dem PC kein Problem, auf dem Androiden mal ja, mal nein. Auf jedenFall verschwindet das Untermenü immer viel zu schnell.  Nach einigem Suchen habe ich noch das hier gefunden: https://coderwall.com/p/3uwgga/make-css-dropdown-menus-work-on-touch-devices.
Funktioniert aber auch nicht wirklich. Es wäre sehr nett, wenn du mal einen Blick auf meine Seite werfen könntest. Vielen Dank schon mal im Voraus.
Hier der Link zu meiner Seite Seite: www.hp-scheel.de/seminar/


----------

