Overlay Container mit Taste M öffnen schließen

[3dr]

Hallo,
ähnlich wie auf der Site contao.org habe ich eine Navigation in einem Overlay-Container realisiert. Alles funktioniert soweit, jedoch habe ich bisher nicht erkennen können, wie ich den Overlay-Container mit der Taste M öffnen und schließen kann. Über Tipps und Hinweise zum Weitersuchen würde ich mich freuen, vielen Dank.

[Andreas]

Da wo du den Click-Event aufgesetzt hast kannst du noch den Keypress-Event aufsetzten.

Hier mal zum Testen in den Devtools (JS-Umgebung)

// JS (jQuery)

console.clear();

$(document).keypress(function(event) {
  console.clear();
  console.log('charCode: ', event.charCode);
  console.log('ctrlKey:  ', event.ctrlKey);
  console.log('key:      ', event.key);
  console.log('shiftKey: ', event.shiftKey);
  console.log('which:    ', event.which);
  console.dir(event);
}); 

Und hier zum Lesen https://api.jquery.com/keypress/

[3dr]

Vielen Dank Andreas,
mit den JS-Umgebungen der Browser kennen ich mich noch nicht aus, da sollte ich mich wohl mal reinwühlen.

[Andreas]

Im Firefox F12 drücken. Dann den Tab JS-Umgebung. Wenn er nicht sichtbar ist, dann Zahnrad (Einstellungen) klicken und ein Häkchen bei JS-Umgebung setzen.

Oder, wenn F12 bei dir nicht geht:

Menü->Extras->Web-Entwickler->'Werkzeuge ein-/ausblenden' (Strg+Umschalt+I)

Dort nicht direkt die JavaScript-Umgebung (Umschalt-F4) aufrufen, sonst hast du sie als alleinstehendes Fenster.

Edit: Die Ergebnisse siehst du dann im Tab 'Konsole'. Man kann die Konsoleansicht auch direkt unter der JS-Umgebung dazuschalten. "Anzeige der Konsole umschalten (Esc)".

[3dr]

@Andreas, danke für deine Erklärungen und deine Hilfsbereitschaft,
die Entwicklungsumgebung im FF kenne und nutze ich zum Arbeiten mit CSS, wie ich diese zum Testen von JS nutzen kann, hat sich mir bisher noch nicht erschlossen. Ich werde jetzt mal versuchen mir auf Basis deiner Erklärungen neue Erkenntnisse zu verschaffen.

[Andreas]

Du kannst da JS-Code eintragen und ausführen. Es wird direkt auf der Seite angewendet. Ist so, als wäre es das letzte Script, welches du ausführst, weil die Seite ist ja bereits geladen. Du kannst auch, wenn die Seite eine JS-Bibliothek geladen hat (jQuery, MooTools ...), direkt die JS-Syntax dieser Bibliothek benutzen. Siehe oben bei

$(document).keypress(function(event){}); 

[3dr]

@Andreas, nochmals Danke für deine Erklärungen, sobald ich Zeit finde, werde ich mich in das Thema einarbeiten.