Избегайте перекрытия между Dijit Menu и его целевым div

Question

У меня есть следующий пример кода в fiddle.net here Dijit.Menu и div. Меню появляется с левым щелчком мыши, моя проблема в том, что меню перекрывает (или закрывает, скрывает) содержимое целевого div, и пользователи не могут читать его содержимое при сравнении с альтернативами, представленными в меню, см. Рисунок ниже.

Так есть ли способ сделать меню появляется без дублирования содержимого DIV, так что содержимое DIV можно увидеть во время просмотра пунктов меню, возможно, позиционированием меню ниже или выше DIV, а на следующем рисунке.

Answer 1

Это может быть достигнуто с помощью некоторого javascript, связанного с событием onOpen, которое запускается, когда отображается popupMenu.

Код должны получить позицию и высоту щелкнули элемент и вычислить положение, в котором меню должно быть размещено:

• х: это х положение пускового элемента
• у: есть у позиции суммируется с высотой пускового элемента

Используйте эти координаты для установки верхней и левая атрибуты стиля из элемента всплывающего меню держателя:

pMenu.connect(pMenu, 'onOpen', function() { 
    var position = dojo.position(this.currentTarget, true); 
    domStyle.set(this.domNode.parentNode, { 
     left: position.x + "px", 
     top: (position.y + position.h) + "px" 
    }); 
}); 

Вот jsfiddle with the popup menu positioned as in your image

Answer 2

Вы можете использовать TooltipDialog, вот jsfiddle на основе одной предоставленной вами.