CSS Dropdownmenü touchfähig machen.

A

aquidan

Grünschnabel
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
 
Auf die Schnelle konnte ich hierzu diese zwei Lösungsansätze aus dem Netz fischen:

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;}

Javascript: 
/*
	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 );
Javascript: 
$( '#nav li:has(ul)' ).doubleTapToGo();
 
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
Zum Vergrößern anklicken....

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
 
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:
HTML: 
<div id="navWrapper">
    <ul id="nav" ...>
    ...
    </ul>
</div>
  • Ergänzung in deinem HTML-Code zum Einbinden des JS-Codes im Anschluß an das Menü:
HTML: 
<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.
 
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
 
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:

HTML: 
<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>
 
Zuletzt bearbeitet:
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.
 
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?
 
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.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück