Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML-Tipps für Webentwickler: Jede Woche neu

Kontextmenü definieren mit menu

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
06:21
  Lesezeichen setzen

Transkript

Wenn wir Anwendungen mit Webtechnologien erstellen, brauchen wir auch Kontextmenüs und genau dafür ist das menu-Element vorgesehen. In HTML 5.1 sind auch sogenannte interaktive Elemente definiert. Früher hätte man sicher gesagt, das ist doch ein Einsatz für Javascript, das kann man doch nicht mit HTML, aber diese eindeutigen Dateien wie sie früher üblich waren, gilt ja heute nicht mehr in dieser Form und so gibt es auch interaktive Elemente, die rein über HTML erstellt werden. Ein Beispiel ist dieses "details-summary" für so Ausklapp-Bereiche, und ein anderes Beispiel ist das Menu-Element mit dem "menuitem". Damit können Sie Kontextmenüs definieren. Es funktioniert nach folgendem Prinzip. Ich habe ein Element, bei dem ich die Aktion auslösen möchte, und dort gebe ich das Attribut "contextmenu" an. Ich verweise auf einen Namen, den ich selbst vergeben kann, und dann erstelle ich mein eigentliches Kontextmenü. Dafür verwende ich das menu-Element mit mehreren "menuitems". Wichtig ist beim menu-Element type="context", und außerdem eine ID, und die ID, die ich angebe, muss genauso lauten, wie der Text, den ich beim "contextmenu" angegeben habe. Sehen wir uns das einmal an im Firefox. Ich klicke mit der rechten Maustaste, wie man das bei Kontextmenü so macht, und dann habe ich mein Kontextmenü durch diese drei Punkte ergänzt, die ich als Menuitem angegeben hatte. Das sind diese drei Punkte. In diesem Fall schreibe ich den Text zwischen "menuitem" Anfang und Ende. Ich kann stattdessen auch ein "label" verwenden und da die Eingaben machen. Wenn wir uns das ansehen, funktioniert das genauso, wie das andere auch. Ich kann aber wesentlich mehr machen, ich kann solche Menus auch verschachteln, da sieht man an dieser Stelle ein Beispiel, da habe ich jetzt ein menu-Element innerhalb eines menu-Elements. Gibt bei dem menuitems immer labels, also Beschriftungen, und bei "onklick" lasse ich ausgeben, was gerade geklickt wird. Hier sehen Sie ein Beispiel für "disabled", das sehen wir uns auch gleich an, wie das funktioniert, und dann kommt das Menu, was da drinnen steht. Da gibt es so Share-Buttons für "twitter", "facebook". Außerdem kann man dort auch "checkboxen" verwenden. Da lasse ich dann ausgeben, ob die ausgewählt ist oder nicht, und man kann beim Menuitem type="radio" schreiben, dann kann man von den beiden immer nur eine auswählen, sofern man die entsprechende "radiogroup" auch gesetzt hat. Sehen wir uns das einmal an, dieses ausgefeiltere Beispiel. Hier sind meine oberen Punkte, kann ich anklicken, dann gibt es aber das verschachtelte Menu, das befindet sich nach einem File. Kann ich auch anklicken. Die Radio-Buttons, da ist es so, wenn ich jetzt den Radio-Button "Nein" wähle, dann sehen wir beim nächsten Öffnen "ja" nicht mehr angeklickt sein. Genau, also davon kann man immer nur eins auswählen. Es gibt auch Checkboxen. Und die sieht man dann, dass die das Häckchen weiter haben. Wie sieht es aber mit der Browser-Unterstützung aus? Aktuell finden Sie das immer bei "Can I use" und da ist es im Firefox implementiert, aber nicht ganz vollständig, und derzeit im Chrome nur hinter einem Flag, das heißt aber das kann dann ganz schnell kommen. Bis die Situation besser aussieht, gibt es ein "Pollyfill". Das können wir uns hier einmal ansehen, das passiert auf jQuery. Das ist auch dieses Beispiel, was ich eben leicht modifiziert gezeigt habe. Ich sehe das einmal im Firefox an, und dann ist es genauso wie eben. Das heißt, es wird wirklich die native Implementierung von Firefox genutzt. Sehen wir uns das dann einmal im Chrome an. Und dann sehen wir, das ist jetzt eine ganz andere Implementierung. Das heißt, in Chrome, wo es derzeit nicht funktionieren würde, ist es auf diese Art nachgebildet, also wir haben einen klassischen Polyfill. Für Kontextmenüs und ähnliches ist das menu-Element in HTML vorgesehen. Die einzelnen Punkte sind dann Menuitems, die kann man auch in Form von labels angeben, und Sie können diese Menus sogar auch verschachteln und auch auf Checkboxen oder Radio-Buttons zurückgreifen. Bevor Sie so etwas einsetzen, müssen Sie sich ansehen, wie es konkret mit der Browserunterstützung ausschaut und im Zweifelsfall ist es dann sinnvoll ein Polyfill zu nutzen, sodass in den Browsern, die es nativ können, die native Implementierung genommen wird, aber in anderen Browsern, die es noch nicht können, dann mit Javascript nachgebessert wird.