Dropdown Menu





메인 메뉴의 li 태그(ul.menu li)는 float속성에 left를 성정하여 옆으로 나열하고 있습니다. a 태그는 클릭 영역을 li 태그와 같은 사이즈로 확대하기 위해 display:block으로 블록 라벨 태그로 변경하고 width와 height에 100%를 지정합니다. a:hover는 마우스가 올가왔을 때 배경을 설정하고 간단한 롤보버 효과를 줍니다.
서브 메뉴의 ul 태그(ul.menu li ul.sub)에는 서브 메뉴를 펼칠 때 마우스 이벤트가 동작하지 않게 되는 현상을 방지하기 위해 position:absolute를 설정하고 있습니다. 마지막으로 메인 메뉴의 float:left를 제거하기 위해 'clearfix'를 설정합니다.



							#semple_dropdown ul.menu li{float:left;width:179px;height:48px;background:url('/florakid_lib/images/sample/btn.png');position:relative;}
							#semple_dropdown ul.menu li a{display:block;width:100%;height:100%;line-height:48px;text-indent:30px;font-weight:bold;color:#cfdfb5;text-decoration:none;}
							#semple_dropdown ul.menu li a:hover{background:url('/florakid_lib/images/sample/btn_over.png');}
							#semple_dropdown ul.menu li ul.sub{position:absolute;left:0;}
							#semple_dropdown ul.menu{zoom:1;}/* ie7 float-clearing*/
							#semple_dropdown ul.menu:after{height:0;visibility:hidden;content:".";display:block;clear:both;} /* float-clearing */					
						


							$(document).ready(function(){
								$("ul.sub","#semple_dropdown").hide(); //(1)
								$("ul.menu li","#semple_dropdown").hover(function () { //(2)
									$("ul:not(:animated)", this).slideDown("fase"); //(3)
								},
								function () {
									$("ul", this).slideUp("fast"); //(3)
								});
							});			
						


초기 설정에서는 서브 메뉴의 ul 태그가 보이지 않게 해둡니다. (1)
다음에 jQuery의 hover() 이벤트로 mouseover 이벤트와 mouseout 이벤트를 설정합니다.(2)
hover()는 mouseover()/mouseout()과 매우 비슷합니다만 약간 동작이 다릅니다. mouseover()/mouseout()은 셀렉터로 지정한 태그 안에 자식 태그가 존재하는 경우, 자식 태그에 마우스 포인터가 이동하더라도 mouseout 이벤트 처리가 실행됩니다. 예를 들어 드롭다운 메뉴의 경우 메인 메뉴로부터 서브 메뉴로 이동하는 경우에도 mouseout 때의 처리가 실행됩니다. 그러나 hover()의 경우는 셀렉터로 지정한 태그에 마우스 포인트가 올가왔는지의 여부를 감지하고 자식 태그로의 이동은 감지하지 않습니다.
메인 메뉴에 마우스 포인터가 올라오면 slideUp()/slideDown()으로 서브 메뉴를 표시합니다. 애니메이션이 몇번이고 반복되어 실행되는 것을 방지하기 위해 :not(:animated) 셀렉터를 추가해 둡니다.(3)





HTML은 아래와 같이 ul/li 태그의 자식으로 기술하고 있습니다. 아래 소스에는 메뉴A, C는 2단계까지의 서브 메뉴를, 메뉴B는 3단계까지의 서브 메뉴를 기술하고 있습니다.

CSS는 다음과 같습니다. 2단계 이후의 서브 메뉴는 position으로 겹치지 않도록 하기 위해 a 태그에 position:relative를 설정하여 위치를 조정하고 있습니다. (???) 서브메뉴 안의 li 태그(ul.sub li)는 float:none으로 둘레를 정리하고 옆으로 펼쳐지지 않도록 하고 있습니다.
2단계 이후의 서브 메뉴(ul.sub li ul.sub)는 position:absolute를 지정하고 있습니다. position:absolute는 부모 태그의 position 속성에 "static" 이외의 값이 설정되고 있을 경우 부모 태그의 좌상 부분이 좌표의 기준이 되므로 top:0과 left:179로 설정함으로써 부모 태그의 li 태그와 옆으로 나란히 배치할 수 있습니다. 이 방법을 쓰면 단계가 몇 단계로 늘어나도 서브 메뉴는 정확히 표시됩니다.

IE6-7에서는 레이아웃 기능이 버그가 있어서 다른 브라우저와 다른 결과가 다르기 때문에 CSS를 추가하여 수정을 합니다. 서브 메뉴(ul.sub)에 display:none을 설정하고 있는 경우 IE6의 경우 display:none의 태그 안에 있는 자식 태그의 display 속성을 jQuery로 변경할 수 없기 때문입니다. 위 단순 DropDown 메뉴 샘플에서는 스크립트로 비표시하고 있습니다만 이번에는 CSS로 비표시하고 있습니다.
셀렉터의 가장 앞부분의 * html을 붙이고 있는 것은 IE6, *+html은 IE7용의 CSS입니다. IE6, IE7 각각의 li 태그에 display:inline 과 zoom:1, 서브 메뉴의 ul 태그에 대해서 position:relative와 zoom:1을 설정하고 있습니다.

초기설정은 CSS에서 했으므로 스크립트에서는 mouseover/mouseout 이벤트 처리만 기술하고 있습니다. 단순 DropDown 메뉴 샘플과 대부분 같습니다만 자식 셀렉터를 이용하여 마우스 포인터가 올라간 li 태그의 바로 밑의 ul 태그만(자식 카테고리가 존재하는 경우) 서브 메뉴의 표시/비표시를 나타낼 수 있도록 변경하고 있습니다.
이상으로 다단계 형식의 메뉴바를 완성하였습니다. slideUp()/slideDown()을 fadeIn()/fadeOut()으로 바꾸면 부드럽게 나타나는 메뉴가 됩니다.





							#multiple_dropdown ul.menu li{float:left;width:179px;height:48px;background:url("/florakid_lib/images/sample/btn.png");position:relative;}
							* html #multiple_dropdown ul.menu li{display:inline;zoom:1;}
							*+html #multiple_dropdown ul.menu li{display:inline;zoom:1;}
							#multiple_dropdown ul.menu li a{display:block;width:100%;height:100%;line-height:48px;text-indent:30px;font-weight:bold;color:#CFDFB5;text-decoration:none;position:relative;}
							#multiple_dropdown ul.menu li a:hover{background:url("/florakid_lib/images/sample/btn_over.png");}
							#multiple_dropdown ul.sub{display:none;}
							* html #multiple_dropdown ul.sub{zoom:1;position:relative;}
							*+html #multiple_dropdown ul.sub{zoom:1;position:relative;}	
							#multiple_dropdown ul.sub li{float:none;}
							#multiple_dropdown ul.sub li ul.sub{position:absolute;left:179px;top:0;}	
							#multiple_dropdown ul.menu{zoom:1;}/* ie7 float-clearing*/
							#multiple_dropdown ul.menu:after{height:0;visibility:hidden;content:".";display:block;clear:both;} /* float-clearing */						
						


							$(document).ready(function(){
								$("ul.menu li","#multiple_dropdown").hover(function  () {
									$(">ul:not(:animated)", this).slideDown("fast");
								},
								function () {
									$(">ul", this).slideUp("fast");
								});
							});