CSS와 JS를 결합한 드롭다운 메뉴는 주류 브라우저_javascript 기술을 지원합니다.

첫 번째 진술:

웹 프론트엔드 업무를 수년째 하고 있지만 해당 직무의 기술 요구사항은 높지 않습니다. HTML과 CSS를 주로 사용하는데, 자바스크립트는 독창적인 경우가 거의 없고 기본적으로 복사해서 수정하는 경우가 많기 때문에 실제로 작성해 보면 기초가 탄탄하지 않은 것을 느끼며 학습과 실습을 병행하는데 많은 것을 얻습니다. .

렌더링:

더 이상 말도 안되는 코드를 게시해 보겠습니다

1. CSS 코드

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

a:링크{색상:흰색;텍스트 장식:없음;}
a:방문{색상:흰색;텍스트 장식:없음;}
a:hover{색상:흰색;텍스트 장식:없음;}
a:활성{색상:흰색;텍스트 장식:없음;}
li{float:left;display:inline; background-color:#003366;width:120px;text-align:center;margin:2px;padding:10px 0 5px 0;position:relative;}
.limouseover{배경색:#0033ff;색상:빨간색;}
.limouseout{배경색:#003366;색상:검정색;}
li ul{display:none;width:120px;position:absolute;left:0;top:30px;}
li ul li{margin:0px auto;border-top:1px solid #006699;}

2. 자바스크립트 코드

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

기능메뉴(메뉴1){
//마우스를 안팎으로 움직여 클래스 이름과 하위 메뉴 숨김 및 표시 전환을 전환합니다.
if (document.getElementById(menu1)){
var menu_ul=document.getElementById(menu1)
if (menu_ul.getElementsByTagName("li").length){
var menu_li=menu_ul.getElementsByTagName("li")
for (i는 menu_li에 있음){
menu_li[i].onmouseover=function(){this.className="limouseover";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display=" 차단";}}
menu_li[i].onmouseout=function(){this.className="limouseout";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display=" 없음";}}
}
}
}
}

스크립트>

3. HTML 코드

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

• 홈페이지


• 메뉴 1메뉴 1
  
• 하위 메뉴 1하위 메뉴 1하위 메뉴 1
• 하위 메뉴 2

메뉴 2

하위 메뉴 1하위 메뉴 1하위 메뉴 1

하위 메뉴 2

<script>var menu1=새 메뉴("menu1");</script>

설명:

1. ul, li 페이지가 흔히 사용된다는 점을 고려하여 CSS 앞에 #menu1을 추가하여 메뉴 스타일의 범위를 제한할 수 있습니다.

2. js는 주로 마우스 이동 및 제거 이벤트를 수신하고 그에 따라 limouseover 및 limouseout 스타일로 전환하는 동시에 하위 메뉴의 표시 속성을 변경하여 표시 및 숨기기 기능을 구현합니다.

3. 동일한 페이지를 충돌 없이 반복적으로 호출할 수 있습니다. html 코드의 JavaScript 코드는 호출 인스턴스입니다. 이전 menu1 은 임의의 변수 이름이고 괄호 안의 menu1 은 html 페이지의 ID입니다.

이 예의 단점:

1. 메뉴 li과 하위 메뉴 li의 마우스 오버 및 마우스 아웃 스타일은 동일합니다. 즉, 색상과 글꼴이 동일하며 별도의 설정이 구현되지 않습니다.

2. Ie6, ie7과 호환되어야 하므로 position:absolute를 사용하면서 top 속성은 메뉴 li의 전체 높이에 맞춰 설정해야 합니다.