HTML5 und Firefox: Kontextmenü erweitern

5 Kommentare

Die Idee per HTML auch das Kontextmenü einer Website zu beeinflussen, finde ich sehr gut. Deswegen habe ich mit Freude ein Code-Beispiel ausprobiert welches ich auf browsomatic.com gefunden habe. Hier gibt es eine Demo.

Ich habe das Beispiel leicht angepasst und folgendes erstellt:

<body contextmenu="infomenu">

<p>Hier kommt irgendein Inhalt&hellip;</p>

<menu type="context" id="infomenu">
    <menuitem label="WordPress-Newsletter" onclick="window.open('http://www.wordpress-newsletter.perun.net')"></menuitem>
    <menuitem label="WordPress-Meetup" onclick="window.open('https://www.perun.net/2011/11/09/wordpress-meetup-am-24-11-in-betahaus-koeln/')"></menuitem>
</menu>

</body>

Wenn man dann auf der entsprechenden Seite mit dem Rechtsklick das Kontextmenü aufruft, dann gibt es zwei zusätzliche Einträge, siehe folgende Abbildung:

Erweitertes Kontextmenü

Klickt man auf einen der beiden zusätzlichen Punkte, wird man auf die entsprechende URL weitergeleitet. Funktioniert in Firefox 8 und afaik in Safari. So weit so gut.

Das Problem ist aber, dass menuitem nicht zum Umfang von HTML5 gehört sondern zu WAI-ARIA. Ich habe versucht das menuitem testweise durch command zu ersetzen, so wie es hier an einem Beispiel gezeigt wird, aber das klappte genau so wenig wie das Ersetzen durch li oder durch button.

Vielleicht werde ich nach dem nochmaligen Lesen des Bugzilla-Eintrages zu dieser Funktion schlauer. 🙂

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schlagwörter: ,

5 Kommentare

  1. Den Tag gibt es schon länger wurde in html4 dann als depreciated gekennzeichnet und in html5 wiederbelebt. In der ursprünglichen Version heißt es:

    The tag defines a list/menu of commands.

    In html5 hat er neue Funktionen bekommen:

    The tag is used for context menus, toolbars and for listing form controls and commands.

    Du kannst also darin Buttons und oder Links definieren, wo der Tag ähnlich wie nav fungiert, aber sich speziell auf bestimmte Elemente bezieht (=> Toolbar). Oder Du nutzt menuitem und definierst damit das Kontextmenü.

    http://www.w3schools.com/html5/tag_menu.asp

    1. @Oliver,

      mir ging es weniger um menu, ein wieder entdeckter, alter Bekannter, der recht gut dokumentiert ist als viel mehr um menuitem. Eine Referenz (erlaubte Attribute und Werte) wäre hilfreich.

  2. Ja, an der Doku hängt es noch 🙂

    Soweit ich bisher raus finden konnte, gibt es da label, icon, accesskey und onclick. Den Rest, sofern vorhanden müssen wir uns wohl mal wieder selber suchen. 😉

  3. Kann man den Eintrag auch nach unten schieben ? Weil sich die User beschweren das Sie so keine neuen Fenster mehr öffnen können.

Kommentare sind geschlossen.