자바 스크립트 드롭 다운 메뉴 위젯

Question

웹 CMS에 <ul>으로 구성된 메뉴가 있습니다. 여러 메뉴 항목에 드롭 다운 목록에 표시된 하위 항목이 있어야합니다. 이 하위 항목은 <ul>입니다.

이것은 CSS와 자바 스크립트의 몇 줄의 할 기본적으로 쉽게,하지만 난 나에게 다음과 같은 처리하는 데 도움이 준비가 만든 자바 스크립트 솔루션을 찾고 있어요 :

• 거래 화면 가장자리의 상황을 다음과 같은 경우 드롭 다운 메뉴가 현재 뷰포트 외부에있는 모든 부분은 뷰포트 내에 완전히 들어갈 수 있도록 배치하십시오.

이것은 처음부터 코딩하는 암캐입니다.

"이 반갑습니다"의는 다음과 같습니다 드롭 다운 메뉴 외부를 클릭하면 종료됩니다 있도록

• 드롭 다운 버튼 아래에 중심 위치

• 몸에 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; 
} 

은 클릭 드롭 다운 버튼의 정확한 위치를 얻을 수도 있습니다, 그리고 당신은 그 아래에 메뉴를 배치하기 위해 기본적인 수학을 적용해야합니다.