Basic JQUERY -9.JQUERY 2Depth Menu > jquery

출처 : http://monolife.kr/131

1. 구조를 제대로 잡는게 중요

    position 의 absolute / relative 적절히 이용

2. 메뉴 전체 컨테이너가 오버시 이미 선택된 클립 아웃 처리

   아웃시 선택된 클립 오버 처리

3. 하나의 menu container 안에 ( main 클립 , sub 클립 ) 이 있을때

    menu container 오버시 main 클립 오버처리,

    main 클립의 버튼처리는 클릭때만 처리한다.

4. element.find("인식자") : element 내에 있는 자식중에 "인식자"에 속하는

    모든 자식요소들을 뽑아낸다( 자식의 depth 상관없다. )

5. $(this).parents(".menu") -> 상위부모중 클래스 네임이 menu인걸 찾는다.

6. .menu:hover > div.mainmenu -> 클래스네임 menu 를 오버했을 시 menu내

   자식인 mainmenu에 효과를 준다.

   .menu > div.mainmenu:hover -> 클래스네임 menu 의 자식인 mainmenu를 오버시

   효과를 준다.

-- 다음은 2Depth 만들때의 Step.

Step #1

- 레이아웃 잡기.

        Step #2

- 서브메뉴 확대/축소 처리하기.

        Step #3

- 메인메뉴에 over/out 효과 구현하기.

- 액션을 이용하지 않고 css이용

.menu div.menuPanel >p

{

color:#000000;

}

.menu div.menuPanel:hover > p

{

color:#ff0000;

}

         Step #4

- 메인 메뉴 선택 비선택 처리.

         Step #4-2

- 리펙토링

- 자주 사용되는 메인메뉴 타이틀 부분, 서브메뉴Container, 서브메뉴 Panel을

 MainMenu.data()를 이용해서 등록.

- 타이틀 부분까지는 적용.

- 잔여 작업 :

subMenuPanel, subMenuContainer부분을 변경해야 됨.

           Step #4-3

- 리팩토링

- subMenuPanel, subMenuContainer부분까지 모두 data()를 이용해서 변경.

           Step #4-4

- 메뉴에서 over /out시 선택메뉴 확대/축소 처리.

           Step #5

- 서브메뉴 over/out  효과 구현.

           Step #6

- 서브메뉴아이템 항목 선택 비선택 처리.

- 문제점 :

서브메뉴 아이템 항목을 선택하는 경우 상위 메뉴도 선택되도록 만들어야 함.

           Step #6-2

- 서브메뉴 아이템 항목을 선택하는 경우 상위 메뉴도 선택되도록 만들기.

           Step #6-3

- 리펙토링

           Step #7

-  소스 최적화 하기.

http://closure-compiler.appspot.com/home

http://www.cssoptimiser.com/

           Step #8

- 기능추가

- 메뉴항목을 외부에서 받아 동적으로 생성하기.

- menulist xml 포맷정의하기 또는 json 포맷정의하기.

           Step #9

- 최적화.