Виджет выпадающего меню Javascript

Question

У меня есть меню, состоящее из <ul> в веб-CMS. Я хочу, чтобы несколько пунктов меню имели подпозиции, которые отображаются в выпадающем списке. Эти подпункты: <ul> s также.

В основном это легко сделать с помощью нескольких строк CSS и Javascript, но я ищу готовое решение Javascript, который помогает мне справиться следующее:

• Обработайте края экрана ситуации: Если любая часть выпадающего меню будет находиться за пределами текущего окна просмотра, поместите его так, чтобы он полностью находился в области просмотра.

Это сука, чтобы закодировать с нуля.

«Приятно иметь» s будет:

• Centered позиционирование ниже раскрывающегося меню

• Добавление события OnClick к телу так, что при нажатии вне выпадающего меню будет закрыто Это; чистое удаление события onclick впоследствии

Но те, которые я могу сделать сами, если необходимо.

Хороший, маленький, ненавязчивый виджет, который волшебным образом преобразует мой <ul> будет прекрасным.

Если решение основано на структуре, оно должно быть прототипом, так как это то, что я использую в CMS.

Answer 1

Вы можете получить смещения UL и проверить, находятся ли они на определенном расстоянии от области просмотра.

// Pseudo code 
var ul = document.getElementById("menu"); 
if(ul.offset.x + ul.width > viewport.width) { 
    ul.offset.x = viewport.width - ul.width; 
} 

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