The most common technique for apply context menus to a large number of links / buttons / images is the use of "getElementByTagName", processing each tag and creating one instance of the Context Menu object attached to each tag. This pre-processing can freeze your browser, and create memory leaks when you are using dynamic areas. With the bubbling technique we can guarantee the success without worry about dynamic areas. Also we don´t need to refer a link directly using the tabName or an unique ID to create the corresponding context menu object, decreasing the count of links with ID included inside the XHTML code.

Besides, the implementation using the bubbles "Navigate" and "Properties" only has an instance of the context menu object for each type of menu, decreasing the memory use and generating each context menu in real time through mouse's click event.

We must include a few styles and scripts that are required to configure the context menu's bubble. The initialization's example:

<script type="text/javascript" src='/yui/build/utilities/utilities.js'></script>
<script type="text/javascript" src='/yui/build/container/container-min.js'></script>
<script type="text/javascript" src='/yui/build/menu/menu-min.js'></script>
<script type="text/javascript" src='/yui-cms/build/bubbling/bubbling.js'></script>
<!-- YUI Basement Style -->
<link rel="stylesheet" type="text/css" href='/yui/build/container/assets/container.css'/>
<link rel="stylesheet" type="text/css" href='/yui/build/menu/assets/menu.css'/>

We offer you two behaviors, that define the funcionality of the context menu for Feed Links (links to RSS / ATOM feed) and Bookmark Links (links that can be add del.icio.us or others), this objects called "FeedLinks" ( YAHOO.behavior.FeedLinks ) and "BookmarkLinks" (YAHOO.behavior.BookmarkLinks) implement each one a few necessary optimizations for this behavior's good performance. Only include this behaviors and the corresponding language definition after the bubbling initialization and you will have all the context menu's functionality in your page:

<script type="text/javascript">
  var MCMS_CLOSE = 'Close';
  // constants required for the FeedReader Context Menu (multilanguage plataform)
  var CMO_RSS     = 'RSS',
  CMO_RSS_BLOGLINES = 'Subscribe to Bloglines',
  CMO_RSS_YAHOO = 'Subscribe to My Yahoo!',
  CMO_RSS_GOOGLE = 'Subscribe to Google Reader',
  CMO_RSS_NETVIBES = 'Subscribe to Netvibes',
  CMO_RSS_MSN = 'Subscribe to My MSN',
  CMO_RSS_NEWSGATOR = 'Subscribe to Newsgator',
  CMO_RSS_LIVE = 'Other Application...';

  // constants required for the Bookmarks Context Menu (multilanguage plataform)
  var CMO_BOOKMARK  = 'Bookmark',
  CMO_BOOKMARK_MENEAME  = 'Add to Menéame',
  CMO_BOOKMARK_DIGG = 'Add to Digg',
  CMO_BOOKMARK_DELICIOUS = 'Add to Del.icio.us',
  CMO_BOOKMARK_TECHNORATI = 'dd to Technorati',
  CMO_BOOKMARK_YAHOO  = 'Add to Yahoo!';
</script>
<script type="text/javascript" src='/yui-cms/build/feeds/feeds.js'></script>
<script type="text/javascript" src='/yui-cms/build/behaviors/bookmarks.js'></script>

Besides, we'll able to modify visually the style of this context menus through a simple code in CSS:

<link rel="stylesheet" type="text/css" href='/yui-cms/assets/css/cms.css'/>

You can see an example of this behavior through this link, this behavior includes several optimization techniques.

This implementation has only two instance of the context menu object (Feed Context Menu and Bookmark Content Menu) for the document, decreasing the memory usage and rendering in realtime each "click" or "right click" event.

• Click here to see an example of the context menu behavior
• Click here to download all this stuff