Frage von Noahvh, 65

Dropdown Menü funktioniert nicht auf Smartphone?

Ich probiere gerade ein responsives Menü mit Html5 und Css3 zu schreiben, es passt sich auch einigermaßen dem Display an, und wenn ich auf meinem Laptop das kleinwerden des "Fensters" simuliere funktioniert die Seite auch, nur wenn ich es auf einem Smartphone öffne, funktioniert das Menü nicht. Bitte um Hilfe, Danke. Lg Noah

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von maximilianus7, 36

im FF und Chrom sehe ich kein menü-icon, im IE schon, das reagiert aber nicht.

bei jquery ist mir noch nie das backtick ` als syntaktisches element begegnet, kann sein das browserabhänging das als quote ' oder " interpretiert wird.

$(`nav`) oder $('nav') ist aber bestimmt falsch:  punkt fehlt: 

$('.nav')

versuch mal in

$(`.menucon`).click(function() {
$(`nav`).slideToggle(`slow`);


das ` durch ' zu ersetzen. und den punkt nicht vergessen.

Kommentar von Sarkophator ,

Das dir Backticks bisher in JavaScript noch nicht (bzw. kaum) begegnet sind, liegt daran, dass diese ein neuer Zusatz des ECMAScript 2015 Standards (ES6) sind. Sie sind in dem Sinne auch bekannt als "Template strings" bzw. "Template literals" und ermöglichen es, Scripts in Strings einzubetten:

let i = 5;
console.log(`i = ${i}`); // Ausgabe: i = 5

Außerdem werden sie mehrzeilig interpretiert, weshalb man Zeilenumbrüche nicht manuell einfügen braucht:

console.log(`Dieser Text wird
mehrzeilig ausgegeben`);
// Ausgabe:
// Dieser Text wird
// mehrzeilig ausgegeben

Was in den "${}" steht, ist dabei egal. Angezeigt wird am Ende der Rückgabewert davon.

Es lassen sich damit noch viel mehr machen, hier ein Link zum MDN über die Templatestrings/Template literals:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter...

Der Nachteil ist natürlich, dass diese etwas langsamer sind. (Vergleichbar mit Doublequote aus PHP)

Antwort
von Sarkophator, 31

maximilianus7 hat dein Problem wahrscheinlich gefunden, ich führs jetzt nur nochmal etwas genauer aus:

Du benutzt Templatestrings, um die Elemente mittels jQuery zu selektieren. Da diese ein neues Feature des ES6 Drafts sind, sind sie noch nicht von allen Browsern auf allen Systemen unterstützt, mal abgesehen davon dass man sie sowieso nur nutzen sollte, wenn man sie braucht. (U.a. weil sie auch langsamer sind) Da die Selektoren auch keinerlei Variabilität oder dergleichen besitzen, machen die Templatestrings hier erst recht keinen wirklichen Sinn. Also einfach Backtick durch doppelte/einfache Anführungszeichen ersetzen und gut ist.

Templatestrings scheinen bei den Mobilgeräten aktuell nur unter iOS9 unterstützt zu sein. Genauere Angaben zur Kompatibilität (und zur Kompatibilität der anderen ES6 Features) findest du auf:

https://kangax.github.io/compat-table/es6/

Kommentar von maximilianus7 ,

d.h. dass das $-Zeichen eine andere bedeutung hat als bei jquery. nach einbindung  von jquery am anfang ist ja $ als abkürzung von "jquery" definiert. d.h. wohl, dass place holders {...} gar nicht ersetzt werden - was hier aber keine rolle spielt.

was für ein wirrwar!   

Antwort
von greenstar19, 41

Hallo,

also bei mir funktioniert es am Handy problemlos. Lediglich etwas klein.

Öffnet sich das Menü denn gar nicht ? Hast du es mal mit einem anderen Browser probiert ?

MfG Nico

Kommentar von Noahvh ,

Klappt es sich problem aus? Bei dem Smartphone Menü sollen die li Punkte erst zu sehen sein wenn man auf das Icon oben links klickt, war es so bei dir, oder war es ein ganz normales Menü?

Kommentar von greenstar19 ,

Es war ganz normal, ich klicke auf den Button und das Menü öffnet sich. 

Antwort
von Noahvh, 51

Die Website heißt: nhh.bplaced.net

Antwort
von ikinikin, 39

Funktioniert doch

Kommentar von Noahvh ,

Bei mir nicht, klappt es sich ganz normal aus?

Kommentar von ikinikin ,

Ja. Wenn man halt auf das Icon drückt. Das Icon ist aber am Handy noch zu klein. Und die Leiste zu dünn

Keine passende Antwort gefunden?

Fragen Sie die Community