custom-context-menu

Реализовать кастомное контекстное меню

Решение на jsfiddle | Demo

• Для инициализации и создания компонент получает:

  • css-селектор на котором будет работать
  • описание структуры меню (шаблон приведен в конце описания)

• Структура меню может быть любой по вложенности и количеству элементов меню, при этом подменю может содержать вложенные подпункты.

• При правом клике на css-селектор для которого был создан компонент показывать контекстное меню прямо под местом клика.

• При клике на пункт меню должна выполняться соответствующая функция.

• Пункт меню содержащий подменю должен быть отмечен, подменю показывается/скрывается при наведении/уходе курсора.

• Стилизовать компонент на свой вкус.

Шаблон структуры:

  [{
    title: 'File',
    action: function() {
      alert('open file');
    }
  }, {
    title: 'Format',
    action: function() {
      alert('format content');
    }
  }, {
    title: 'Edit',
    action: function() {
      alert('edit content');
    }
  }, {
    title: 'More stuff',
    submenu: [{
      title: 'Send by',
      submenu: [{
        title: 'Email',
        action: function() {
          alert('emailed');
        }
      }, {
        title: 'Skype',
        action: function() {
          alert('skyped');
        }
      }]
    }]
  }];