Kontextmenü

[Matthias Scharwies]

Servus!

Jo Ok Hallo und auf jeden Fall Danke,

doch besser ich zeige mal wie das jetzt auf meiner Seite aussieht:

Ich steig da nicht ganz durch.

Also und jetzt weis ich nicht von wo aus ich den Ersten aufruf starten soll und denke doch das dass reicht was ich hier gezeigt habe aus einer dynamisch erstellen Seite!

Ich würde Dr empfehlen, das Prinzip der Trennung von Inhalt, Präsentation und Verhalten zu beachten. Dann wird der Code gleich übersichtlicher und damit wartungsfreundlicher:

1. HTML

<nav id="context" class="inactive">
	<button id="features">Eigenschaften</button>
	<button id="send">Senden</button>
	<button id="move">Verschieben</button>
	<button id="erase">Löschen</button>
	<button id="mark">Markieren</button>
</nav>

Es ist jetzt viel kürzer und übersichtlicher. Ich habe ein nav-Element verwendet, weil menu wohl aus dem Standard fliegt und es semantisch eindeutiger ist als ein div.

Da du wohl eher Aktionen ausführst, als auf andere Seiten zu verweisen, habe ich statt des a- ein button-Element verwendet. (Optimal wäre eine Einbettung in eine Liste.)

2. CSS

nav#context .inactive {
  display: none;
  ...
}

nav#context .active {
  display: block;
  ...
}

Alle Positionierungen und Formatierungen kommen hier rein. Durch display: none; ist es aber ausgeblendet.

3. JavaScript

Die von dir verwendeten HTML-Event-Attribute machen das ganze Markup sehr unübersichtlich. Besser ist es, die Ereignisverarbeitung komplett ins JavaScript zu ziehen:

'use strict';
document.addEventListener('DOMContentLoaded', function () {
	

	document.addEventListener('contextmenu', showContextMenu);

  showContextMenu () {
    // Kontextmenü wird sichtbar gemacht
    document.querySelector('#context').className = 'active';
    // Achte, ob Buttons geklickt werden
    document.querySelector('#features').addEventListener('click', show Features);
    document.querySelector('#send').addEventListener('click', send);
  }  

});

Beim Laden des Inhalts wird eine anonyme Funktion aufgerufen, die einen Eventlistener beinhaltet, der bei einem Rechtsklick die Funktion showContextMenu aufruft.

Diese ändert die Klasse des Menüs von inactive auf active, sodass es sichtbar wird.

Danach werden weitere Eventlistener für die einzelnen Buttons eingerichtet.

Lies dir mal folgende Tutorials durch:

• JavaScript/Tutorials/Grundlagen des DOM
• JavaScript/Tutorials/Grundlagen der Ereignisverarbeitung

Herzliche Grüße

Matthias Scharwies