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

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

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"}
}