HTML5 Context Menus

HTML5 Context Menus.

One of the hidden gems within the HTML5 spec is context menus. The HTML5 context menu spec allows developers to create custom context menus for given blocks within simple menu and menuitem elements. The menu information lives right within the page so there’s no need to create a custom plugin. Let me show you how you can create your own custom context menus from basic HTML!

<section contextmenu=”mymenu”>
<!–
For the purpose of cleanliness,
I’ll put my menu inside the element that will use it
–>
</section>

 

<menu type=”context” id=”mymenu”>
<menuitem label=”Refresh Post” onclick=”window.location.reload();” icon=”/images/refresh-icon.png”></menuitem>
<menuitem label=”Skip to Comments” onclick=”window.location=’#comments’;” icon=”/images/comment_icon.gif”></menuitem>
<menu label=”Share on…” icon=”/images/share_icon.gif”>
<menuitem label=”Twitter” icon=”/images/twitter_icon.gif” onclick=”goTo(‘//twitter.com/intent/tweet?text=’ + document.title + ‘:  ‘ + window.location.href);”></menuitem>
<menuitem label=”Facebook” icon=”/images/facebook_icon16x16.gif” onclick=”goTo(‘//facebook.com/sharer/sharer.php?u=’ + window.location.href);”></menuitem>
</menu>
</menu>

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s