ddmenu - создаем собственное контекстное меню

Возможности:

• Внешний вид меню легко настраивается с помощью CSS. Можно добавлять иконки, заголовки, настраивать в соответствии с дизайном.
• Для включения контекстного меню используемого в браузере по-умолчанию, необходимо нажать Ctrl + правая клавиша мыши.
• При нажатии Shift + правая клавиша мыши открываются оба меню, используемое по-умолчанию и ddmenu.
• Скрипт протестирован в Firefox 3, Safari 3, Internet Explorer 6/7, Opera 9. В Opera 9 контекстное меню работает при нажатии Ctrl + левая клавиша мыши
• Также есть возможность активировать и дезактивировать отдельные пункты меню.

Для того чтобы активировать меню на своей странице необходимо подключить mootools.ddmenu.v1.js and ddmenu.css

<link rel="stylesheet" href="ddmenu.css" type="text/css" media="screen" />
<script type="text/javascript" src="mootools-1.2-core-yc.js"></script>
<script type="text/javascript" src="mootools.ddmenu.v1.js"></script>

Теперь создаем непосредственно само меню:

<div class="ddmenu def" id="ddmenu2" style="display:none">
<ul>
    <li class="title">Меню</li>
    <li class="item" id="menu_item1"><a href="http://">Веб-программирование</a></li>
    <li class="item" id="menu_item2"><a href="http://">Верстка</a></li>
    <li class="item" id="menu_big_item"><a href="http://">Обзор ПО</a></li>
    <li class="sepline"></li>
    <li class="item" id="menu_item_with_icon1"><a class="objects" href="http://">Каталог</a></li>
    <li class="item" id="menu_item_with_icon2"><a class="letter" href="http://">Карта сайта</a></li>
    <li class="item" id="menu_item_with_icon3"><a class="umbrella" href="http://">Обратная связь</a></li>
    <li class="sepline"></li>
    <li class="item" id="menu_spec_links"><a href="http://forum.webmasters.by">Форум</a></li>
    <li class="item" id="menu_spec_texts"><a href="http://webmasters.by/news.html">Новости</a></li>
</ul>
</div>

И, наконец, инициализация меню.

function iniz () {
    pagemenu = new DDMenu ('ddmenu2', 'area', {            //ddmenu - это id меню,
        //area - id блока на котором у нас работает меню, для того что бы меню работало на всей страницы заменяем 'area' на document.
        onOpen: function (e) {
            this.enableItems(true);                          //активировать все пункты
            this.enableItems('menu_item_with_icon2',false);  //дезактивировать 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)
        }
    });
}