Description

ddmenu is a simple MooTools-based script to create you’re own context menus.

Features

• The Menu Appearance is adapted to the System Content Menu behavior.
• Crtl-Switch: Press the Crtl-key and right click to switch between ddmenu and browser default context menu.
• Shift-Switch: Press the Shift-key and right click to open ddmenu beside the browser default context menu.
• Fully customizable: Menu styling can be easily defined in external stylesheet.
• Cross-browser: Full A-Graded browsers support (Opera is supported through Ctrl + Left Click)
• Fade-in (settable)
• Two tricky functions to enable/disable menu items

Specification

• Requires: < mootools 1.2 beta 2
• Tested browsers: Firefox 2, Safari 3, Internet Explorer 6/7, Opera 9 under Windows. Firefox 2, Safari 3 under Mac OS X
• Last modified on: 1/1/08
• Latest version: 0.2
• Author: janlee

Demos

• Right click anywhere on a page to bring up a menu. Use “Ctrl + Left Click” if you’re Browser doesn’t understand right clicks.
• mooeDit - A This experimental HTML-Editor uses the ddmenu in a Textarea

How to use it

1. Download moo.ddmenu.0.21.js and ddmenu.css. Include them in your page

   <link rel="stylesheet" href="css/ddmenu.css" type="text/css" media="screen" />
   <script type="text/javascript" src="js/mootools-beta-1.2b1.js"></script>
   <script type="text/javascript" src="js/moo.ddmenu.0.2.js"></script>

2. Create the menu-HTML width the items and they’re IDs

   <div class="ddmenu def" id="ddmenu2" style="display:none">
   <ul>
   <li class="title">Menu Title</li>
   <li class="item" id="menu_item1"><a href="#">My item 1</a></li>
   <li class="item" id="menu_item2"><a href="#">My item 2</a></li>
   <li class="item" id="menu_big_item"><a href="#">This is a oversized item...</a></li>
   <li class="sepline"></li>
   <li class="item" id="menu_item_with_icon1"><a class="objects" href="#">Another item</a></li>
   <li class="item" id="menu_item_with_icon2"><a class="letter" href="#">Disabled item</a></li>
   <li class="item" id="menu_item_with_icon3"><a class="umbrella" href="#">With icon</a></li>
   <li class="sepline"></li>
   <li class="item" id="menu_spec_links"><a href="#">Enable on Links</a></li>
   <li class="item" id="menu_spec_texts"><a href="#">Enable on Texts</a></li>
   <li class="item" id="menu_spec_images"><a href="#">Enable on Images</a></li>
   </ul>
   </div>

3. Initialize ddmenu class passing the options. This example calls console.info when a menu item is clicked. (Take a look in the JS-Source for more informations)
   

   function iniz () {
   pagemenu = new DDMenu ('ddmenu2', document, { //document can be the whole page,
   //an element or a parent of elements
   onOpen: function (e) {
   this.enableItems(true); //enable all
   this.enableItems('menu_item_with_icon2',false); //disable menu_item_with_icon2
   },
   
   onItemSelect: function (act_id, act_el, menu_bindon) {
   console.info("menu action -> item id: \"%s\" from: %o in %o", act_id, act_el, menu_bindon)
   }
   });
   }

Version history

• v.0.21 [2/08]
  • Fixes for MooTools 1.2 Beta 2
• v.0.2 [1/08]
  • Correct positioning
  • Scroll-save
  • Ctrl and Shift Switches
  • Fade In
  • CSS-Styles reworked and adapted
• v.0.1 [11/07]
  • Initial Version with a basic menu script structure
  • Event-calls and enableItems() functions
  • Ajusted the when-menu-is-opened events on the system context menu behavoir