간단한 스크립트를 사용하여 아름다운 드롭다운 menu_javascript 기술을 구현하세요.-JS 튜토리얼-php.cn

간단한 스크립트를 사용하여 아름다운 드롭다운 menu_javascript 기술을 구현하세요.

WBOY

풀어 주다： 2016-05-16 19:23:25

원래의

939명이 탐색했습니다.

우연하고 지루한 실험에서 드롭다운 메뉴를 작성하는 이러한 방법이 발견되었습니다. 작품을 완성하고 나서 느끼는 즐거운 기분은 마치 아르키메데스가 욕조에 몸을 담그고 부력의 원리를 발견한 듯한 느낌!

NAME:Stupid CAT 풀다운 메뉴 v1.0
지원:Ie(√) Firefox(√)
STANDARD:XHTML 1.0 Strict / CSS2.0

핵심 스타일 :

코드 복사 코드는 다음과 같습니다.

html,body{ 
 background :#000000 ; 
 높이:100%; 
 글꼴-가족:Arial, Helvetica, sans-serif; 
 색상:#333333; auto; 
 오버플로:숨김; 
 텍스트 정렬:center;} 
/*메뉴 컨테이너 메뉴*/ 
div#menu{ 
 너비: 100%; 높이: 34px ; 
 padding:0px 0px 0px 5px;} 
/*첫 번째 레벨 메뉴*/ 
div#menu div{ 
 width:125px; 
 height:20px> float:left ; 
 text-transform:capitalize; 
 배경:#cccccc; 
 padding:5px 0px 0px 0px;} 
/*보조 메뉴*/ >div #menu div div{ 
 너비:125px; 
 높이:20px; 
 border-bottom:1px #333333 solid 
 배경:#666666 
 margin-top:-4px ; 
 커서:포인터; 
 디스플레이:없음;} 
/*보조 메뉴의 특수 스타일(선택 사항)*/ 
div#menu div div.div1{ 
 margin-top: 3px ; 
 border-top:1px #333333 solid;} 



핵심 코드: 

코드 복사

코드는 다음과 같습니다. var menuItem=document.getElementById("menu").getElementsByTagName("div") for(i=0;i< ;menuItem.length ;i ){ menuItem[i].onmouseover=function(){ var subMenu=this.getElementsByTagName("div")

for(j=0;j subMenu[j].style.display="block";
subMenu[j].onmouseover=function(){this.style.Background="#999999";this.style. color="# 000000";};
subMenu[j].onmouseout=function(){this.style.Background="#666666";this.style.color="#333333";};}
this.style .Background="#666666"};
menuItem[i].onmouseout=function(){
var subMenu=this.getElementsByTagName("div")
for(j=0 ;j subMenu[j].style.display="none";}
this.style.Background="#cccccc"}
}